Templates consist mostly of groups of organisms stitched together to form pages. It’s here where we start to see the design coming together and start seeing things like layout in action.
Application Center selection page.
<div class="tls-application-center">
<div class="tls-navbar">
<div class="tls-navbar--content">
<div class="tls-navbar--logo"><a class="tls-logo" href="#"><img class="tls-logo--img" src="/atom/logo/logo/logo.svg"/></a></div>
<div class="tls-navbar--links -opened">
<div class="tls-navbar--slot">
<div class="tls-dropdown"><a class="tls-link-dropdown">
<div class="tls-link-dropdown--text">Opened</div>
<div class="tls-link-dropdown--icon"><i class="fa fa-chevron-up"></i></div></a>
<div class="tls-dropdown--content">
<div class="tls-dropdown--content">
<div class="tls-dropdown-list">
<div class="tls-dropdown-list--slot"><a class="tls-dropdown-text">My dropdown text</a></div>
<div class="tls-dropdown-list--slot">
<div class="tls-dropdown-text">A longer text to see the difference</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="tls-navbar--slot">
<div class="tls-dropdown"><a class="tls-link-dropdown">
<div class="tls-link-dropdown--text">Closed</div>
<div class="tls-link-dropdown--icon"><i class="fa fa-chevron-down"></i></div></a>
<div class="tls-dropdown--content hidden">
<div class="tls-dropdown--content hidden">Hidden content.</div>
</div>
</div>
</div>
<div class="tls-navbar--slot"><a class="tls-link-uppercase">My Uppercase Link</a></div>
<div class="tls-navbar--slot"><a class="tls-button-link">Button link</a></div>
</div>
<div class="tls-navbar--language">
<div class="tls-navbar--slot"><a class="tls-link-dropdown"><img class="tls-link-dropdown--flag" src="./flag-en.png"/>
<div class="tls-link-dropdown--text">Link</div>
<div class="tls-link-dropdown--icon"><i class="fa fa-chevron-down"></i></div></a></div>
</div>
<div class="tls-navbar--hamburger">
<div class="tls-hamburger -state-closed">
<div class="tls-hamburger--top-line"></div>
<div class="tls-hamburger--middle-line"></div>
<div class="tls-hamburger--bottom-line"></div>
</div>
</div>
</div>
</div>
<header class="tls-simple-banner">
<div class="tls-home-text-group">
<div class="tls-simple-text -color-white -size-22">Simple text<img class="tls-image" src="/atom/image/image.png"/>
</div>
<h1 class="tls-heading-1">Heading level 1</h1>
</div>
</header>
<div class="tls-application-center--content">
<div class="tls-application-center--heading">
<h2 class="tls-heading-2">Heading level 2</h2>
</div>
<div class="tls-application-center--info">
<div class="tls-simple-text -size-16 -style-italic">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
</div>
</div>
<div class="tls-button-image-group">
<div class="tls-button-image-group--slot">
<div class="tls-button-image-group--button"><a class="tls-button-image">
<div class="tls-button-image--decoration">
<div class="tls-decoration-vertical-lines -white">
<div class="tls-line1"></div>
<div class="tls-line2"></div>
</div>
</div>
<div class="tls-button-image--img" style="background-image: url("/molecule/buttons/button-image/center.png")">
<div class="tls-button-image--content">
<div class="tls-simple-text -color-white -size-40">Simple text
</div>
<div class="tls-button-image--content-small-text">
<div class="tls-text-underline">
<div class="tls-text-underline--text">
<div class="tls-simple-text -color-white -size-16">Simple Text
</div>
</div>
<div class="tls-text-underline--decoration">
<div class="tls-decoration-horizontal-lines">
<div class="tls-line1"></div>
<div class="tls-line2"></div>
</div>
</div>
</div>
</div>
</div>
</div></a>
</div>
<div class="tls-button-image-group--info">
<div class="tls-card-info">
<div class="tls-card-info--img"><img class="tls-card-info--icon" src="/molecule/card/card-info/icon-sample.svg"/></div>
<div class="tls-card-info--content">
<div class="tls-simple-text -color-main -weight-bold -size-16">Simple text
</div>
<div class="tls-simple-text -weight-bold -size-16">Simple text
</div>
<div class="tls-card-info--content-paragraph">
<div class="tls-simple-text -size-16">A very long Simple text on multiple lines
</div>
</div>
<div class="tls-card-info--content-button">
<div class="tls-button-dynamic">
<div class="tls-button-dynamic--text">
<div class="tls-simple-text -color-primary -size-19">Simple Text
</div>
</div>
<div class="tls-button-dynamic--decoration">
<div class="tls-line1"></div>
<div class="tls-line2"></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Without information-->
<div class="tls-button-image-group--slot">
<div class="tls-button-image-group--button"><a class="tls-button-image">
<div class="tls-button-image--decoration">
<div class="tls-decoration-vertical-lines -white">
<div class="tls-line1"></div>
<div class="tls-line2"></div>
</div>
</div>
<div class="tls-button-image--img" style="background-image: url("/molecule/buttons/button-image/center.png")">
<div class="tls-button-image--content">
<div class="tls-simple-text -color-white -size-40">Simple text
</div>
<div class="tls-button-image--content-small-text">
<div class="tls-text-underline">
<div class="tls-text-underline--text">
<div class="tls-simple-text -color-white -size-16">Simple Text
</div>
</div>
<div class="tls-text-underline--decoration">
<div class="tls-decoration-horizontal-lines">
<div class="tls-line1"></div>
<div class="tls-line2"></div>
</div>
</div>
</div>
</div>
</div>
</div></a>
</div>
</div>
<div class="tls-button-image-group--slot">
<div class="tls-button-image-group--button"><a class="tls-button-image">
<div class="tls-button-image--decoration">
<div class="tls-decoration-vertical-lines -white">
<div class="tls-line1"></div>
<div class="tls-line2"></div>
</div>
</div>
<div class="tls-button-image--img" style="background-image: url("/molecule/buttons/button-image/center.png")">
<div class="tls-button-image--content">
<div class="tls-simple-text -color-white -size-40">Simple text
</div>
<div class="tls-button-image--content-small-text">
<div class="tls-text-underline">
<div class="tls-text-underline--text">
<div class="tls-simple-text -color-white -size-16">Simple Text
</div>
</div>
<div class="tls-text-underline--decoration">
<div class="tls-decoration-horizontal-lines">
<div class="tls-line1"></div>
<div class="tls-line2"></div>
</div>
</div>
</div>
</div>
</div>
</div></a>
</div>
<div class="tls-button-image-group--info">
<div class="tls-card-info">
<div class="tls-card-info--img"><img class="tls-card-info--icon" src="/molecule/card/card-info/icon-sample.svg"/></div>
<div class="tls-card-info--content">
<div class="tls-simple-text -color-main -weight-bold -size-16">Simple text
</div>
<div class="tls-simple-text -weight-bold -size-16">Simple text
</div>
<div class="tls-card-info--content-paragraph">
<div class="tls-simple-text -size-16">A very long Simple text on multiple lines
</div>
</div>
<div class="tls-card-info--content-button">
<div class="tls-button-dynamic">
<div class="tls-button-dynamic--text">
<div class="tls-simple-text -color-primary -size-19">Simple Text
</div>
</div>
<div class="tls-button-dynamic--decoration">
<div class="tls-line1"></div>
<div class="tls-line2"></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="tls-application-center--avs">
<div class="tls-application-center-avs--heading">
<h2 class="tls-heading-2">Heading level 2</h2>
</div>
<div class="tls-application-center-avs--content">
<div class="tls-card-info-list">
<div class="tls-card-info-list--item">
<div class="tls-card-info">
<div class="tls-card-info--img"><img class="tls-card-info--icon" src="/molecule/card/card-info/icon-sample.svg"/></div>
<div class="tls-card-info--content">
<div class="tls-simple-text -color-main -weight-bold -size-16">Simple text
</div>
<div class="tls-simple-text -weight-bold -size-16">Simple text
</div>
<div class="tls-card-info--content-paragraph">
<div class="tls-simple-text -size-16">A very long Simple text on multiple lines
</div>
</div>
<div class="tls-card-info--content-button">
<div class="tls-button-dynamic">
<div class="tls-button-dynamic--text">
<div class="tls-simple-text -color-primary -size-19">Simple Text
</div>
</div>
<div class="tls-button-dynamic--decoration">
<div class="tls-line1"></div>
<div class="tls-line2"></div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="tls-card-info-list--item">
<div class="tls-card-info">
<div class="tls-card-info--img"><img class="tls-card-info--icon" src="/molecule/card/card-info/icon-sample.svg"/></div>
<div class="tls-card-info--content">
<div class="tls-simple-text -color-main -weight-bold -size-16">Simple text
</div>
<div class="tls-simple-text -weight-bold -size-16">Simple text
</div>
<div class="tls-card-info--content-paragraph">
<div class="tls-simple-text -size-16">A very long Simple text on multiple lines
</div>
</div>
<div class="tls-card-info--content-button">
<div class="tls-button-dynamic">
<div class="tls-button-dynamic--text">
<div class="tls-simple-text -color-primary -size-19">Simple Text
</div>
</div>
<div class="tls-button-dynamic--decoration">
<div class="tls-line1"></div>
<div class="tls-line2"></div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="tls-card-info-list--item">
<div class="tls-card-info">
<div class="tls-card-info--img"><img class="tls-card-info--icon" src="/molecule/card/card-info/icon-sample.svg"/></div>
<div class="tls-card-info--content">
<div class="tls-simple-text -color-main -weight-bold -size-16">Simple text
</div>
<div class="tls-simple-text -weight-bold -size-16">Simple text
</div>
<div class="tls-card-info--content-paragraph">
<div class="tls-simple-text -size-16">A very long Simple text on multiple lines
</div>
</div>
<div class="tls-card-info--content-button">
<div class="tls-button-dynamic">
<div class="tls-button-dynamic--text">
<div class="tls-simple-text -color-primary -size-19">Simple Text
</div>
</div>
<div class="tls-button-dynamic--decoration">
<div class="tls-line1"></div>
<div class="tls-line2"></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="tls-application-center--rdv">
<div class="tls-application-center--heading">
<h2 class="tls-heading-2">Heading level 2</h2>
</div>
<div class="tls-application-center--info">
<div class="tls-table-card-info">
<div class="tls-card-lg">
<table>
<thead>
<th></th>
<th class="tls-table-head">Simple Text
</th>
<th class="tls-table-head">Simple Text
</th>
<th class="tls-table-head">Simple Text
</th>
</thead>
<tbody>
<tr>
<th class="tls-table-head">City
</th>
<td class="tls-table-cell">Simple Text
</td>
<td class="tls-table-cell">Simple Text
</td>
<td class="tls-table-cell">Simple Text
</td>
</tr>
<tr>
<th class="tls-table-head">City
</th>
<td class="tls-table-cell">Simple Text
</td>
<td class="tls-table-cell">Simple Text
</td>
<td class="tls-table-cell">Simple Text
</td>
</tr>
<tr>
<th class="tls-table-head">City
</th>
<td class="tls-table-cell">Simple Text
</td>
<td class="tls-table-cell">Simple Text
</td>
<td class="tls-table-cell">Simple Text
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
<div class="tls-footer">
<div class="tls-footer-links">
<div class="tls-footer-links--slot">
<div class="tls-footer-links--title">
<div class="tls-simple-text -color-white -weight-bold">Tls links
</div>
</div>
<div class="tls-footer-links--list">
<ul class="tls-link-list">
<li class="tls-link-list--slot"><a class="tls-link">My Link</a></li>
<li class="tls-link-list--slot"><a class="tls-link">My Link</a></li>
</ul>
</div>
</div>
<div class="tls-footer-links--slot">
<div class="tls-footer-links--title">
<div class="tls-simple-text -color-white -weight-bold">Tls links
</div>
</div>
<div class="tls-footer-links--list">
<ul class="tls-link-list">
<li class="tls-link-list--slot"><a class="tls-link">My Link</a></li>
<li class="tls-link-list--slot"><a class="tls-link">My Link</a></li>
</ul>
</div>
</div>
<div class="tls-footer-links--slot">
<div class="tls-footer-links--title">
<div class="tls-simple-text -color-white -weight-bold">Tls links
</div>
</div>
<div class="tls-footer-links--list">
<ul class="tls-link-list">
<li class="tls-link-list--slot"><a class="tls-link">My Link</a></li>
<li class="tls-link-list--slot"><a class="tls-link">My Link</a></li>
</ul>
</div>
</div>
<div class="tls-footer-links--slot">
<div class="tls-footer-links--title">
<div class="tls-simple-text -color-white -weight-bold">Tls links
</div>
</div>
<div class="tls-footer-links--list">
<ul class="tls-link-list">
<li class="tls-link-list--slot"><a class="tls-link">My Link</a></li>
<li class="tls-link-list--slot"><a class="tls-link">My Link</a></li>
</ul>
</div>
</div>
</div>
<div class="tls-footer-line"></div>
<div class="tls-footer-content">
<div class="tls-footer--slot"><a class="tls-logo" href="#"><img class="tls-logo--img" src="/atom/logo/logo/logo.svg"/></a></div>
<div class="tls-footer--slot tls-sm-visible">
<div class="tls-simple-text -color-white -size-12">© 2019 TLScontact. Tous droits réservés.
</div>
</div>
<div class="tls-footer--slot tls-sm-visible">
<div class="tls-social-logo-group">
<div class="tls-social-logo-group--slot"><a class="tls-social-logo" href="#"><i class="fab fa-linkedin-in tls-social-logo--icon"></i></a></div>
<div class="tls-social-logo-group--slot"><a class="tls-social-logo" href="#"><i class="fab fa-linkedin-in tls-social-logo--icon"></i></a></div>
</div>
</div>
<div class="tls-footer--slot"><a class="tls-logo" href="#"><img class="tls-logo--img" src="/atom/logo/logo/logo.svg"/></a></div>
</div>
</div>
</div>.tls-application-center
.tls-navbar
.tls-navbar--content
.tls-navbar--logo
a.tls-logo(href='#')
img.tls-logo--img(src='/atom/logo/logo/logo.svg')
.tls-navbar--links.-opened
.tls-navbar--slot
.tls-dropdown
a.tls-link-dropdown
.tls-link-dropdown--text Opened
.tls-link-dropdown--icon
i.fa.fa-chevron-up
.tls-dropdown--content
.tls-dropdown--content
.tls-dropdown-list
.tls-dropdown-list--slot
a.tls-dropdown-text My dropdown text
.tls-dropdown-list--slot
.tls-dropdown-text A longer text to see the difference
.tls-navbar--slot
.tls-dropdown
a.tls-link-dropdown
.tls-link-dropdown--text Closed
.tls-link-dropdown--icon
i.fa.fa-chevron-down
.tls-dropdown--content.hidden
.tls-dropdown--content.hidden Hidden content.
.tls-navbar--slot
a.tls-link-uppercase My Uppercase Link
.tls-navbar--slot
a.tls-button-link Button link
.tls-navbar--language
.tls-navbar--slot
a.tls-link-dropdown
img.tls-link-dropdown--flag(src='./flag-en.png')
.tls-link-dropdown--text Link
.tls-link-dropdown--icon
i.fa.fa-chevron-down
.tls-navbar--hamburger
.tls-hamburger.-state-closed
.tls-hamburger--top-line
.tls-hamburger--middle-line
.tls-hamburger--bottom-line
header.tls-simple-banner
.tls-home-text-group
.tls-simple-text.-color-white.-size-22
| Simple text
img.tls-image(src='/atom/image/image.png')
h1.tls-heading-1 Heading level 1
.tls-application-center--content
.tls-application-center--heading
h2.tls-heading-2 Heading level 2
.tls-application-center--info
.tls-simple-text.-size-16.-style-italic.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
.tls-button-image-group
.tls-button-image-group--slot
.tls-button-image-group--button
a.tls-button-image
.tls-button-image--decoration
.tls-decoration-vertical-lines.-white
.tls-line1
.tls-line2
.tls-button-image--img(style='background-image: url("/molecule/buttons/button-image/center.png")')
.tls-button-image--content
.tls-simple-text.-color-white.-size-40.
Simple text
.tls-button-image--content-small-text
.tls-text-underline
.tls-text-underline--text
.tls-simple-text.-color-white.-size-16.
Simple Text
.tls-text-underline--decoration
.tls-decoration-horizontal-lines
.tls-line1
.tls-line2
.tls-button-image-group--info
.tls-card-info
.tls-card-info--img
img.tls-card-info--icon(src='/molecule/card/card-info/icon-sample.svg')
.tls-card-info--content
.tls-simple-text.-color-main.-weight-bold.-size-16.
Simple text
.tls-simple-text.-weight-bold.-size-16.
Simple text
.tls-card-info--content-paragraph
.tls-simple-text.-size-16.
A very long Simple text on multiple lines
.tls-card-info--content-button
.tls-button-dynamic
.tls-button-dynamic--text
.tls-simple-text.-color-primary.-size-19.
Simple Text
.tls-button-dynamic--decoration
.tls-line1
.tls-line2
// Without information
.tls-button-image-group--slot
.tls-button-image-group--button
a.tls-button-image
.tls-button-image--decoration
.tls-decoration-vertical-lines.-white
.tls-line1
.tls-line2
.tls-button-image--img(style='background-image: url("/molecule/buttons/button-image/center.png")')
.tls-button-image--content
.tls-simple-text.-color-white.-size-40.
Simple text
.tls-button-image--content-small-text
.tls-text-underline
.tls-text-underline--text
.tls-simple-text.-color-white.-size-16.
Simple Text
.tls-text-underline--decoration
.tls-decoration-horizontal-lines
.tls-line1
.tls-line2
.tls-button-image-group--slot
.tls-button-image-group--button
a.tls-button-image
.tls-button-image--decoration
.tls-decoration-vertical-lines.-white
.tls-line1
.tls-line2
.tls-button-image--img(style='background-image: url("/molecule/buttons/button-image/center.png")')
.tls-button-image--content
.tls-simple-text.-color-white.-size-40.
Simple text
.tls-button-image--content-small-text
.tls-text-underline
.tls-text-underline--text
.tls-simple-text.-color-white.-size-16.
Simple Text
.tls-text-underline--decoration
.tls-decoration-horizontal-lines
.tls-line1
.tls-line2
.tls-button-image-group--info
.tls-card-info
.tls-card-info--img
img.tls-card-info--icon(src='/molecule/card/card-info/icon-sample.svg')
.tls-card-info--content
.tls-simple-text.-color-main.-weight-bold.-size-16.
Simple text
.tls-simple-text.-weight-bold.-size-16.
Simple text
.tls-card-info--content-paragraph
.tls-simple-text.-size-16.
A very long Simple text on multiple lines
.tls-card-info--content-button
.tls-button-dynamic
.tls-button-dynamic--text
.tls-simple-text.-color-primary.-size-19.
Simple Text
.tls-button-dynamic--decoration
.tls-line1
.tls-line2
.tls-application-center--avs
.tls-application-center-avs--heading
h2.tls-heading-2 Heading level 2
.tls-application-center-avs--content
.tls-card-info-list
.tls-card-info-list--item
.tls-card-info
.tls-card-info--img
img.tls-card-info--icon(src='/molecule/card/card-info/icon-sample.svg')
.tls-card-info--content
.tls-simple-text.-color-main.-weight-bold.-size-16.
Simple text
.tls-simple-text.-weight-bold.-size-16.
Simple text
.tls-card-info--content-paragraph
.tls-simple-text.-size-16.
A very long Simple text on multiple lines
.tls-card-info--content-button
.tls-button-dynamic
.tls-button-dynamic--text
.tls-simple-text.-color-primary.-size-19.
Simple Text
.tls-button-dynamic--decoration
.tls-line1
.tls-line2
.tls-card-info-list--item
.tls-card-info
.tls-card-info--img
img.tls-card-info--icon(src='/molecule/card/card-info/icon-sample.svg')
.tls-card-info--content
.tls-simple-text.-color-main.-weight-bold.-size-16.
Simple text
.tls-simple-text.-weight-bold.-size-16.
Simple text
.tls-card-info--content-paragraph
.tls-simple-text.-size-16.
A very long Simple text on multiple lines
.tls-card-info--content-button
.tls-button-dynamic
.tls-button-dynamic--text
.tls-simple-text.-color-primary.-size-19.
Simple Text
.tls-button-dynamic--decoration
.tls-line1
.tls-line2
.tls-card-info-list--item
.tls-card-info
.tls-card-info--img
img.tls-card-info--icon(src='/molecule/card/card-info/icon-sample.svg')
.tls-card-info--content
.tls-simple-text.-color-main.-weight-bold.-size-16.
Simple text
.tls-simple-text.-weight-bold.-size-16.
Simple text
.tls-card-info--content-paragraph
.tls-simple-text.-size-16.
A very long Simple text on multiple lines
.tls-card-info--content-button
.tls-button-dynamic
.tls-button-dynamic--text
.tls-simple-text.-color-primary.-size-19.
Simple Text
.tls-button-dynamic--decoration
.tls-line1
.tls-line2
.tls-application-center--rdv
.tls-application-center--heading
h2.tls-heading-2 Heading level 2
.tls-application-center--info
.tls-table-card-info
.tls-card-lg
table
thead
tr
th
th.tls-table-head.
Simple Text
th.tls-table-head.
Simple Text
th.tls-table-head.
Simple Text
tbody
tr
th.tls-table-head.
City
td.tls-table-cell.
Simple Text
td.tls-table-cell.
Simple Text
td.tls-table-cell.
Simple Text
tr
th.tls-table-head.
City
td.tls-table-cell.
Simple Text
td.tls-table-cell.
Simple Text
td.tls-table-cell.
Simple Text
tr
th.tls-table-head.
City
td.tls-table-cell.
Simple Text
td.tls-table-cell.
Simple Text
td.tls-table-cell.
Simple Text
.tls-footer
.tls-footer-links
.tls-footer-links--slot
.tls-footer-links--title
.tls-simple-text.-color-white.-weight-bold.
Tls links
.tls-footer-links--list
ul.tls-link-list
li.tls-link-list--slot
a.tls-link My Link
li.tls-link-list--slot
a.tls-link My Link
.tls-footer-links--slot
.tls-footer-links--title
.tls-simple-text.-color-white.-weight-bold.
Tls links
.tls-footer-links--list
ul.tls-link-list
li.tls-link-list--slot
a.tls-link My Link
li.tls-link-list--slot
a.tls-link My Link
.tls-footer-links--slot
.tls-footer-links--title
.tls-simple-text.-color-white.-weight-bold.
Tls links
.tls-footer-links--list
ul.tls-link-list
li.tls-link-list--slot
a.tls-link My Link
li.tls-link-list--slot
a.tls-link My Link
.tls-footer-links--slot
.tls-footer-links--title
.tls-simple-text.-color-white.-weight-bold.
Tls links
.tls-footer-links--list
ul.tls-link-list
li.tls-link-list--slot
a.tls-link My Link
li.tls-link-list--slot
a.tls-link My Link
.tls-footer-line
.tls-footer-content
.tls-footer--slot
a.tls-logo(href='#')
img.tls-logo--img(src='/atom/logo/logo/logo.svg')
.tls-footer--slot.tls-sm-visible
.tls-simple-text.-color-white.-size-12.
© 2019 TLScontact. Tous droits réservés.
.tls-footer--slot.tls-sm-visible
.tls-social-logo-group
.tls-social-logo-group--slot
a.tls-social-logo(href='#')
i.fab.fa-linkedin-in.tls-social-logo--icon
.tls-social-logo-group--slot
a.tls-social-logo(href='#')
i.fab.fa-linkedin-in.tls-social-logo--icon
.tls-footer--slot
a.tls-logo(href='#')
img.tls-logo--img(src='/atom/logo/logo/logo.svg')Application Center Home page.
<div class="tls-application-center-home">
<div class="tls-navbar">
<div class="tls-navbar--content">
<div class="tls-navbar--logo"><a class="tls-logo" href="#"><img class="tls-logo--img" src="/atom/logo/logo/logo.svg"/></a></div>
<div class="tls-navbar--links -opened">
<div class="tls-navbar--slot">
<div class="tls-dropdown"><a class="tls-link-dropdown">
<div class="tls-link-dropdown--text">Opened</div>
<div class="tls-link-dropdown--icon"><i class="fa fa-chevron-up"></i></div></a>
<div class="tls-dropdown--content">
<div class="tls-dropdown--content">
<div class="tls-dropdown-list">
<div class="tls-dropdown-list--slot"><a class="tls-dropdown-text">My dropdown text</a></div>
<div class="tls-dropdown-list--slot">
<div class="tls-dropdown-text">A longer text to see the difference</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="tls-navbar--slot">
<div class="tls-dropdown"><a class="tls-link-dropdown">
<div class="tls-link-dropdown--text">Closed</div>
<div class="tls-link-dropdown--icon"><i class="fa fa-chevron-down"></i></div></a>
<div class="tls-dropdown--content hidden">
<div class="tls-dropdown--content hidden">Hidden content.</div>
</div>
</div>
</div>
<div class="tls-navbar--slot"><a class="tls-link-uppercase">My Uppercase Link</a></div>
<div class="tls-navbar--slot"><a class="tls-button-link">Button link</a></div>
</div>
<div class="tls-navbar--language">
<div class="tls-navbar--slot"><a class="tls-link-dropdown"><img class="tls-link-dropdown--flag" src="./flag-en.png"/>
<div class="tls-link-dropdown--text">Link</div>
<div class="tls-link-dropdown--icon"><i class="fa fa-chevron-down"></i></div></a></div>
</div>
<div class="tls-navbar--hamburger">
<div class="tls-hamburger -state-closed">
<div class="tls-hamburger--top-line"></div>
<div class="tls-hamburger--middle-line"></div>
<div class="tls-hamburger--bottom-line"></div>
</div>
</div>
</div>
</div>
<div class="tls-button-banner">
<div class="tls-button-banner--img" style="background-image: url("/organism/banner/button-banner/italy.jpg")">
<div class="tls-button-banner--content">
<div class="tls-home-text-group">
<div class="tls-simple-text -color-white -size-22">Simple text<img class="tls-image" src="/atom/image/image.png"/>
</div>
<h1 class="tls-heading-1">Heading level 1</h1>
</div>
<div class="tls-button-banner--action">
<button class="tls-button-primary -uppercase">Opening hours
</button>
</div>
</div>
</div>
</div>
<div class="tls-application-center-home--card-info">
<div class="tls-large-card-info">
<div class="tls-card-lg">
<div class="tls-simple-text -size-16">
<p>lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur felis magna, lacinia ornare congue ornare, pharetra a leo. Suspendisse fermentum ut mi vel pulvinar. Maecenas gravida varius mauris, sed tempus risus pulvinar sed. In varius placerat erat in porttitor. Sed mollis est ligula, sit amet iaculis nulla rhoncus sed. Morbi quis felis et quam posuere sodales eget quis est. Integer congue faucibus nunc, rhoncus hendrerit massa lobortis sit amet. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
</div>
<div class="tls-simple-text -size-16">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur felis magna, lacinia ornare congue ornare, pharetra a leo. Suspendisse fermentum ut mi vel pulvinar. Maecenas gravida varius mauris, sed tempus risus pulvinar sed. In varius placerat erat in porttitor. Sed mollis est ligula, sit amet iaculis nulla rhoncus sed. Morbi quis felis et quam posuere sodales eget quis est. Integer congue faucibus nunc, rhoncus hendrerit massa lobortis sit amet. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
</div>
</div>
<div class="tls-large-card-info--decoration">
<div class="tls-decoration-vertical-lines -blue">
<div class="tls-line1"></div>
<div class="tls-line2"></div>
</div>
</div>
</div>
</div>
<div class="tls-application-center-home--content">
<div class="tls-application-center-home--flow">
<div class="tls-flow-card">
<div class="tls-flow-card--item">
<div class="tls-flow-item"><img class="tls-flow-item--icon" src="/molecule/flow-item/complete-documentation.png"/>
<div class="tls-flow-item--content">
<div class="tls-simple-text -color-main">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec mauris mollis, auctor purus a, laoreet est. Donec ut felis ut erat dignissim facilisis at in quam. Suspendisse potenti.
</div>
</div>
</div>
</div>
<div class="tls-flow-card--item">
<div class="tls-flow-item"><img class="tls-flow-item--icon" src="/molecule/flow-item/complete-documentation.png"/>
<div class="tls-flow-item--content">
<div class="tls-simple-text -color-main">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec mauris mollis, auctor purus a, laoreet est. Donec ut felis ut erat dignissim facilisis at in quam. Suspendisse potenti.
</div>
</div>
</div>
</div>
<div class="tls-flow-card--item">
<div class="tls-flow-item"><img class="tls-flow-item--icon" src="/molecule/flow-item/complete-documentation.png"/>
<div class="tls-flow-item--content">
<div class="tls-simple-text -color-main">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec mauris mollis, auctor purus a, laoreet est. Donec ut felis ut erat dignissim facilisis at in quam. Suspendisse potenti.
</div>
</div>
</div>
</div>
</div>
</div>
<div class="tls-application-center-home--avs">
<div class="tls-application-center-home-avs--heading">
<h2 class="tls-heading-2">Heading level 2</h2>
</div>
<div class="tls-application-center-home-avs--content">
<div class="tls-card-info-list">
<div class="tls-card-info-list--item">
<div class="tls-card-info">
<div class="tls-card-info--img"><img class="tls-card-info--icon" src="/molecule/card/card-info/icon-sample.svg"/></div>
<div class="tls-card-info--content">
<div class="tls-simple-text -color-main -weight-bold -size-16">Simple text
</div>
<div class="tls-simple-text -weight-bold -size-16">Simple text
</div>
<div class="tls-card-info--content-paragraph">
<div class="tls-simple-text -size-16">A very long Simple text on multiple lines
</div>
</div>
<div class="tls-card-info--content-button">
<div class="tls-button-dynamic">
<div class="tls-button-dynamic--text">
<div class="tls-simple-text -color-primary -size-19">Simple Text
</div>
</div>
<div class="tls-button-dynamic--decoration">
<div class="tls-line1"></div>
<div class="tls-line2"></div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="tls-card-info-list--item">
<div class="tls-card-info">
<div class="tls-card-info--img"><img class="tls-card-info--icon" src="/molecule/card/card-info/icon-sample.svg"/></div>
<div class="tls-card-info--content">
<div class="tls-simple-text -color-main -weight-bold -size-16">Simple text
</div>
<div class="tls-simple-text -weight-bold -size-16">Simple text
</div>
<div class="tls-card-info--content-paragraph">
<div class="tls-simple-text -size-16">A very long Simple text on multiple lines
</div>
</div>
<div class="tls-card-info--content-button">
<div class="tls-button-dynamic">
<div class="tls-button-dynamic--text">
<div class="tls-simple-text -color-primary -size-19">Simple Text
</div>
</div>
<div class="tls-button-dynamic--decoration">
<div class="tls-line1"></div>
<div class="tls-line2"></div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="tls-card-info-list--item">
<div class="tls-card-info">
<div class="tls-card-info--img"><img class="tls-card-info--icon" src="/molecule/card/card-info/icon-sample.svg"/></div>
<div class="tls-card-info--content">
<div class="tls-simple-text -color-main -weight-bold -size-16">Simple text
</div>
<div class="tls-simple-text -weight-bold -size-16">Simple text
</div>
<div class="tls-card-info--content-paragraph">
<div class="tls-simple-text -size-16">A very long Simple text on multiple lines
</div>
</div>
<div class="tls-card-info--content-button">
<div class="tls-button-dynamic">
<div class="tls-button-dynamic--text">
<div class="tls-simple-text -color-primary -size-19">Simple Text
</div>
</div>
<div class="tls-button-dynamic--decoration">
<div class="tls-line1"></div>
<div class="tls-line2"></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="tls-application-center-home--visa-start">
<div class="tls-application-center-home-visa-start--heading">
<h2 class="tls-heading-2">Heading level 2</h2>
</div>
<div class="tls-application-center-home-visa-start--button">
<button class="tls-button-primary -uppercase">Commencer ma demande
</button>
</div>
</div>
<div class="tls-application-center-home--mobile-app">
<div class="tls-application-center-home-mobile-app--heading">
<h2 class="tls-heading-2">Heading level 2</h2>
</div>
<div class="tls-application-center-home-mobile-app--logos">
<div class="tls-application-center-home-mobile-app-logos--item"><a class="tls-logo" href="#"><img class="tls-logo--img" src="/atom/logo/logo/logo.svg"/></a></div>
<div class="tls-application-center-home-mobile-app-logos--item"><a class="tls-logo" href="#"><img class="tls-logo--img" src="/atom/logo/logo/logo.svg"/></a></div>
</div>
</div>
<div class="tls-application-center-home--special-news">
<div class="tls-warning-info">
<div class="tls-simple-text -color-main -weight-bold">I show my fluffy belly but it's a trap! if you pet it i will tear up your hand. Shove bum in owner's face like camera lens meow meow we are 3 small kittens sleeping most of our time, we are around 15 weeks old i think, i don’t know i can’t count you call this cat food sleep everywhere, but not in my bed but my slave human didn't give me any food so i pooped on the floor attempt to leap between furniture but woefully miscalibrate and bellyflop onto the floor; what's your problem?
</div>
</div>
</div>
</div>
<div class="tls-footer">
<div class="tls-footer-links">
<div class="tls-footer-links--slot">
<div class="tls-footer-links--title">
<div class="tls-simple-text -color-white -weight-bold">Tls links
</div>
</div>
<div class="tls-footer-links--list">
<ul class="tls-link-list">
<li class="tls-link-list--slot"><a class="tls-link">My Link</a></li>
<li class="tls-link-list--slot"><a class="tls-link">My Link</a></li>
</ul>
</div>
</div>
<div class="tls-footer-links--slot">
<div class="tls-footer-links--title">
<div class="tls-simple-text -color-white -weight-bold">Tls links
</div>
</div>
<div class="tls-footer-links--list">
<ul class="tls-link-list">
<li class="tls-link-list--slot"><a class="tls-link">My Link</a></li>
<li class="tls-link-list--slot"><a class="tls-link">My Link</a></li>
</ul>
</div>
</div>
<div class="tls-footer-links--slot">
<div class="tls-footer-links--title">
<div class="tls-simple-text -color-white -weight-bold">Tls links
</div>
</div>
<div class="tls-footer-links--list">
<ul class="tls-link-list">
<li class="tls-link-list--slot"><a class="tls-link">My Link</a></li>
<li class="tls-link-list--slot"><a class="tls-link">My Link</a></li>
</ul>
</div>
</div>
<div class="tls-footer-links--slot">
<div class="tls-footer-links--title">
<div class="tls-simple-text -color-white -weight-bold">Tls links
</div>
</div>
<div class="tls-footer-links--list">
<ul class="tls-link-list">
<li class="tls-link-list--slot"><a class="tls-link">My Link</a></li>
<li class="tls-link-list--slot"><a class="tls-link">My Link</a></li>
</ul>
</div>
</div>
</div>
<div class="tls-footer-line"></div>
<div class="tls-footer-content">
<div class="tls-footer--slot"><a class="tls-logo" href="#"><img class="tls-logo--img" src="/atom/logo/logo/logo.svg"/></a></div>
<div class="tls-footer--slot tls-sm-visible">
<div class="tls-simple-text -color-white -size-12">© 2019 TLScontact. Tous droits réservés.
</div>
</div>
<div class="tls-footer--slot tls-sm-visible">
<div class="tls-social-logo-group">
<div class="tls-social-logo-group--slot"><a class="tls-social-logo" href="#"><i class="fab fa-linkedin-in tls-social-logo--icon"></i></a></div>
<div class="tls-social-logo-group--slot"><a class="tls-social-logo" href="#"><i class="fab fa-linkedin-in tls-social-logo--icon"></i></a></div>
</div>
</div>
<div class="tls-footer--slot"><a class="tls-logo" href="#"><img class="tls-logo--img" src="/atom/logo/logo/logo.svg"/></a></div>
</div>
</div>
</div>.tls-application-center-home
.tls-navbar
.tls-navbar--content
.tls-navbar--logo
a.tls-logo(href='#')
img.tls-logo--img(src='/atom/logo/logo/logo.svg')
.tls-navbar--links.-opened
.tls-navbar--slot
.tls-dropdown
a.tls-link-dropdown
.tls-link-dropdown--text Opened
.tls-link-dropdown--icon
i.fa.fa-chevron-up
.tls-dropdown--content
.tls-dropdown--content
.tls-dropdown-list
.tls-dropdown-list--slot
a.tls-dropdown-text My dropdown text
.tls-dropdown-list--slot
.tls-dropdown-text A longer text to see the difference
.tls-navbar--slot
.tls-dropdown
a.tls-link-dropdown
.tls-link-dropdown--text Closed
.tls-link-dropdown--icon
i.fa.fa-chevron-down
.tls-dropdown--content.hidden
.tls-dropdown--content.hidden Hidden content.
.tls-navbar--slot
a.tls-link-uppercase My Uppercase Link
.tls-navbar--slot
a.tls-button-link Button link
.tls-navbar--language
.tls-navbar--slot
a.tls-link-dropdown
img.tls-link-dropdown--flag(src='./flag-en.png')
.tls-link-dropdown--text Link
.tls-link-dropdown--icon
i.fa.fa-chevron-down
.tls-navbar--hamburger
.tls-hamburger.-state-closed
.tls-hamburger--top-line
.tls-hamburger--middle-line
.tls-hamburger--bottom-line
.tls-button-banner
.tls-button-banner--img(style='background-image: url("/organism/banner/button-banner/italy.jpg")')
.tls-button-banner--content
.tls-home-text-group
.tls-simple-text.-color-white.-size-22
| Simple text
img.tls-image(src='/atom/image/image.png')
h1.tls-heading-1 Heading level 1
.tls-button-banner--action
button.tls-button-primary.-uppercase.
Opening hours
.tls-application-center-home--card-info
.tls-large-card-info
.tls-card-lg
.tls-simple-text.-size-16
p lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur felis magna, lacinia ornare congue ornare, pharetra a leo. Suspendisse fermentum ut mi vel pulvinar. Maecenas gravida varius mauris, sed tempus risus pulvinar sed. In varius placerat erat in porttitor. Sed mollis est ligula, sit amet iaculis nulla rhoncus sed. Morbi quis felis et quam posuere sodales eget quis est. Integer congue faucibus nunc, rhoncus hendrerit massa lobortis sit amet. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
.tls-simple-text.-size-16
p Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur felis magna, lacinia ornare congue ornare, pharetra a leo. Suspendisse fermentum ut mi vel pulvinar. Maecenas gravida varius mauris, sed tempus risus pulvinar sed. In varius placerat erat in porttitor. Sed mollis est ligula, sit amet iaculis nulla rhoncus sed. Morbi quis felis et quam posuere sodales eget quis est. Integer congue faucibus nunc, rhoncus hendrerit massa lobortis sit amet. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
.tls-large-card-info--decoration
.tls-decoration-vertical-lines.-blue
.tls-line1
.tls-line2
.tls-application-center-home--content
.tls-application-center-home--flow
.tls-flow-card
.tls-flow-card--item
.tls-flow-item
img.tls-flow-item--icon(src='/molecule/flow-item/complete-documentation.png')
.tls-flow-item--content
.tls-simple-text.-color-main.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec mauris mollis, auctor purus a, laoreet est. Donec ut felis ut erat dignissim facilisis at in quam. Suspendisse potenti.
.tls-flow-card--item
.tls-flow-item
img.tls-flow-item--icon(src='/molecule/flow-item/complete-documentation.png')
.tls-flow-item--content
.tls-simple-text.-color-main.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec mauris mollis, auctor purus a, laoreet est. Donec ut felis ut erat dignissim facilisis at in quam. Suspendisse potenti.
.tls-flow-card--item
.tls-flow-item
img.tls-flow-item--icon(src='/molecule/flow-item/complete-documentation.png')
.tls-flow-item--content
.tls-simple-text.-color-main.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec mauris mollis, auctor purus a, laoreet est. Donec ut felis ut erat dignissim facilisis at in quam. Suspendisse potenti.
.tls-application-center-home--avs
.tls-application-center-home-avs--heading
h2.tls-heading-2 Heading level 2
.tls-application-center-home-avs--content
.tls-card-info-list
.tls-card-info-list--item
.tls-card-info
.tls-card-info--img
img.tls-card-info--icon(src='/molecule/card/card-info/icon-sample.svg')
.tls-card-info--content
.tls-simple-text.-color-main.-weight-bold.-size-16.
Simple text
.tls-simple-text.-weight-bold.-size-16.
Simple text
.tls-card-info--content-paragraph
.tls-simple-text.-size-16.
A very long Simple text on multiple lines
.tls-card-info--content-button
.tls-button-dynamic
.tls-button-dynamic--text
.tls-simple-text.-color-primary.-size-19.
Simple Text
.tls-button-dynamic--decoration
.tls-line1
.tls-line2
.tls-card-info-list--item
.tls-card-info
.tls-card-info--img
img.tls-card-info--icon(src='/molecule/card/card-info/icon-sample.svg')
.tls-card-info--content
.tls-simple-text.-color-main.-weight-bold.-size-16.
Simple text
.tls-simple-text.-weight-bold.-size-16.
Simple text
.tls-card-info--content-paragraph
.tls-simple-text.-size-16.
A very long Simple text on multiple lines
.tls-card-info--content-button
.tls-button-dynamic
.tls-button-dynamic--text
.tls-simple-text.-color-primary.-size-19.
Simple Text
.tls-button-dynamic--decoration
.tls-line1
.tls-line2
.tls-card-info-list--item
.tls-card-info
.tls-card-info--img
img.tls-card-info--icon(src='/molecule/card/card-info/icon-sample.svg')
.tls-card-info--content
.tls-simple-text.-color-main.-weight-bold.-size-16.
Simple text
.tls-simple-text.-weight-bold.-size-16.
Simple text
.tls-card-info--content-paragraph
.tls-simple-text.-size-16.
A very long Simple text on multiple lines
.tls-card-info--content-button
.tls-button-dynamic
.tls-button-dynamic--text
.tls-simple-text.-color-primary.-size-19.
Simple Text
.tls-button-dynamic--decoration
.tls-line1
.tls-line2
.tls-application-center-home--visa-start
.tls-application-center-home-visa-start--heading
h2.tls-heading-2 Heading level 2
.tls-application-center-home-visa-start--button
button.tls-button-primary.-uppercase.
Commencer ma demande
.tls-application-center-home--mobile-app
.tls-application-center-home-mobile-app--heading
h2.tls-heading-2 Heading level 2
.tls-application-center-home-mobile-app--logos
.tls-application-center-home-mobile-app-logos--item
a.tls-logo(href='#')
img.tls-logo--img(src='/atom/logo/logo/logo.svg')
.tls-application-center-home-mobile-app-logos--item
a.tls-logo(href='#')
img.tls-logo--img(src='/atom/logo/logo/logo.svg')
.tls-application-center-home--special-news
.tls-warning-info
.tls-simple-text.-color-main.-weight-bold.
I show my fluffy belly but it's a trap! if you pet it i will tear up your hand. Shove bum in owner's face like camera lens meow meow we are 3 small kittens sleeping most of our time, we are around 15 weeks old i think, i don’t know i can’t count you call this cat food sleep everywhere, but not in my bed but my slave human didn't give me any food so i pooped on the floor attempt to leap between furniture but woefully miscalibrate and bellyflop onto the floor; what's your problem?
.tls-footer
.tls-footer-links
.tls-footer-links--slot
.tls-footer-links--title
.tls-simple-text.-color-white.-weight-bold.
Tls links
.tls-footer-links--list
ul.tls-link-list
li.tls-link-list--slot
a.tls-link My Link
li.tls-link-list--slot
a.tls-link My Link
.tls-footer-links--slot
.tls-footer-links--title
.tls-simple-text.-color-white.-weight-bold.
Tls links
.tls-footer-links--list
ul.tls-link-list
li.tls-link-list--slot
a.tls-link My Link
li.tls-link-list--slot
a.tls-link My Link
.tls-footer-links--slot
.tls-footer-links--title
.tls-simple-text.-color-white.-weight-bold.
Tls links
.tls-footer-links--list
ul.tls-link-list
li.tls-link-list--slot
a.tls-link My Link
li.tls-link-list--slot
a.tls-link My Link
.tls-footer-links--slot
.tls-footer-links--title
.tls-simple-text.-color-white.-weight-bold.
Tls links
.tls-footer-links--list
ul.tls-link-list
li.tls-link-list--slot
a.tls-link My Link
li.tls-link-list--slot
a.tls-link My Link
.tls-footer-line
.tls-footer-content
.tls-footer--slot
a.tls-logo(href='#')
img.tls-logo--img(src='/atom/logo/logo/logo.svg')
.tls-footer--slot.tls-sm-visible
.tls-simple-text.-color-white.-size-12.
© 2019 TLScontact. Tous droits réservés.
.tls-footer--slot.tls-sm-visible
.tls-social-logo-group
.tls-social-logo-group--slot
a.tls-social-logo(href='#')
i.fab.fa-linkedin-in.tls-social-logo--icon
.tls-social-logo-group--slot
a.tls-social-logo(href='#')
i.fab.fa-linkedin-in.tls-social-logo--icon
.tls-footer--slot
a.tls-logo(href='#')
img.tls-logo--img(src='/atom/logo/logo/logo.svg')Application fees
<div class="tls-navbar">
<div class="tls-navbar--content">
<div class="tls-navbar--logo"><a class="tls-logo" href="#"><img class="tls-logo--img" src="/atom/logo/logo/logo.svg"/></a></div>
<div class="tls-navbar--links -opened">
<div class="tls-navbar--slot">
<div class="tls-dropdown"><a class="tls-link-dropdown">
<div class="tls-link-dropdown--text">Opened</div>
<div class="tls-link-dropdown--icon"><i class="fa fa-chevron-up"></i></div></a>
<div class="tls-dropdown--content">
<div class="tls-dropdown--content">
<div class="tls-dropdown-list">
<div class="tls-dropdown-list--slot"><a class="tls-dropdown-text">My dropdown text</a></div>
<div class="tls-dropdown-list--slot">
<div class="tls-dropdown-text">A longer text to see the difference</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="tls-navbar--slot">
<div class="tls-dropdown"><a class="tls-link-dropdown">
<div class="tls-link-dropdown--text">Closed</div>
<div class="tls-link-dropdown--icon"><i class="fa fa-chevron-down"></i></div></a>
<div class="tls-dropdown--content hidden">
<div class="tls-dropdown--content hidden">Hidden content.</div>
</div>
</div>
</div>
<div class="tls-navbar--slot"><a class="tls-link-uppercase">My Uppercase Link</a></div>
<div class="tls-navbar--slot"><a class="tls-button-link">Button link</a></div>
</div>
<div class="tls-navbar--language">
<div class="tls-navbar--slot"><a class="tls-link-dropdown"><img class="tls-link-dropdown--flag" src="./flag-en.png"/>
<div class="tls-link-dropdown--text">Link</div>
<div class="tls-link-dropdown--icon"><i class="fa fa-chevron-down"></i></div></a></div>
</div>
<div class="tls-navbar--hamburger">
<div class="tls-hamburger -state-closed">
<div class="tls-hamburger--top-line"></div>
<div class="tls-hamburger--middle-line"></div>
<div class="tls-hamburger--bottom-line"></div>
</div>
</div>
</div>
</div>
<div class="tls-news-banner">
<div class="tls-simple-text -color-white">This is the news banner<a href="">...with a link</a>
</div>
</div>
<div class="tls-application-fees">
<header class="tls-simple-banner">
<div class="tls-home-text-group">
<div class="tls-simple-text -color-white -size-22">Simple text<img class="tls-image" src="/atom/image/image.png"/>
</div>
<h1 class="tls-heading-1">Heading level 1</h1>
</div>
</header>
<div class="tls-application-fees-info">
<div class="tls-procedure-card-info">
<div class="tls-card-lg">
<div class="tls-simple-text -size-16">
<div class="tls-simple-text -size-16">Please follow these steps in order to apply for a visa.
</div>
</div>
<div class="tls-simple-text -size-16">
<div class="tls-simple-text -weight-bold -size-16">France must be your main travel destination.
</div>
</div>
</div>
<div class="tls-procedure-card-info--decoration">
<div class="tls-decoration-vertical-lines -blue">
<div class="tls-line1"></div>
<div class="tls-line2"></div>
</div>
</div>
</div>
</div>
<div class="tls-application-fees-content">
<h2 class="tls-heading-2">Visa Application Fees</h2><p>Attention: Payment of the visa fee and the service fees do not give any guarantee or right that a visa will be granted. The visa fee and service fee are both non-refundable and non-transferable if the visa application is denied by the Embassy staff or if the applicant decides to terminate his or her application.</p>
</div>
<div class="tls-application-fees-table">
<div class="tls-fees-table">
<div class="tls-card-lg">
<table>
<thead>
<th class="tls-table-thead">Simple Text
</th>
<th class="tls-table-thead">Simple Text
</th>
<th class="tls-table-thead">Simple Text
</th>
</thead>
<tbody>
<tr>
<th class="tls-table-head">Simple Text
</th>
<td class="tls-table-cell">Simple Text
</td>
<td class="tls-table-cell">Simple Text
</td>
</tr>
<tr>
<th class="tls-table-head">Simple Text
</th>
<td class="tls-table-cell">Simple Text
</td>
<td class="tls-table-cell">Simple Text
</td>
</tr>
<tr>
<th class="tls-table-head">Simple Text
</th>
<td class="tls-table-cell">Simple Text
</td>
<td class="tls-table-cell">Simple Text
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<div class="tls-application-fees-bottom-content">
<div class="tls-simple-text"><p>* The visa fee is fixed in EUR but payable only in BYN. The currency exchange rate for the visa fee is changed daily and corresponds to the rate set by the National Bank of the Republic of Belarus on the date of payment and rounded to the nearest value.</p></div>
</div>
<div class="tls-footer">
<div class="tls-footer-links">
<div class="tls-footer-links--slot">
<div class="tls-footer-links--title">
<div class="tls-simple-text -color-white -weight-bold">Tls links
</div>
</div>
<div class="tls-footer-links--list">
<ul class="tls-link-list">
<li class="tls-link-list--slot"><a class="tls-link">My Link</a></li>
<li class="tls-link-list--slot"><a class="tls-link">My Link</a></li>
</ul>
</div>
</div>
<div class="tls-footer-links--slot">
<div class="tls-footer-links--title">
<div class="tls-simple-text -color-white -weight-bold">Tls links
</div>
</div>
<div class="tls-footer-links--list">
<ul class="tls-link-list">
<li class="tls-link-list--slot"><a class="tls-link">My Link</a></li>
<li class="tls-link-list--slot"><a class="tls-link">My Link</a></li>
</ul>
</div>
</div>
<div class="tls-footer-links--slot">
<div class="tls-footer-links--title">
<div class="tls-simple-text -color-white -weight-bold">Tls links
</div>
</div>
<div class="tls-footer-links--list">
<ul class="tls-link-list">
<li class="tls-link-list--slot"><a class="tls-link">My Link</a></li>
<li class="tls-link-list--slot"><a class="tls-link">My Link</a></li>
</ul>
</div>
</div>
<div class="tls-footer-links--slot">
<div class="tls-footer-links--title">
<div class="tls-simple-text -color-white -weight-bold">Tls links
</div>
</div>
<div class="tls-footer-links--list">
<ul class="tls-link-list">
<li class="tls-link-list--slot"><a class="tls-link">My Link</a></li>
<li class="tls-link-list--slot"><a class="tls-link">My Link</a></li>
</ul>
</div>
</div>
</div>
<div class="tls-footer-line"></div>
<div class="tls-footer-content">
<div class="tls-footer--slot"><a class="tls-logo" href="#"><img class="tls-logo--img" src="/atom/logo/logo/logo.svg"/></a></div>
<div class="tls-footer--slot tls-sm-visible">
<div class="tls-simple-text -color-white -size-12">© 2019 TLScontact. Tous droits réservés.
</div>
</div>
<div class="tls-footer--slot tls-sm-visible">
<div class="tls-social-logo-group">
<div class="tls-social-logo-group--slot"><a class="tls-social-logo" href="#"><i class="fab fa-linkedin-in tls-social-logo--icon"></i></a></div>
<div class="tls-social-logo-group--slot"><a class="tls-social-logo" href="#"><i class="fab fa-linkedin-in tls-social-logo--icon"></i></a></div>
</div>
</div>
<div class="tls-footer--slot"><a class="tls-logo" href="#"><img class="tls-logo--img" src="/atom/logo/logo/logo.svg"/></a></div>
</div>
</div>
</div>.tls-navbar
.tls-navbar--content
.tls-navbar--logo
a.tls-logo(href='#')
img.tls-logo--img(src='/atom/logo/logo/logo.svg')
.tls-navbar--links.-opened
.tls-navbar--slot
.tls-dropdown
a.tls-link-dropdown
.tls-link-dropdown--text Opened
.tls-link-dropdown--icon
i.fa.fa-chevron-up
.tls-dropdown--content
.tls-dropdown--content
.tls-dropdown-list
.tls-dropdown-list--slot
a.tls-dropdown-text My dropdown text
.tls-dropdown-list--slot
.tls-dropdown-text A longer text to see the difference
.tls-navbar--slot
.tls-dropdown
a.tls-link-dropdown
.tls-link-dropdown--text Closed
.tls-link-dropdown--icon
i.fa.fa-chevron-down
.tls-dropdown--content.hidden
.tls-dropdown--content.hidden Hidden content.
.tls-navbar--slot
a.tls-link-uppercase My Uppercase Link
.tls-navbar--slot
a.tls-button-link Button link
.tls-navbar--language
.tls-navbar--slot
a.tls-link-dropdown
img.tls-link-dropdown--flag(src='./flag-en.png')
.tls-link-dropdown--text Link
.tls-link-dropdown--icon
i.fa.fa-chevron-down
.tls-navbar--hamburger
.tls-hamburger.-state-closed
.tls-hamburger--top-line
.tls-hamburger--middle-line
.tls-hamburger--bottom-line
.tls-news-banner
.tls-simple-text.-color-white
| This is the news banner
a(href) ...with a link
.tls-application-fees
header.tls-simple-banner
.tls-home-text-group
.tls-simple-text.-color-white.-size-22
| Simple text
img.tls-image(src='/atom/image/image.png')
h1.tls-heading-1 Heading level 1
.tls-application-fees-info
.tls-procedure-card-info
.tls-card-lg
.tls-simple-text.-size-16
.tls-simple-text.-size-16.
Please follow these steps in order to apply for a visa.
.tls-simple-text.-size-16
.tls-simple-text.-weight-bold.-size-16.
France must be your main travel destination.
.tls-procedure-card-info--decoration
.tls-decoration-vertical-lines.-blue
.tls-line1
.tls-line2
.tls-application-fees-content
h2.tls-heading-2 Visa Application Fees
p Attention: Payment of the visa fee and the service fees do not give any guarantee or right that a visa will be granted. The visa fee and service fee are both non-refundable and non-transferable if the visa application is denied by the Embassy staff or if the applicant decides to terminate his or her application.
.tls-application-fees-table
.tls-fees-table
.tls-card-lg
table
thead
tr
th.tls-table-thead.
Simple Text
th.tls-table-thead.
Simple Text
th.tls-table-thead.
Simple Text
tbody
tr
th.tls-table-head.
Simple Text
td.tls-table-cell.
Simple Text
td.tls-table-cell.
Simple Text
tr
th.tls-table-head.
Simple Text
td.tls-table-cell.
Simple Text
td.tls-table-cell.
Simple Text
tr
th.tls-table-head.
Simple Text
td.tls-table-cell.
Simple Text
td.tls-table-cell.
Simple Text
.tls-application-fees-bottom-content
.tls-simple-text
p * The visa fee is fixed in EUR but payable only in BYN. The currency exchange rate for the visa fee is changed daily and corresponds to the rate set by the National Bank of the Republic of Belarus on the date of payment and rounded to the nearest value.
.tls-footer
.tls-footer-links
.tls-footer-links--slot
.tls-footer-links--title
.tls-simple-text.-color-white.-weight-bold.
Tls links
.tls-footer-links--list
ul.tls-link-list
li.tls-link-list--slot
a.tls-link My Link
li.tls-link-list--slot
a.tls-link My Link
.tls-footer-links--slot
.tls-footer-links--title
.tls-simple-text.-color-white.-weight-bold.
Tls links
.tls-footer-links--list
ul.tls-link-list
li.tls-link-list--slot
a.tls-link My Link
li.tls-link-list--slot
a.tls-link My Link
.tls-footer-links--slot
.tls-footer-links--title
.tls-simple-text.-color-white.-weight-bold.
Tls links
.tls-footer-links--list
ul.tls-link-list
li.tls-link-list--slot
a.tls-link My Link
li.tls-link-list--slot
a.tls-link My Link
.tls-footer-links--slot
.tls-footer-links--title
.tls-simple-text.-color-white.-weight-bold.
Tls links
.tls-footer-links--list
ul.tls-link-list
li.tls-link-list--slot
a.tls-link My Link
li.tls-link-list--slot
a.tls-link My Link
.tls-footer-line
.tls-footer-content
.tls-footer--slot
a.tls-logo(href='#')
img.tls-logo--img(src='/atom/logo/logo/logo.svg')
.tls-footer--slot.tls-sm-visible
.tls-simple-text.-color-white.-size-12.
© 2019 TLScontact. Tous droits réservés.
.tls-footer--slot.tls-sm-visible
.tls-social-logo-group
.tls-social-logo-group--slot
a.tls-social-logo(href='#')
i.fab.fa-linkedin-in.tls-social-logo--icon
.tls-social-logo-group--slot
a.tls-social-logo(href='#')
i.fab.fa-linkedin-in.tls-social-logo--icon
.tls-footer--slot
a.tls-logo(href='#')
img.tls-logo--img(src='/atom/logo/logo/logo.svg')Appointment
<div class="tls-appointment">
<div class="tls-navbar">
<div class="tls-navbar--content">
<div class="tls-navbar--logo"><a class="tls-logo" href="#"><img class="tls-logo--img" src="/atom/logo/logo/logo.svg"/></a></div>
<div class="tls-navbar--links -opened">
<div class="tls-navbar--slot">
<div class="tls-dropdown"><a class="tls-link-dropdown">
<div class="tls-link-dropdown--text">Opened</div>
<div class="tls-link-dropdown--icon"><i class="fa fa-chevron-up"></i></div></a>
<div class="tls-dropdown--content">
<div class="tls-dropdown--content">
<div class="tls-dropdown-list">
<div class="tls-dropdown-list--slot"><a class="tls-dropdown-text">My dropdown text</a></div>
<div class="tls-dropdown-list--slot">
<div class="tls-dropdown-text">A longer text to see the difference</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="tls-navbar--slot">
<div class="tls-dropdown"><a class="tls-link-dropdown">
<div class="tls-link-dropdown--text">Closed</div>
<div class="tls-link-dropdown--icon"><i class="fa fa-chevron-down"></i></div></a>
<div class="tls-dropdown--content hidden">
<div class="tls-dropdown--content hidden">Hidden content.</div>
</div>
</div>
</div>
<div class="tls-navbar--slot"><a class="tls-link-uppercase">My Uppercase Link</a></div>
<div class="tls-navbar--slot"><a class="tls-button-link">Button link</a></div>
</div>
<div class="tls-navbar--language">
<div class="tls-navbar--slot"><a class="tls-link-dropdown"><img class="tls-link-dropdown--flag" src="./flag-en.png"/>
<div class="tls-link-dropdown--text">Link</div>
<div class="tls-link-dropdown--icon"><i class="fa fa-chevron-down"></i></div></a></div>
</div>
<div class="tls-navbar--hamburger">
<div class="tls-hamburger -state-closed">
<div class="tls-hamburger--top-line"></div>
<div class="tls-hamburger--middle-line"></div>
<div class="tls-hamburger--bottom-line"></div>
</div>
</div>
</div>
</div>
<header class="tls-simple-banner">
<div class="tls-home-text-group">
<div class="tls-simple-text -color-white -size-22">Simple text<img class="tls-image" src="/atom/image/image.png"/>
</div>
<h1 class="tls-heading-1">Heading level 1</h1>
</div>
</header>
<div class="tls-appointment-content">
<div class="tls-large-card-info">
<div class="tls-card-lg">
<div class="tls-simple-text -size-16">
<p>lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur felis magna, lacinia ornare congue ornare, pharetra a leo. Suspendisse fermentum ut mi vel pulvinar. Maecenas gravida varius mauris, sed tempus risus pulvinar sed. In varius placerat erat in porttitor. Sed mollis est ligula, sit amet iaculis nulla rhoncus sed. Morbi quis felis et quam posuere sodales eget quis est. Integer congue faucibus nunc, rhoncus hendrerit massa lobortis sit amet. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
</div>
<div class="tls-simple-text -size-16">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur felis magna, lacinia ornare congue ornare, pharetra a leo. Suspendisse fermentum ut mi vel pulvinar. Maecenas gravida varius mauris, sed tempus risus pulvinar sed. In varius placerat erat in porttitor. Sed mollis est ligula, sit amet iaculis nulla rhoncus sed. Morbi quis felis et quam posuere sodales eget quis est. Integer congue faucibus nunc, rhoncus hendrerit massa lobortis sit amet. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
</div>
</div>
<div class="tls-large-card-info--decoration">
<div class="tls-decoration-vertical-lines -blue">
<div class="tls-line1"></div>
<div class="tls-line2"></div>
</div>
</div>
</div>
<div class="tls-appointment-time-picker">
<div class="tls-time-picker">
<button class="tls-time-picker--arrow"><i class="fa fa-chevron-left tls-time-picker--icon"></i></button>
<div class="tls-time-picker--time-group">
<div class="tls-time-group">
<div class="tls-time-group--slot">
<div class="tls-time-group--header">
<div class="tls-time-group--header-title">DEC. 01</div>
<div class="tls-time-group--header-sub-title">Monday</div>
</div>
<div class="tls-time-group--item">
<button class="tls-time-unit -prime">08:00</button>
</div>
<div class="tls-time-group--item">
<button class="tls-time-unit -prime">08:30</button>
</div>
<div class="tls-time-group--item">
<button class="tls-time-unit -available">09:00</button>
</div>
<div class="tls-time-group--item">
<button class="tls-time-unit -available">09:30</button>
</div>
<div class="tls-time-group--item">
<button class="tls-time-unit -available">10:00</button>
</div>
<div class="tls-time-group--item">
<button class="tls-time-unit -available">10:30</button>
</div>
<div class="tls-time-group--item">
<button class="tls-time-unit -available">11:00</button>
</div>
</div>
<div class="tls-time-group--slot">
<div class="tls-time-group--header">
<div class="tls-time-group--header-title">DEC. 02</div>
<div class="tls-time-group--header-sub-title">Tuesday</div>
</div>
<div class="tls-time-group--item">
<button class="tls-time-unit -unavailable">08:00</button>
</div>
<div class="tls-time-group--item">
<button class="tls-time-unit -available">08:30</button>
</div>
<div class="tls-time-group--item">
<button class="tls-time-unit -available">09:00</button>
</div>
<div class="tls-time-group--item">
<button class="tls-time-unit -available">09:30</button>
</div>
<div class="tls-time-group--item">
<button class="tls-time-unit -available">10:00</button>
</div>
<div class="tls-time-group--item">
<button class="tls-time-unit -available">10:30</button>
</div>
<div class="tls-time-group--item">
<button class="tls-time-unit -available">11:00</button>
</div>
</div>
<div class="tls-time-group--slot">
<div class="tls-time-group--header">
<div class="tls-time-group--header-title">DEC. 03</div>
<div class="tls-time-group--header-sub-title">Wednesday</div>
</div>
<div class="tls-time-group--item">
<button class="tls-time-unit -available">08:00</button>
</div>
<div class="tls-time-group--item">
<button class="tls-time-unit -available">08:30</button>
</div>
<div class="tls-time-group--item">
<button class="tls-time-unit -available">09:00</button>
</div>
<div class="tls-time-group--item">
<button class="tls-time-unit -available">09:30</button>
</div>
<div class="tls-time-group--item">
<button class="tls-time-unit -available">10:00</button>
</div>
<div class="tls-time-group--item">
<button class="tls-time-unit -available">10:30</button>
</div>
<div class="tls-time-group--item">
<button class="tls-time-unit -available">11:00</button>
</div>
</div>
<div class="tls-time-group--slot">
<div class="tls-time-group--header">
<div class="tls-time-group--header-title">DEC. 04</div>
<div class="tls-time-group--header-sub-title">Thursday</div>
</div>
<div class="tls-time-group--item">
<button class="tls-time-unit -available">08:00</button>
</div>
<div class="tls-time-group--item">
<button class="tls-time-unit -available">08:30</button>
</div>
<div class="tls-time-group--item">
<button class="tls-time-unit -available">09:00</button>
</div>
<div class="tls-time-group--item">
<button class="tls-time-unit -available">09:30</button>
</div>
<div class="tls-time-group--item">
<button class="tls-time-unit -available">10:00</button>
</div>
<div class="tls-time-group--item">
<button class="tls-time-unit -available">10:30</button>
</div>
<div class="tls-time-group--item">
<button class="tls-time-unit -available">11:00</button>
</div>
</div>
<div class="tls-time-group--slot">
<div class="tls-time-group--header">
<div class="tls-time-group--header-title">DEC. 05</div>
<div class="tls-time-group--header-sub-title">Friday</div>
</div>
<div class="tls-time-group--item">
<button class="tls-time-unit -available">08:00</button>
</div>
<div class="tls-time-group--item">
<button class="tls-time-unit -available">08:30</button>
</div>
<div class="tls-time-group--item">
<button class="tls-time-unit -available">09:00</button>
</div>
<div class="tls-time-group--item">
<button class="tls-time-unit -available">09:30</button>
</div>
<div class="tls-time-group--item">
<button class="tls-time-unit -available">10:00</button>
</div>
<div class="tls-time-group--item">
<button class="tls-time-unit -available">10:30</button>
</div>
<div class="tls-time-group--item">
<button class="tls-time-unit -available">11:00</button>
</div>
</div>
<div class="tls-time-group--slot">
<div class="tls-time-group--header">
<div class="tls-time-group--header-title">DEC. 06</div>
<div class="tls-time-group--header-sub-title">Saturday</div>
</div>
<div class="tls-time-group--item">
<button class="tls-time-unit -available">08:00</button>
</div>
<div class="tls-time-group--item">
<button class="tls-time-unit -available">08:30</button>
</div>
<div class="tls-time-group--item">
<button class="tls-time-unit -available">09:00</button>
</div>
<div class="tls-time-group--item">
<button class="tls-time-unit -available">09:30</button>
</div>
<div class="tls-time-group--item">
<button class="tls-time-unit -available">10:00</button>
</div>
<div class="tls-time-group--item">
<button class="tls-time-unit -available">10:30</button>
</div>
<div class="tls-time-group--item">
<button class="tls-time-unit -available">11:00</button>
</div>
</div>
<div class="tls-time-group--slot">
<div class="tls-time-group--header">
<div class="tls-time-group--header-title">DEC. 07</div>
<div class="tls-time-group--header-sub-title">Sunday</div>
</div>
<div class="tls-time-group--item">
<button class="tls-time-unit -available">08:00</button>
</div>
<div class="tls-time-group--item">
<button class="tls-time-unit -available">08:30</button>
</div>
<div class="tls-time-group--item">
<button class="tls-time-unit -available">09:00</button>
</div>
<div class="tls-time-group--item">
<button class="tls-time-unit -available">09:30</button>
</div>
<div class="tls-time-group--item">
<button class="tls-time-unit -available">10:00</button>
</div>
<div class="tls-time-group--item">
<button class="tls-time-unit -available">10:30</button>
</div>
<div class="tls-time-group--item">
<button class="tls-time-unit -available">11:00</button>
</div>
</div>
</div>
</div>
<button class="tls-time-picker--arrow"><i class="fa fa-chevron-right tls-time-picker--icon"></i></button>
</div>
</div>
<div class="tls-appointment-legends">
<div class="tls-legend">
<div class="tls-legend--bloc -color-main"></div>
<div class="tls-simple-text -color-main -weight-bold -size-16">Legend with color
</div>
</div>
<div class="tls-legend">
<div class="tls-legend--bloc -color-primetime"></div>
<div class="tls-simple-text -color-main -weight-bold -size-16">Legend with color
</div>
</div>
</div>
</div>
<div class="tls-footer">
<div class="tls-footer-links">
<div class="tls-footer-links--slot">
<div class="tls-footer-links--title">
<div class="tls-simple-text -color-white -weight-bold">Tls links
</div>
</div>
<div class="tls-footer-links--list">
<ul class="tls-link-list">
<li class="tls-link-list--slot"><a class="tls-link">My Link</a></li>
<li class="tls-link-list--slot"><a class="tls-link">My Link</a></li>
</ul>
</div>
</div>
<div class="tls-footer-links--slot">
<div class="tls-footer-links--title">
<div class="tls-simple-text -color-white -weight-bold">Tls links
</div>
</div>
<div class="tls-footer-links--list">
<ul class="tls-link-list">
<li class="tls-link-list--slot"><a class="tls-link">My Link</a></li>
<li class="tls-link-list--slot"><a class="tls-link">My Link</a></li>
</ul>
</div>
</div>
<div class="tls-footer-links--slot">
<div class="tls-footer-links--title">
<div class="tls-simple-text -color-white -weight-bold">Tls links
</div>
</div>
<div class="tls-footer-links--list">
<ul class="tls-link-list">
<li class="tls-link-list--slot"><a class="tls-link">My Link</a></li>
<li class="tls-link-list--slot"><a class="tls-link">My Link</a></li>
</ul>
</div>
</div>
<div class="tls-footer-links--slot">
<div class="tls-footer-links--title">
<div class="tls-simple-text -color-white -weight-bold">Tls links
</div>
</div>
<div class="tls-footer-links--list">
<ul class="tls-link-list">
<li class="tls-link-list--slot"><a class="tls-link">My Link</a></li>
<li class="tls-link-list--slot"><a class="tls-link">My Link</a></li>
</ul>
</div>
</div>
</div>
<div class="tls-footer-line"></div>
<div class="tls-footer-content">
<div class="tls-footer--slot"><a class="tls-logo" href="#"><img class="tls-logo--img" src="/atom/logo/logo/logo.svg"/></a></div>
<div class="tls-footer--slot tls-sm-visible">
<div class="tls-simple-text -color-white -size-12">© 2019 TLScontact. Tous droits réservés.
</div>
</div>
<div class="tls-footer--slot tls-sm-visible">
<div class="tls-social-logo-group">
<div class="tls-social-logo-group--slot"><a class="tls-social-logo" href="#"><i class="fab fa-linkedin-in tls-social-logo--icon"></i></a></div>
<div class="tls-social-logo-group--slot"><a class="tls-social-logo" href="#"><i class="fab fa-linkedin-in tls-social-logo--icon"></i></a></div>
</div>
</div>
<div class="tls-footer--slot"><a class="tls-logo" href="#"><img class="tls-logo--img" src="/atom/logo/logo/logo.svg"/></a></div>
</div>
</div>
</div>.tls-appointment
.tls-navbar
.tls-navbar--content
.tls-navbar--logo
a.tls-logo(href='#')
img.tls-logo--img(src='/atom/logo/logo/logo.svg')
.tls-navbar--links.-opened
.tls-navbar--slot
.tls-dropdown
a.tls-link-dropdown
.tls-link-dropdown--text Opened
.tls-link-dropdown--icon
i.fa.fa-chevron-up
.tls-dropdown--content
.tls-dropdown--content
.tls-dropdown-list
.tls-dropdown-list--slot
a.tls-dropdown-text My dropdown text
.tls-dropdown-list--slot
.tls-dropdown-text A longer text to see the difference
.tls-navbar--slot
.tls-dropdown
a.tls-link-dropdown
.tls-link-dropdown--text Closed
.tls-link-dropdown--icon
i.fa.fa-chevron-down
.tls-dropdown--content.hidden
.tls-dropdown--content.hidden Hidden content.
.tls-navbar--slot
a.tls-link-uppercase My Uppercase Link
.tls-navbar--slot
a.tls-button-link Button link
.tls-navbar--language
.tls-navbar--slot
a.tls-link-dropdown
img.tls-link-dropdown--flag(src='./flag-en.png')
.tls-link-dropdown--text Link
.tls-link-dropdown--icon
i.fa.fa-chevron-down
.tls-navbar--hamburger
.tls-hamburger.-state-closed
.tls-hamburger--top-line
.tls-hamburger--middle-line
.tls-hamburger--bottom-line
header.tls-simple-banner
.tls-home-text-group
.tls-simple-text.-color-white.-size-22
| Simple text
img.tls-image(src='/atom/image/image.png')
h1.tls-heading-1 Heading level 1
.tls-appointment-content
.tls-large-card-info
.tls-card-lg
.tls-simple-text.-size-16
p lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur felis magna, lacinia ornare congue ornare, pharetra a leo. Suspendisse fermentum ut mi vel pulvinar. Maecenas gravida varius mauris, sed tempus risus pulvinar sed. In varius placerat erat in porttitor. Sed mollis est ligula, sit amet iaculis nulla rhoncus sed. Morbi quis felis et quam posuere sodales eget quis est. Integer congue faucibus nunc, rhoncus hendrerit massa lobortis sit amet. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
.tls-simple-text.-size-16
p Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur felis magna, lacinia ornare congue ornare, pharetra a leo. Suspendisse fermentum ut mi vel pulvinar. Maecenas gravida varius mauris, sed tempus risus pulvinar sed. In varius placerat erat in porttitor. Sed mollis est ligula, sit amet iaculis nulla rhoncus sed. Morbi quis felis et quam posuere sodales eget quis est. Integer congue faucibus nunc, rhoncus hendrerit massa lobortis sit amet. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
.tls-large-card-info--decoration
.tls-decoration-vertical-lines.-blue
.tls-line1
.tls-line2
.tls-appointment-time-picker
.tls-time-picker
button.tls-time-picker--arrow
i.fa.fa-chevron-left.tls-time-picker--icon
.tls-time-picker--time-group
.tls-time-group
.tls-time-group--slot
.tls-time-group--header
.tls-time-group--header-title DEC. 01
.tls-time-group--header-sub-title Monday
.tls-time-group--item
button.tls-time-unit.-prime 08:00
.tls-time-group--item
button.tls-time-unit.-prime 08:30
.tls-time-group--item
button.tls-time-unit.-available 09:00
.tls-time-group--item
button.tls-time-unit.-available 09:30
.tls-time-group--item
button.tls-time-unit.-available 10:00
.tls-time-group--item
button.tls-time-unit.-available 10:30
.tls-time-group--item
button.tls-time-unit.-available 11:00
.tls-time-group--slot
.tls-time-group--header
.tls-time-group--header-title DEC. 02
.tls-time-group--header-sub-title Tuesday
.tls-time-group--item
button.tls-time-unit.-unavailable 08:00
.tls-time-group--item
button.tls-time-unit.-available 08:30
.tls-time-group--item
button.tls-time-unit.-available 09:00
.tls-time-group--item
button.tls-time-unit.-available 09:30
.tls-time-group--item
button.tls-time-unit.-available 10:00
.tls-time-group--item
button.tls-time-unit.-available 10:30
.tls-time-group--item
button.tls-time-unit.-available 11:00
.tls-time-group--slot
.tls-time-group--header
.tls-time-group--header-title DEC. 03
.tls-time-group--header-sub-title Wednesday
.tls-time-group--item
button.tls-time-unit.-available 08:00
.tls-time-group--item
button.tls-time-unit.-available 08:30
.tls-time-group--item
button.tls-time-unit.-available 09:00
.tls-time-group--item
button.tls-time-unit.-available 09:30
.tls-time-group--item
button.tls-time-unit.-available 10:00
.tls-time-group--item
button.tls-time-unit.-available 10:30
.tls-time-group--item
button.tls-time-unit.-available 11:00
.tls-time-group--slot
.tls-time-group--header
.tls-time-group--header-title DEC. 04
.tls-time-group--header-sub-title Thursday
.tls-time-group--item
button.tls-time-unit.-available 08:00
.tls-time-group--item
button.tls-time-unit.-available 08:30
.tls-time-group--item
button.tls-time-unit.-available 09:00
.tls-time-group--item
button.tls-time-unit.-available 09:30
.tls-time-group--item
button.tls-time-unit.-available 10:00
.tls-time-group--item
button.tls-time-unit.-available 10:30
.tls-time-group--item
button.tls-time-unit.-available 11:00
.tls-time-group--slot
.tls-time-group--header
.tls-time-group--header-title DEC. 05
.tls-time-group--header-sub-title Friday
.tls-time-group--item
button.tls-time-unit.-available 08:00
.tls-time-group--item
button.tls-time-unit.-available 08:30
.tls-time-group--item
button.tls-time-unit.-available 09:00
.tls-time-group--item
button.tls-time-unit.-available 09:30
.tls-time-group--item
button.tls-time-unit.-available 10:00
.tls-time-group--item
button.tls-time-unit.-available 10:30
.tls-time-group--item
button.tls-time-unit.-available 11:00
.tls-time-group--slot
.tls-time-group--header
.tls-time-group--header-title DEC. 06
.tls-time-group--header-sub-title Saturday
.tls-time-group--item
button.tls-time-unit.-available 08:00
.tls-time-group--item
button.tls-time-unit.-available 08:30
.tls-time-group--item
button.tls-time-unit.-available 09:00
.tls-time-group--item
button.tls-time-unit.-available 09:30
.tls-time-group--item
button.tls-time-unit.-available 10:00
.tls-time-group--item
button.tls-time-unit.-available 10:30
.tls-time-group--item
button.tls-time-unit.-available 11:00
.tls-time-group--slot
.tls-time-group--header
.tls-time-group--header-title DEC. 07
.tls-time-group--header-sub-title Sunday
.tls-time-group--item
button.tls-time-unit.-available 08:00
.tls-time-group--item
button.tls-time-unit.-available 08:30
.tls-time-group--item
button.tls-time-unit.-available 09:00
.tls-time-group--item
button.tls-time-unit.-available 09:30
.tls-time-group--item
button.tls-time-unit.-available 10:00
.tls-time-group--item
button.tls-time-unit.-available 10:30
.tls-time-group--item
button.tls-time-unit.-available 11:00
button.tls-time-picker--arrow
i.fa.fa-chevron-right.tls-time-picker--icon
.tls-appointment-legends
.tls-legend
.tls-legend--bloc.-color-main
.tls-simple-text.-color-main.-weight-bold.-size-16.
Legend with color
.tls-legend
.tls-legend--bloc.-color-primetime
.tls-simple-text.-color-main.-weight-bold.-size-16.
Legend with color
.tls-footer
.tls-footer-links
.tls-footer-links--slot
.tls-footer-links--title
.tls-simple-text.-color-white.-weight-bold.
Tls links
.tls-footer-links--list
ul.tls-link-list
li.tls-link-list--slot
a.tls-link My Link
li.tls-link-list--slot
a.tls-link My Link
.tls-footer-links--slot
.tls-footer-links--title
.tls-simple-text.-color-white.-weight-bold.
Tls links
.tls-footer-links--list
ul.tls-link-list
li.tls-link-list--slot
a.tls-link My Link
li.tls-link-list--slot
a.tls-link My Link
.tls-footer-links--slot
.tls-footer-links--title
.tls-simple-text.-color-white.-weight-bold.
Tls links
.tls-footer-links--list
ul.tls-link-list
li.tls-link-list--slot
a.tls-link My Link
li.tls-link-list--slot
a.tls-link My Link
.tls-footer-links--slot
.tls-footer-links--title
.tls-simple-text.-color-white.-weight-bold.
Tls links
.tls-footer-links--list
ul.tls-link-list
li.tls-link-list--slot
a.tls-link My Link
li.tls-link-list--slot
a.tls-link My Link
.tls-footer-line
.tls-footer-content
.tls-footer--slot
a.tls-logo(href='#')
img.tls-logo--img(src='/atom/logo/logo/logo.svg')
.tls-footer--slot.tls-sm-visible
.tls-simple-text.-color-white.-size-12.
© 2019 TLScontact. Tous droits réservés.
.tls-footer--slot.tls-sm-visible
.tls-social-logo-group
.tls-social-logo-group--slot
a.tls-social-logo(href='#')
i.fab.fa-linkedin-in.tls-social-logo--icon
.tls-social-logo-group--slot
a.tls-social-logo(href='#')
i.fab.fa-linkedin-in.tls-social-logo--icon
.tls-footer--slot
a.tls-logo(href='#')
img.tls-logo--img(src='/atom/logo/logo/logo.svg')Appointment-covid
<div class="tls-appointment">
<div class="tls-navbar">
<div class="tls-navbar--content">
<div class="tls-navbar--logo"><a class="tls-logo" href="#"><img class="tls-logo--img" src="/atom/logo/logo/logo.svg"/></a></div>
<div class="tls-navbar--links -opened">
<div class="tls-navbar--slot">
<div class="tls-dropdown"><a class="tls-link-dropdown">
<div class="tls-link-dropdown--text">Opened</div>
<div class="tls-link-dropdown--icon"><i class="fa fa-chevron-up"></i></div></a>
<div class="tls-dropdown--content">
<div class="tls-dropdown--content">
<div class="tls-dropdown-list">
<div class="tls-dropdown-list--slot"><a class="tls-dropdown-text">My dropdown text</a></div>
<div class="tls-dropdown-list--slot">
<div class="tls-dropdown-text">A longer text to see the difference</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="tls-navbar--slot">
<div class="tls-dropdown"><a class="tls-link-dropdown">
<div class="tls-link-dropdown--text">Closed</div>
<div class="tls-link-dropdown--icon"><i class="fa fa-chevron-down"></i></div></a>
<div class="tls-dropdown--content hidden">
<div class="tls-dropdown--content hidden">Hidden content.</div>
</div>
</div>
</div>
<div class="tls-navbar--slot"><a class="tls-link-uppercase">My Uppercase Link</a></div>
<div class="tls-navbar--slot"><a class="tls-button-link">Button link</a></div>
</div>
<div class="tls-navbar--language">
<div class="tls-navbar--slot"><a class="tls-link-dropdown"><img class="tls-link-dropdown--flag" src="./flag-en.png"/>
<div class="tls-link-dropdown--text">Link</div>
<div class="tls-link-dropdown--icon"><i class="fa fa-chevron-down"></i></div></a></div>
</div>
<div class="tls-navbar--hamburger">
<div class="tls-hamburger -state-closed">
<div class="tls-hamburger--top-line"></div>
<div class="tls-hamburger--middle-line"></div>
<div class="tls-hamburger--bottom-line"></div>
</div>
</div>
</div>
</div>
<header class="tls-simple-banner">
<div class="tls-home-text-group">
<div class="tls-simple-text -color-white -size-22">Simple text<img class="tls-image" src="/atom/image/image.png"/>
</div>
<h1 class="tls-heading-1">Heading level 1</h1>
</div>
</header>
<div class="tls-appointment-content">
<div class="tls-large-card-info">
<div class="tls-card-lg">
<div class="tls-simple-text -size-16">
<p>lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur felis magna, lacinia ornare congue ornare, pharetra a leo. Suspendisse fermentum ut mi vel pulvinar. Maecenas gravida varius mauris, sed tempus risus pulvinar sed. In varius placerat erat in porttitor. Sed mollis est ligula, sit amet iaculis nulla rhoncus sed. Morbi quis felis et quam posuere sodales eget quis est. Integer congue faucibus nunc, rhoncus hendrerit massa lobortis sit amet. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
</div>
<div class="tls-simple-text -size-16">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur felis magna, lacinia ornare congue ornare, pharetra a leo. Suspendisse fermentum ut mi vel pulvinar. Maecenas gravida varius mauris, sed tempus risus pulvinar sed. In varius placerat erat in porttitor. Sed mollis est ligula, sit amet iaculis nulla rhoncus sed. Morbi quis felis et quam posuere sodales eget quis est. Integer congue faucibus nunc, rhoncus hendrerit massa lobortis sit amet. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
</div>
</div>
<div class="tls-large-card-info--decoration">
<div class="tls-decoration-vertical-lines -blue">
<div class="tls-line1"></div>
<div class="tls-line2"></div>
</div>
</div>
</div>
<div class="tls-appointment-time-picker">
<div class="tls-time-picker">
<button class="tls-time-picker--arrow"><i class="fa fa-chevron-left tls-time-picker--icon"></i></button>
<div class="tls-time-picker--time-group">
<div class="tls-time-group">
<div class="tls-time-group--slot">
<div class="tls-time-group--header">
<div class="tls-time-group--header-title">DEC. 01</div>
<div class="tls-time-group--header-sub-title">Monday</div>
</div>
<div class="tls-time-group--item">
<button class="tls-time-unit -prime">08:00</button>
</div>
<div class="tls-time-group--item">
<button class="tls-time-unit -prime">08:30</button>
</div>
<div class="tls-time-group--item">
<button class="tls-time-unit -available">09:00</button>
</div>
<div class="tls-time-group--item">
<button class="tls-time-unit -available">09:30</button>
</div>
<div class="tls-time-group--item">
<button class="tls-time-unit -available">10:00</button>
</div>
<div class="tls-time-group--item">
<button class="tls-time-unit -available">10:30</button>
</div>
<div class="tls-time-group--item">
<button class="tls-time-unit -available">11:00</button>
</div>
</div>
<div class="tls-time-group--slot">
<div class="tls-time-group--header">
<div class="tls-time-group--header-title">DEC. 02</div>
<div class="tls-time-group--header-sub-title">Tuesday</div>
</div>
<div class="tls-time-group--item">
<button class="tls-time-unit -unavailable">08:00</button>
</div>
<div class="tls-time-group--item">
<button class="tls-time-unit -available">08:30</button>
</div>
<div class="tls-time-group--item">
<button class="tls-time-unit -available">09:00</button>
</div>
<div class="tls-time-group--item">
<button class="tls-time-unit -available">09:30</button>
</div>
<div class="tls-time-group--item">
<button class="tls-time-unit -available">10:00</button>
</div>
<div class="tls-time-group--item">
<button class="tls-time-unit -available">10:30</button>
</div>
<div class="tls-time-group--item">
<button class="tls-time-unit -available">11:00</button>
</div>
</div>
<div class="tls-time-group--slot">
<div class="tls-time-group--header">
<div class="tls-time-group--header-title">DEC. 03</div>
<div class="tls-time-group--header-sub-title">Wednesday</div>
</div>
<div class="tls-time-group--item">
<button class="tls-time-unit -available">08:00</button>
</div>
<div class="tls-time-group--item">
<button class="tls-time-unit -available">08:30</button>
</div>
<div class="tls-time-group--item">
<button class="tls-time-unit -available">09:00</button>
</div>
<div class="tls-time-group--item">
<button class="tls-time-unit -available">09:30</button>
</div>
<div class="tls-time-group--item">
<button class="tls-time-unit -available">10:00</button>
</div>
<div class="tls-time-group--item">
<button class="tls-time-unit -available">10:30</button>
</div>
<div class="tls-time-group--item">
<button class="tls-time-unit -available">11:00</button>
</div>
</div>
<div class="tls-time-group--slot">
<div class="tls-time-group--header">
<div class="tls-time-group--header-title">DEC. 04</div>
<div class="tls-time-group--header-sub-title">Thursday</div>
</div>
<div class="tls-time-group--item">
<button class="tls-time-unit -available">08:00</button>
</div>
<div class="tls-time-group--item">
<button class="tls-time-unit -available">08:30</button>
</div>
<div class="tls-time-group--item">
<button class="tls-time-unit -available">09:00</button>
</div>
<div class="tls-time-group--item">
<button class="tls-time-unit -available">09:30</button>
</div>
<div class="tls-time-group--item">
<button class="tls-time-unit -available">10:00</button>
</div>
<div class="tls-time-group--item">
<button class="tls-time-unit -available">10:30</button>
</div>
<div class="tls-time-group--item">
<button class="tls-time-unit -available">11:00</button>
</div>
</div>
<div class="tls-time-group--slot">
<div class="tls-time-group--header">
<div class="tls-time-group--header-title">DEC. 05</div>
<div class="tls-time-group--header-sub-title">Friday</div>
</div>
<div class="tls-time-group--item">
<button class="tls-time-unit -available">08:00</button>
</div>
<div class="tls-time-group--item">
<button class="tls-time-unit -available">08:30</button>
</div>
<div class="tls-time-group--item">
<button class="tls-time-unit -available">09:00</button>
</div>
<div class="tls-time-group--item">
<button class="tls-time-unit -available">09:30</button>
</div>
<div class="tls-time-group--item">
<button class="tls-time-unit -available">10:00</button>
</div>
<div class="tls-time-group--item">
<button class="tls-time-unit -available">10:30</button>
</div>
<div class="tls-time-group--item">
<button class="tls-time-unit -available">11:00</button>
</div>
</div>
<div class="tls-time-group--slot">
<div class="tls-time-group--header">
<div class="tls-time-group--header-title">DEC. 06</div>
<div class="tls-time-group--header-sub-title">Saturday</div>
</div>
<div class="tls-time-group--item">
<button class="tls-time-unit -available">08:00</button>
</div>
<div class="tls-time-group--item">
<button class="tls-time-unit -available">08:30</button>
</div>
<div class="tls-time-group--item">
<button class="tls-time-unit -available">09:00</button>
</div>
<div class="tls-time-group--item">
<button class="tls-time-unit -available">09:30</button>
</div>
<div class="tls-time-group--item">
<button class="tls-time-unit -available">10:00</button>
</div>
<div class="tls-time-group--item">
<button class="tls-time-unit -available">10:30</button>
</div>
<div class="tls-time-group--item">
<button class="tls-time-unit -available">11:00</button>
</div>
</div>
<div class="tls-time-group--slot">
<div class="tls-time-group--header">
<div class="tls-time-group--header-title">DEC. 07</div>
<div class="tls-time-group--header-sub-title">Sunday</div>
</div>
<div class="tls-time-group--item">
<button class="tls-time-unit -available">08:00</button>
</div>
<div class="tls-time-group--item">
<button class="tls-time-unit -available">08:30</button>
</div>
<div class="tls-time-group--item">
<button class="tls-time-unit -available">09:00</button>
</div>
<div class="tls-time-group--item">
<button class="tls-time-unit -available">09:30</button>
</div>
<div class="tls-time-group--item">
<button class="tls-time-unit -available">10:00</button>
</div>
<div class="tls-time-group--item">
<button class="tls-time-unit -available">10:30</button>
</div>
<div class="tls-time-group--item">
<button class="tls-time-unit -available">11:00</button>
</div>
</div>
</div>
</div>
<button class="tls-time-picker--arrow"><i class="fa fa-chevron-right tls-time-picker--icon"></i></button>
</div>
</div>
<div class="tls-appointment-legends">
<div class="tls-legend">
<div class="tls-legend--bloc -color-main"></div>
<div class="tls-simple-text -color-main -weight-bold -size-16">Legend with color
</div>
</div>
<div class="tls-legend">
<div class="tls-legend--bloc -color-primetime"></div>
<div class="tls-simple-text -color-main -weight-bold -size-16">Legend with color
</div>
</div>
</div>
</div>
<div class="tls-footer">
<div class="tls-footer-links">
<div class="tls-footer-links--slot">
<div class="tls-footer-links--title">
<div class="tls-simple-text -color-white -weight-bold">Tls links
</div>
</div>
<div class="tls-footer-links--list">
<ul class="tls-link-list">
<li class="tls-link-list--slot"><a class="tls-link">My Link</a></li>
<li class="tls-link-list--slot"><a class="tls-link">My Link</a></li>
</ul>
</div>
</div>
<div class="tls-footer-links--slot">
<div class="tls-footer-links--title">
<div class="tls-simple-text -color-white -weight-bold">Tls links
</div>
</div>
<div class="tls-footer-links--list">
<ul class="tls-link-list">
<li class="tls-link-list--slot"><a class="tls-link">My Link</a></li>
<li class="tls-link-list--slot"><a class="tls-link">My Link</a></li>
</ul>
</div>
</div>
<div class="tls-footer-links--slot">
<div class="tls-footer-links--title">
<div class="tls-simple-text -color-white -weight-bold">Tls links
</div>
</div>
<div class="tls-footer-links--list">
<ul class="tls-link-list">
<li class="tls-link-list--slot"><a class="tls-link">My Link</a></li>
<li class="tls-link-list--slot"><a class="tls-link">My Link</a></li>
</ul>
</div>
</div>
<div class="tls-footer-links--slot">
<div class="tls-footer-links--title">
<div class="tls-simple-text -color-white -weight-bold">Tls links
</div>
</div>
<div class="tls-footer-links--list">
<ul class="tls-link-list">
<li class="tls-link-list--slot"><a class="tls-link">My Link</a></li>
<li class="tls-link-list--slot"><a class="tls-link">My Link</a></li>
</ul>
</div>
</div>
</div>
<div class="tls-footer-line"></div>
<div class="tls-footer-content">
<div class="tls-footer--slot"><a class="tls-logo" href="#"><img class="tls-logo--img" src="/atom/logo/logo/logo.svg"/></a></div>
<div class="tls-footer--slot tls-sm-visible">
<div class="tls-simple-text -color-white -size-12">© 2019 TLScontact. Tous droits réservés.
</div>
</div>
<div class="tls-footer--slot tls-sm-visible">
<div class="tls-social-logo-group">
<div class="tls-social-logo-group--slot"><a class="tls-social-logo" href="#"><i class="fab fa-linkedin-in tls-social-logo--icon"></i></a></div>
<div class="tls-social-logo-group--slot"><a class="tls-social-logo" href="#"><i class="fab fa-linkedin-in tls-social-logo--icon"></i></a></div>
</div>
</div>
<div class="tls-footer--slot"><a class="tls-logo" href="#"><img class="tls-logo--img" src="/atom/logo/logo/logo.svg"/></a></div>
</div>
</div>
</div>.tls-appointment
.tls-navbar
.tls-navbar--content
.tls-navbar--logo
a.tls-logo(href='#')
img.tls-logo--img(src='/atom/logo/logo/logo.svg')
.tls-navbar--links.-opened
.tls-navbar--slot
.tls-dropdown
a.tls-link-dropdown
.tls-link-dropdown--text Opened
.tls-link-dropdown--icon
i.fa.fa-chevron-up
.tls-dropdown--content
.tls-dropdown--content
.tls-dropdown-list
.tls-dropdown-list--slot
a.tls-dropdown-text My dropdown text
.tls-dropdown-list--slot
.tls-dropdown-text A longer text to see the difference
.tls-navbar--slot
.tls-dropdown
a.tls-link-dropdown
.tls-link-dropdown--text Closed
.tls-link-dropdown--icon
i.fa.fa-chevron-down
.tls-dropdown--content.hidden
.tls-dropdown--content.hidden Hidden content.
.tls-navbar--slot
a.tls-link-uppercase My Uppercase Link
.tls-navbar--slot
a.tls-button-link Button link
.tls-navbar--language
.tls-navbar--slot
a.tls-link-dropdown
img.tls-link-dropdown--flag(src='./flag-en.png')
.tls-link-dropdown--text Link
.tls-link-dropdown--icon
i.fa.fa-chevron-down
.tls-navbar--hamburger
.tls-hamburger.-state-closed
.tls-hamburger--top-line
.tls-hamburger--middle-line
.tls-hamburger--bottom-line
header.tls-simple-banner
.tls-home-text-group
.tls-simple-text.-color-white.-size-22
| Simple text
img.tls-image(src='/atom/image/image.png')
h1.tls-heading-1 Heading level 1
.tls-appointment-content
.tls-large-card-info
.tls-card-lg
.tls-simple-text.-size-16
p lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur felis magna, lacinia ornare congue ornare, pharetra a leo. Suspendisse fermentum ut mi vel pulvinar. Maecenas gravida varius mauris, sed tempus risus pulvinar sed. In varius placerat erat in porttitor. Sed mollis est ligula, sit amet iaculis nulla rhoncus sed. Morbi quis felis et quam posuere sodales eget quis est. Integer congue faucibus nunc, rhoncus hendrerit massa lobortis sit amet. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
.tls-simple-text.-size-16
p Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur felis magna, lacinia ornare congue ornare, pharetra a leo. Suspendisse fermentum ut mi vel pulvinar. Maecenas gravida varius mauris, sed tempus risus pulvinar sed. In varius placerat erat in porttitor. Sed mollis est ligula, sit amet iaculis nulla rhoncus sed. Morbi quis felis et quam posuere sodales eget quis est. Integer congue faucibus nunc, rhoncus hendrerit massa lobortis sit amet. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
.tls-large-card-info--decoration
.tls-decoration-vertical-lines.-blue
.tls-line1
.tls-line2
.tls-appointment-time-picker
.tls-time-picker
button.tls-time-picker--arrow
i.fa.fa-chevron-left.tls-time-picker--icon
.tls-time-picker--time-group
.tls-time-group
.tls-time-group--slot
.tls-time-group--header
.tls-time-group--header-title DEC. 01
.tls-time-group--header-sub-title Monday
.tls-time-group--item
button.tls-time-unit.-prime 08:00
.tls-time-group--item
button.tls-time-unit.-prime 08:30
.tls-time-group--item
button.tls-time-unit.-available 09:00
.tls-time-group--item
button.tls-time-unit.-available 09:30
.tls-time-group--item
button.tls-time-unit.-available 10:00
.tls-time-group--item
button.tls-time-unit.-available 10:30
.tls-time-group--item
button.tls-time-unit.-available 11:00
.tls-time-group--slot
.tls-time-group--header
.tls-time-group--header-title DEC. 02
.tls-time-group--header-sub-title Tuesday
.tls-time-group--item
button.tls-time-unit.-unavailable 08:00
.tls-time-group--item
button.tls-time-unit.-available 08:30
.tls-time-group--item
button.tls-time-unit.-available 09:00
.tls-time-group--item
button.tls-time-unit.-available 09:30
.tls-time-group--item
button.tls-time-unit.-available 10:00
.tls-time-group--item
button.tls-time-unit.-available 10:30
.tls-time-group--item
button.tls-time-unit.-available 11:00
.tls-time-group--slot
.tls-time-group--header
.tls-time-group--header-title DEC. 03
.tls-time-group--header-sub-title Wednesday
.tls-time-group--item
button.tls-time-unit.-available 08:00
.tls-time-group--item
button.tls-time-unit.-available 08:30
.tls-time-group--item
button.tls-time-unit.-available 09:00
.tls-time-group--item
button.tls-time-unit.-available 09:30
.tls-time-group--item
button.tls-time-unit.-available 10:00
.tls-time-group--item
button.tls-time-unit.-available 10:30
.tls-time-group--item
button.tls-time-unit.-available 11:00
.tls-time-group--slot
.tls-time-group--header
.tls-time-group--header-title DEC. 04
.tls-time-group--header-sub-title Thursday
.tls-time-group--item
button.tls-time-unit.-available 08:00
.tls-time-group--item
button.tls-time-unit.-available 08:30
.tls-time-group--item
button.tls-time-unit.-available 09:00
.tls-time-group--item
button.tls-time-unit.-available 09:30
.tls-time-group--item
button.tls-time-unit.-available 10:00
.tls-time-group--item
button.tls-time-unit.-available 10:30
.tls-time-group--item
button.tls-time-unit.-available 11:00
.tls-time-group--slot
.tls-time-group--header
.tls-time-group--header-title DEC. 05
.tls-time-group--header-sub-title Friday
.tls-time-group--item
button.tls-time-unit.-available 08:00
.tls-time-group--item
button.tls-time-unit.-available 08:30
.tls-time-group--item
button.tls-time-unit.-available 09:00
.tls-time-group--item
button.tls-time-unit.-available 09:30
.tls-time-group--item
button.tls-time-unit.-available 10:00
.tls-time-group--item
button.tls-time-unit.-available 10:30
.tls-time-group--item
button.tls-time-unit.-available 11:00
.tls-time-group--slot
.tls-time-group--header
.tls-time-group--header-title DEC. 06
.tls-time-group--header-sub-title Saturday
.tls-time-group--item
button.tls-time-unit.-available 08:00
.tls-time-group--item
button.tls-time-unit.-available 08:30
.tls-time-group--item
button.tls-time-unit.-available 09:00
.tls-time-group--item
button.tls-time-unit.-available 09:30
.tls-time-group--item
button.tls-time-unit.-available 10:00
.tls-time-group--item
button.tls-time-unit.-available 10:30
.tls-time-group--item
button.tls-time-unit.-available 11:00
.tls-time-group--slot
.tls-time-group--header
.tls-time-group--header-title DEC. 07
.tls-time-group--header-sub-title Sunday
.tls-time-group--item
button.tls-time-unit.-available 08:00
.tls-time-group--item
button.tls-time-unit.-available 08:30
.tls-time-group--item
button.tls-time-unit.-available 09:00
.tls-time-group--item
button.tls-time-unit.-available 09:30
.tls-time-group--item
button.tls-time-unit.-available 10:00
.tls-time-group--item
button.tls-time-unit.-available 10:30
.tls-time-group--item
button.tls-time-unit.-available 11:00
button.tls-time-picker--arrow
i.fa.fa-chevron-right.tls-time-picker--icon
.tls-appointment-legends
.tls-legend
.tls-legend--bloc.-color-main
.tls-simple-text.-color-main.-weight-bold.-size-16.
Legend with color
.tls-legend
.tls-legend--bloc.-color-primetime
.tls-simple-text.-color-main.-weight-bold.-size-16.
Legend with color
.tls-footer
.tls-footer-links
.tls-footer-links--slot
.tls-footer-links--title
.tls-simple-text.-color-white.-weight-bold.
Tls links
.tls-footer-links--list
ul.tls-link-list
li.tls-link-list--slot
a.tls-link My Link
li.tls-link-list--slot
a.tls-link My Link
.tls-footer-links--slot
.tls-footer-links--title
.tls-simple-text.-color-white.-weight-bold.
Tls links
.tls-footer-links--list
ul.tls-link-list
li.tls-link-list--slot
a.tls-link My Link
li.tls-link-list--slot
a.tls-link My Link
.tls-footer-links--slot
.tls-footer-links--title
.tls-simple-text.-color-white.-weight-bold.
Tls links
.tls-footer-links--list
ul.tls-link-list
li.tls-link-list--slot
a.tls-link My Link
li.tls-link-list--slot
a.tls-link My Link
.tls-footer-links--slot
.tls-footer-links--title
.tls-simple-text.-color-white.-weight-bold.
Tls links
.tls-footer-links--list
ul.tls-link-list
li.tls-link-list--slot
a.tls-link My Link
li.tls-link-list--slot
a.tls-link My Link
.tls-footer-line
.tls-footer-content
.tls-footer--slot
a.tls-logo(href='#')
img.tls-logo--img(src='/atom/logo/logo/logo.svg')
.tls-footer--slot.tls-sm-visible
.tls-simple-text.-color-white.-size-12.
© 2019 TLScontact. Tous droits réservés.
.tls-footer--slot.tls-sm-visible
.tls-social-logo-group
.tls-social-logo-group--slot
a.tls-social-logo(href='#')
i.fab.fa-linkedin-in.tls-social-logo--icon
.tls-social-logo-group--slot
a.tls-social-logo(href='#')
i.fab.fa-linkedin-in.tls-social-logo--icon
.tls-footer--slot
a.tls-logo(href='#')
img.tls-logo--img(src='/atom/logo/logo/logo.svg')Checkout
<div class="tls-checkout">
<div class="tls-navbar">
<div class="tls-navbar--content">
<div class="tls-navbar--logo"><a class="tls-logo" href="#"><img class="tls-logo--img" src="/atom/logo/logo/logo.svg"/></a></div>
<div class="tls-navbar--links -opened">
<div class="tls-navbar--slot">
<div class="tls-dropdown"><a class="tls-link-dropdown">
<div class="tls-link-dropdown--text">Opened</div>
<div class="tls-link-dropdown--icon"><i class="fa fa-chevron-up"></i></div></a>
<div class="tls-dropdown--content">
<div class="tls-dropdown--content">
<div class="tls-dropdown-list">
<div class="tls-dropdown-list--slot"><a class="tls-dropdown-text">My dropdown text</a></div>
<div class="tls-dropdown-list--slot">
<div class="tls-dropdown-text">A longer text to see the difference</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="tls-navbar--slot">
<div class="tls-dropdown"><a class="tls-link-dropdown">
<div class="tls-link-dropdown--text">Closed</div>
<div class="tls-link-dropdown--icon"><i class="fa fa-chevron-down"></i></div></a>
<div class="tls-dropdown--content hidden">
<div class="tls-dropdown--content hidden">Hidden content.</div>
</div>
</div>
</div>
<div class="tls-navbar--slot"><a class="tls-link-uppercase">My Uppercase Link</a></div>
<div class="tls-navbar--slot"><a class="tls-button-link">Button link</a></div>
</div>
<div class="tls-navbar--language">
<div class="tls-navbar--slot"><a class="tls-link-dropdown"><img class="tls-link-dropdown--flag" src="./flag-en.png"/>
<div class="tls-link-dropdown--text">Link</div>
<div class="tls-link-dropdown--icon"><i class="fa fa-chevron-down"></i></div></a></div>
</div>
<div class="tls-navbar--hamburger">
<div class="tls-hamburger -state-closed">
<div class="tls-hamburger--top-line"></div>
<div class="tls-hamburger--middle-line"></div>
<div class="tls-hamburger--bottom-line"></div>
</div>
</div>
</div>
</div>
<header class="tls-simple-banner">
<div class="tls-home-text-group">
<div class="tls-simple-text -color-white -size-22">Simple text<img class="tls-image" src="/atom/image/image.png"/>
</div>
<h1 class="tls-heading-1">Heading level 1</h1>
</div>
</header>
<div class="tls-checkout--card">
<div class="tls-large-card-info">
<div class="tls-card-lg">
<div class="tls-simple-text -size-16">
<p>lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur felis magna, lacinia ornare congue ornare, pharetra a leo. Suspendisse fermentum ut mi vel pulvinar. Maecenas gravida varius mauris, sed tempus risus pulvinar sed. In varius placerat erat in porttitor. Sed mollis est ligula, sit amet iaculis nulla rhoncus sed. Morbi quis felis et quam posuere sodales eget quis est. Integer congue faucibus nunc, rhoncus hendrerit massa lobortis sit amet. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
</div>
<div class="tls-simple-text -size-16">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur felis magna, lacinia ornare congue ornare, pharetra a leo. Suspendisse fermentum ut mi vel pulvinar. Maecenas gravida varius mauris, sed tempus risus pulvinar sed. In varius placerat erat in porttitor. Sed mollis est ligula, sit amet iaculis nulla rhoncus sed. Morbi quis felis et quam posuere sodales eget quis est. Integer congue faucibus nunc, rhoncus hendrerit massa lobortis sit amet. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
</div>
</div>
<div class="tls-large-card-info--decoration">
<div class="tls-decoration-vertical-lines -blue">
<div class="tls-line1"></div>
<div class="tls-line2"></div>
</div>
</div>
</div>
</div>
<div class="tls-checkout--content">
<div class="tls-checkout--heading">
<h2 class="tls-heading-2">Heading level 2</h2>
</div>
<div class="tls-checkout--info">
<div class="tls-simple-text">Last step is to confirm your appointment, 18th July 2019 at 9am
</div>
</div>
<div class="tls-checkout--avs">
<div class="tls-options">
<div class="tls-options-list">
<div class="tls-options--slot">
<div class="tls-option-item"><img class="tls-option-item--icon" src="/molecule/options/option-item/express-courier-return.png"/>
<div class="tls-option-item--content">
<div class="tls-option-item--content-wrapper">
<div class="tls-option-item--content-title">
<div class="tls-simple-text -color-main -weight-bold">Premium lounge
</div>
</div>
<div class="tls-option-item--content-description">
<div class="tls-simple-text">After your appointment, would you like to receive your passport via mail ?
</div>
</div>
<div class="tls-option-item--content-more">
<div class="tls-button-dynamic">
<div class="tls-button-dynamic--text">
<div class="tls-simple-text -color-primary -size-19">Simple Text
</div>
</div>
<div class="tls-button-dynamic--decoration">
<div class="tls-line1"></div>
<div class="tls-line2"></div>
</div>
</div>
</div>
<div class="tls-option-item--content-value">
<div class="tls-simple-text">Price: 35$
</div>
</div>
</div>
</div>
<div class="tls-option-item--action">
<button class="tls-button-success -uppercase">Validate this option
</button>
</div>
</div>
</div>
<div class="tls-options--slot">
<div class="tls-option-item"><img class="tls-option-item--icon" src="/molecule/options/option-item/express-courier-return.png"/>
<div class="tls-option-item--content">
<div class="tls-option-item--content-wrapper">
<div class="tls-option-item--content-title">
<div class="tls-simple-text -color-main -weight-bold">Premium lounge
</div>
</div>
<div class="tls-option-item--content-description">
<div class="tls-simple-text">After your appointment, would you like to receive your passport via mail ?
</div>
</div>
<div class="tls-option-item--content-more">
<div class="tls-button-dynamic">
<div class="tls-button-dynamic--text">
<div class="tls-simple-text -color-primary -size-19">Simple Text
</div>
</div>
<div class="tls-button-dynamic--decoration">
<div class="tls-line1"></div>
<div class="tls-line2"></div>
</div>
</div>
</div>
<div class="tls-option-item--content-value">
<div class="tls-simple-text">Price: 35$
</div>
</div>
</div>
</div>
<div class="tls-option-item--action">
<button class="tls-button-success -uppercase">Validate this option
</button>
</div>
</div>
</div>
<div class="tls-options--slot">
<div class="tls-option-item"><img class="tls-option-item--icon" src="/molecule/options/option-item/express-courier-return.png"/>
<div class="tls-option-item--content">
<div class="tls-option-item--content-wrapper">
<div class="tls-option-item--content-title">
<div class="tls-simple-text -color-main -weight-bold">Premium lounge
</div>
</div>
<div class="tls-option-item--content-description">
<div class="tls-simple-text">After your appointment, would you like to receive your passport via mail ?
</div>
</div>
<div class="tls-option-item--content-more">
<div class="tls-button-dynamic">
<div class="tls-button-dynamic--text">
<div class="tls-simple-text -color-primary -size-19">Simple Text
</div>
</div>
<div class="tls-button-dynamic--decoration">
<div class="tls-line1"></div>
<div class="tls-line2"></div>
</div>
</div>
</div>
<div class="tls-option-item--content-value">
<div class="tls-simple-text">Price: 35$
</div>
</div>
</div>
</div>
<div class="tls-option-item--action">
<button class="tls-button-success -uppercase">Validate this option
</button>
</div>
</div>
</div>
<div class="tls-options--slot">
<div class="tls-option-item"><img class="tls-option-item--icon" src="/molecule/options/option-item/express-courier-return.png"/>
<div class="tls-option-item--content">
<div class="tls-option-item--content-wrapper">
<div class="tls-option-item--content-title">
<div class="tls-simple-text -color-main -weight-bold">Premium lounge
</div>
</div>
<div class="tls-option-item--content-description">
<div class="tls-simple-text">After your appointment, would you like to receive your passport via mail ?
</div>
</div>
<div class="tls-option-item--content-more">
<div class="tls-button-dynamic">
<div class="tls-button-dynamic--text">
<div class="tls-simple-text -color-primary -size-19">Simple Text
</div>
</div>
<div class="tls-button-dynamic--decoration">
<div class="tls-line1"></div>
<div class="tls-line2"></div>
</div>
</div>
</div>
<div class="tls-option-item--content-value">
<div class="tls-simple-text">Price: 35$
</div>
</div>
</div>
</div>
<div class="tls-option-item--action">
<button class="tls-button-success -uppercase">Validate this option
</button>
</div>
</div>
</div>
</div>
<div class="tls-options--dropdown">
<div class="tls-option-dropdown">
<div class="tls-option-dropdown-title">
<div class="tls-simple-text -color-white">Show less
</div>
</div>
<div class="tls-option-dropdown-action">
<div class="tls-simple-text -color-white">-
</div>
</div>
</div>
</div>
</div>
</div>
<div class="tls-checkout--insurance">
<div class="tls-simple-text -size-19">Please subscribe to an insurance..
</div>
</div>
<div class="tls-checkout--summary">
<div class="tls-summary">
<div class="tls-summary-title">
<h1>Summary</h1>
</div>
<div class="tls-summary-list">
<div class="tls-summary-list--slot">
<div class="tls-summary-list-item">
<div class="tls-summary-list-item--title">
<div class="tls-simple-text">Summary item
</div>
</div>
<div class="tls-summary-list-item--end">
<div class="tls-summary-list-item--value">
<div class="tls-simple-text">XX €
</div>
</div>
<div class="tls-summary-list-item--action">
<div class="tls-simple-text">-
</div>
</div>
</div>
</div>
</div>
<div class="tls-summary-list--slot">
<div class="tls-summary-list-item">
<div class="tls-summary-list-item--title">
<div class="tls-simple-text">Summary item
</div>
</div>
<div class="tls-summary-list-item--end">
<div class="tls-summary-list-item--value">
<div class="tls-simple-text">XX €
</div>
</div>
<div class="tls-summary-list-item--action">
<div class="tls-simple-text">-
</div>
</div>
</div>
</div>
</div>
<div class="tls-summary-list--slot">
<div class="tls-summary-list-item">
<div class="tls-summary-list-item--title">
<div class="tls-simple-text">Summary item
</div>
</div>
<div class="tls-summary-list-item--end">
<div class="tls-summary-list-item--value">
<div class="tls-simple-text">XX €
</div>
</div>
<div class="tls-summary-list-item--action">
<div class="tls-simple-text">-
</div>
</div>
</div>
</div>
</div>
</div>
<div class="tls-summary-horizontal-separator"></div>
<div class="tls-summary-sublist">
<div class="tls-summary-sublist--slot">
<div class="tls-summary-sublist-item">
<div class="tls-summary-sublist-item--title">
<div class="tls-simple-text">Sublist item
</div>
</div>
<div class="tls-summary-sublist-item--value">
<div class="tls-simple-text">XX €
</div>
</div>
</div>
</div>
<div class="tls-summary-sublist--slot">
<div class="tls-summary-sublist-item">
<div class="tls-summary-sublist-item--title">
<div class="tls-simple-text">Sublist item
</div>
</div>
<div class="tls-summary-sublist-item--value">
<div class="tls-simple-text">XX €
</div>
</div>
</div>
</div>
</div>
<div class="tls-summary-total">
<div class="tls-summary-total-content">
<div class="tls-summary-total--title">
<div class="tls-simple-text -color-white">Total
</div>
</div>
<div class="tls-summary-total--value">
<div class="tls-simple-text -color-white">XX €
</div>
</div>
</div>
</div>
</div>
</div>
<div class="tls-checkout--action"><a class="tls-button-link">Button link</a>
<button class="tls-button-primary -uppercase">Confirm my appointment
</button>
</div>
</div>
<div class="tls-footer">
<div class="tls-footer-links">
<div class="tls-footer-links--slot">
<div class="tls-footer-links--title">
<div class="tls-simple-text -color-white -weight-bold">Tls links
</div>
</div>
<div class="tls-footer-links--list">
<ul class="tls-link-list">
<li class="tls-link-list--slot"><a class="tls-link">My Link</a></li>
<li class="tls-link-list--slot"><a class="tls-link">My Link</a></li>
</ul>
</div>
</div>
<div class="tls-footer-links--slot">
<div class="tls-footer-links--title">
<div class="tls-simple-text -color-white -weight-bold">Tls links
</div>
</div>
<div class="tls-footer-links--list">
<ul class="tls-link-list">
<li class="tls-link-list--slot"><a class="tls-link">My Link</a></li>
<li class="tls-link-list--slot"><a class="tls-link">My Link</a></li>
</ul>
</div>
</div>
<div class="tls-footer-links--slot">
<div class="tls-footer-links--title">
<div class="tls-simple-text -color-white -weight-bold">Tls links
</div>
</div>
<div class="tls-footer-links--list">
<ul class="tls-link-list">
<li class="tls-link-list--slot"><a class="tls-link">My Link</a></li>
<li class="tls-link-list--slot"><a class="tls-link">My Link</a></li>
</ul>
</div>
</div>
<div class="tls-footer-links--slot">
<div class="tls-footer-links--title">
<div class="tls-simple-text -color-white -weight-bold">Tls links
</div>
</div>
<div class="tls-footer-links--list">
<ul class="tls-link-list">
<li class="tls-link-list--slot"><a class="tls-link">My Link</a></li>
<li class="tls-link-list--slot"><a class="tls-link">My Link</a></li>
</ul>
</div>
</div>
</div>
<div class="tls-footer-line"></div>
<div class="tls-footer-content">
<div class="tls-footer--slot"><a class="tls-logo" href="#"><img class="tls-logo--img" src="/atom/logo/logo/logo.svg"/></a></div>
<div class="tls-footer--slot tls-sm-visible">
<div class="tls-simple-text -color-white -size-12">© 2019 TLScontact. Tous droits réservés.
</div>
</div>
<div class="tls-footer--slot tls-sm-visible">
<div class="tls-social-logo-group">
<div class="tls-social-logo-group--slot"><a class="tls-social-logo" href="#"><i class="fab fa-linkedin-in tls-social-logo--icon"></i></a></div>
<div class="tls-social-logo-group--slot"><a class="tls-social-logo" href="#"><i class="fab fa-linkedin-in tls-social-logo--icon"></i></a></div>
</div>
</div>
<div class="tls-footer--slot"><a class="tls-logo" href="#"><img class="tls-logo--img" src="/atom/logo/logo/logo.svg"/></a></div>
</div>
</div>
</div>.tls-checkout
.tls-navbar
.tls-navbar--content
.tls-navbar--logo
a.tls-logo(href='#')
img.tls-logo--img(src='/atom/logo/logo/logo.svg')
.tls-navbar--links.-opened
.tls-navbar--slot
.tls-dropdown
a.tls-link-dropdown
.tls-link-dropdown--text Opened
.tls-link-dropdown--icon
i.fa.fa-chevron-up
.tls-dropdown--content
.tls-dropdown--content
.tls-dropdown-list
.tls-dropdown-list--slot
a.tls-dropdown-text My dropdown text
.tls-dropdown-list--slot
.tls-dropdown-text A longer text to see the difference
.tls-navbar--slot
.tls-dropdown
a.tls-link-dropdown
.tls-link-dropdown--text Closed
.tls-link-dropdown--icon
i.fa.fa-chevron-down
.tls-dropdown--content.hidden
.tls-dropdown--content.hidden Hidden content.
.tls-navbar--slot
a.tls-link-uppercase My Uppercase Link
.tls-navbar--slot
a.tls-button-link Button link
.tls-navbar--language
.tls-navbar--slot
a.tls-link-dropdown
img.tls-link-dropdown--flag(src='./flag-en.png')
.tls-link-dropdown--text Link
.tls-link-dropdown--icon
i.fa.fa-chevron-down
.tls-navbar--hamburger
.tls-hamburger.-state-closed
.tls-hamburger--top-line
.tls-hamburger--middle-line
.tls-hamburger--bottom-line
header.tls-simple-banner
.tls-home-text-group
.tls-simple-text.-color-white.-size-22
| Simple text
img.tls-image(src='/atom/image/image.png')
h1.tls-heading-1 Heading level 1
.tls-checkout--card
.tls-large-card-info
.tls-card-lg
.tls-simple-text.-size-16
p lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur felis magna, lacinia ornare congue ornare, pharetra a leo. Suspendisse fermentum ut mi vel pulvinar. Maecenas gravida varius mauris, sed tempus risus pulvinar sed. In varius placerat erat in porttitor. Sed mollis est ligula, sit amet iaculis nulla rhoncus sed. Morbi quis felis et quam posuere sodales eget quis est. Integer congue faucibus nunc, rhoncus hendrerit massa lobortis sit amet. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
.tls-simple-text.-size-16
p Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur felis magna, lacinia ornare congue ornare, pharetra a leo. Suspendisse fermentum ut mi vel pulvinar. Maecenas gravida varius mauris, sed tempus risus pulvinar sed. In varius placerat erat in porttitor. Sed mollis est ligula, sit amet iaculis nulla rhoncus sed. Morbi quis felis et quam posuere sodales eget quis est. Integer congue faucibus nunc, rhoncus hendrerit massa lobortis sit amet. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
.tls-large-card-info--decoration
.tls-decoration-vertical-lines.-blue
.tls-line1
.tls-line2
.tls-checkout--content
.tls-checkout--heading
h2.tls-heading-2 Heading level 2
.tls-checkout--info
.tls-simple-text.
Last step is to confirm your appointment, 18th July 2019 at 9am
.tls-checkout--avs
.tls-options
.tls-options-list
.tls-options--slot
.tls-option-item
img.tls-option-item--icon(src='/molecule/options/option-item/express-courier-return.png')
.tls-option-item--content
.tls-option-item--content-wrapper
.tls-option-item--content-title
.tls-simple-text.-color-main.-weight-bold.
Premium lounge
.tls-option-item--content-description
.tls-simple-text.
After your appointment, would you like to receive your passport via mail ?
.tls-option-item--content-more
.tls-button-dynamic
.tls-button-dynamic--text
.tls-simple-text.-color-primary.-size-19.
Simple Text
.tls-button-dynamic--decoration
.tls-line1
.tls-line2
.tls-option-item--content-value
.tls-simple-text.
Price: 35$
.tls-option-item--action
button.tls-button-success.-uppercase.
Validate this option
.tls-options--slot
.tls-option-item
img.tls-option-item--icon(src='/molecule/options/option-item/express-courier-return.png')
.tls-option-item--content
.tls-option-item--content-wrapper
.tls-option-item--content-title
.tls-simple-text.-color-main.-weight-bold.
Premium lounge
.tls-option-item--content-description
.tls-simple-text.
After your appointment, would you like to receive your passport via mail ?
.tls-option-item--content-more
.tls-button-dynamic
.tls-button-dynamic--text
.tls-simple-text.-color-primary.-size-19.
Simple Text
.tls-button-dynamic--decoration
.tls-line1
.tls-line2
.tls-option-item--content-value
.tls-simple-text.
Price: 35$
.tls-option-item--action
button.tls-button-success.-uppercase.
Validate this option
.tls-options--slot
.tls-option-item
img.tls-option-item--icon(src='/molecule/options/option-item/express-courier-return.png')
.tls-option-item--content
.tls-option-item--content-wrapper
.tls-option-item--content-title
.tls-simple-text.-color-main.-weight-bold.
Premium lounge
.tls-option-item--content-description
.tls-simple-text.
After your appointment, would you like to receive your passport via mail ?
.tls-option-item--content-more
.tls-button-dynamic
.tls-button-dynamic--text
.tls-simple-text.-color-primary.-size-19.
Simple Text
.tls-button-dynamic--decoration
.tls-line1
.tls-line2
.tls-option-item--content-value
.tls-simple-text.
Price: 35$
.tls-option-item--action
button.tls-button-success.-uppercase.
Validate this option
.tls-options--slot
.tls-option-item
img.tls-option-item--icon(src='/molecule/options/option-item/express-courier-return.png')
.tls-option-item--content
.tls-option-item--content-wrapper
.tls-option-item--content-title
.tls-simple-text.-color-main.-weight-bold.
Premium lounge
.tls-option-item--content-description
.tls-simple-text.
After your appointment, would you like to receive your passport via mail ?
.tls-option-item--content-more
.tls-button-dynamic
.tls-button-dynamic--text
.tls-simple-text.-color-primary.-size-19.
Simple Text
.tls-button-dynamic--decoration
.tls-line1
.tls-line2
.tls-option-item--content-value
.tls-simple-text.
Price: 35$
.tls-option-item--action
button.tls-button-success.-uppercase.
Validate this option
.tls-options--dropdown
.tls-option-dropdown
.tls-option-dropdown-title
.tls-simple-text.-color-white.
Show less
.tls-option-dropdown-action
.tls-simple-text.-color-white.
-
.tls-checkout--insurance
.tls-simple-text.-size-19.
Please subscribe to an insurance..
.tls-checkout--summary
.tls-summary
.tls-summary-title
h1 Summary
.tls-summary-list
.tls-summary-list--slot
.tls-summary-list-item
.tls-summary-list-item--title
.tls-simple-text.
Summary item
.tls-summary-list-item--end
.tls-summary-list-item--value
.tls-simple-text.
XX €
.tls-summary-list-item--action
.tls-simple-text.
-
.tls-summary-list--slot
.tls-summary-list-item
.tls-summary-list-item--title
.tls-simple-text.
Summary item
.tls-summary-list-item--end
.tls-summary-list-item--value
.tls-simple-text.
XX €
.tls-summary-list-item--action
.tls-simple-text.
-
.tls-summary-list--slot
.tls-summary-list-item
.tls-summary-list-item--title
.tls-simple-text.
Summary item
.tls-summary-list-item--end
.tls-summary-list-item--value
.tls-simple-text.
XX €
.tls-summary-list-item--action
.tls-simple-text.
-
.tls-summary-horizontal-separator
.tls-summary-sublist
.tls-summary-sublist--slot
.tls-summary-sublist-item
.tls-summary-sublist-item--title
.tls-simple-text.
Sublist item
.tls-summary-sublist-item--value
.tls-simple-text.
XX €
.tls-summary-sublist--slot
.tls-summary-sublist-item
.tls-summary-sublist-item--title
.tls-simple-text.
Sublist item
.tls-summary-sublist-item--value
.tls-simple-text.
XX €
.tls-summary-total
.tls-summary-total-content
.tls-summary-total--title
.tls-simple-text.-color-white.
Total
.tls-summary-total--value
.tls-simple-text.-color-white.
XX €
.tls-checkout--action
a.tls-button-link Button link
button.tls-button-primary.-uppercase.
Confirm my appointment
.tls-footer
.tls-footer-links
.tls-footer-links--slot
.tls-footer-links--title
.tls-simple-text.-color-white.-weight-bold.
Tls links
.tls-footer-links--list
ul.tls-link-list
li.tls-link-list--slot
a.tls-link My Link
li.tls-link-list--slot
a.tls-link My Link
.tls-footer-links--slot
.tls-footer-links--title
.tls-simple-text.-color-white.-weight-bold.
Tls links
.tls-footer-links--list
ul.tls-link-list
li.tls-link-list--slot
a.tls-link My Link
li.tls-link-list--slot
a.tls-link My Link
.tls-footer-links--slot
.tls-footer-links--title
.tls-simple-text.-color-white.-weight-bold.
Tls links
.tls-footer-links--list
ul.tls-link-list
li.tls-link-list--slot
a.tls-link My Link
li.tls-link-list--slot
a.tls-link My Link
.tls-footer-links--slot
.tls-footer-links--title
.tls-simple-text.-color-white.-weight-bold.
Tls links
.tls-footer-links--list
ul.tls-link-list
li.tls-link-list--slot
a.tls-link My Link
li.tls-link-list--slot
a.tls-link My Link
.tls-footer-line
.tls-footer-content
.tls-footer--slot
a.tls-logo(href='#')
img.tls-logo--img(src='/atom/logo/logo/logo.svg')
.tls-footer--slot.tls-sm-visible
.tls-simple-text.-color-white.-size-12.
© 2019 TLScontact. Tous droits réservés.
.tls-footer--slot.tls-sm-visible
.tls-social-logo-group
.tls-social-logo-group--slot
a.tls-social-logo(href='#')
i.fab.fa-linkedin-in.tls-social-logo--icon
.tls-social-logo-group--slot
a.tls-social-logo(href='#')
i.fab.fa-linkedin-in.tls-social-logo--icon
.tls-footer--slot
a.tls-logo(href='#')
img.tls-logo--img(src='/atom/logo/logo/logo.svg')Checkout confirm
<div class="tls-checkout-confirm">
<div class="tls-navbar">
<div class="tls-navbar--content">
<div class="tls-navbar--logo"><a class="tls-logo" href="#"><img class="tls-logo--img" src="/atom/logo/logo/logo.svg"/></a></div>
<div class="tls-navbar--links -opened">
<div class="tls-navbar--slot">
<div class="tls-dropdown"><a class="tls-link-dropdown">
<div class="tls-link-dropdown--text">Opened</div>
<div class="tls-link-dropdown--icon"><i class="fa fa-chevron-up"></i></div></a>
<div class="tls-dropdown--content">
<div class="tls-dropdown--content">
<div class="tls-dropdown-list">
<div class="tls-dropdown-list--slot"><a class="tls-dropdown-text">My dropdown text</a></div>
<div class="tls-dropdown-list--slot">
<div class="tls-dropdown-text">A longer text to see the difference</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="tls-navbar--slot">
<div class="tls-dropdown"><a class="tls-link-dropdown">
<div class="tls-link-dropdown--text">Closed</div>
<div class="tls-link-dropdown--icon"><i class="fa fa-chevron-down"></i></div></a>
<div class="tls-dropdown--content hidden">
<div class="tls-dropdown--content hidden">Hidden content.</div>
</div>
</div>
</div>
<div class="tls-navbar--slot"><a class="tls-link-uppercase">My Uppercase Link</a></div>
<div class="tls-navbar--slot"><a class="tls-button-link">Button link</a></div>
</div>
<div class="tls-navbar--language">
<div class="tls-navbar--slot"><a class="tls-link-dropdown"><img class="tls-link-dropdown--flag" src="./flag-en.png"/>
<div class="tls-link-dropdown--text">Link</div>
<div class="tls-link-dropdown--icon"><i class="fa fa-chevron-down"></i></div></a></div>
</div>
<div class="tls-navbar--hamburger">
<div class="tls-hamburger -state-closed">
<div class="tls-hamburger--top-line"></div>
<div class="tls-hamburger--middle-line"></div>
<div class="tls-hamburger--bottom-line"></div>
</div>
</div>
</div>
</div>
<header class="tls-simple-banner">
<div class="tls-home-text-group">
<div class="tls-simple-text -color-white -size-22">Simple text<img class="tls-image" src="/atom/image/image.png"/>
</div>
<h1 class="tls-heading-1">Heading level 1</h1>
</div>
</header>
<div class="tls-checkout-confirm--card">
<div class="tls-large-card-info">
<div class="tls-card-lg">
<div class="tls-simple-text -size-16">
<p>lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur felis magna, lacinia ornare congue ornare, pharetra a leo. Suspendisse fermentum ut mi vel pulvinar. Maecenas gravida varius mauris, sed tempus risus pulvinar sed. In varius placerat erat in porttitor. Sed mollis est ligula, sit amet iaculis nulla rhoncus sed. Morbi quis felis et quam posuere sodales eget quis est. Integer congue faucibus nunc, rhoncus hendrerit massa lobortis sit amet. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
</div>
<div class="tls-simple-text -size-16">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur felis magna, lacinia ornare congue ornare, pharetra a leo. Suspendisse fermentum ut mi vel pulvinar. Maecenas gravida varius mauris, sed tempus risus pulvinar sed. In varius placerat erat in porttitor. Sed mollis est ligula, sit amet iaculis nulla rhoncus sed. Morbi quis felis et quam posuere sodales eget quis est. Integer congue faucibus nunc, rhoncus hendrerit massa lobortis sit amet. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
</div>
</div>
<div class="tls-large-card-info--decoration">
<div class="tls-decoration-vertical-lines -blue">
<div class="tls-line1"></div>
<div class="tls-line2"></div>
</div>
</div>
</div>
</div>
<div class="tls-checkout-confirm--content">
<div class="tls-checkout-confirm--heading">
<h2 class="tls-heading-2">Heading level 2</h2>
</div>
<div class="tls-checkout-confirm--info">
<div class="tls-simple-text">We're happy to meet you in your application center in Alger, 18th July 2019 at 9am
</div>
</div>
<div class="tls-checkout-confirm--documents">
<div class="tls-checkout-confirm-documents--info">
<div class="tls-simple-text -color-main -weight-bold">Here is the list of document you will have to provide for your appointment:
</div>
</div>
<ul class="tls-checkout-confirm-documents--list">
<li class="tls-checkout-confirm-documents-list--item">
<div>Document 1</div>
</li>
<li class="tls-checkout-confirm-documents-list--item">
<div>Document 2</div>
</li>
<li class="tls-checkout-confirm-documents-list--item">
<div>Document 3</div>
</li>
<li class="tls-checkout-confirm-documents-list--item">
<div>Document 4</div>
</li>
</ul>
</div>
<div class="tls-checkout-confirm--insurance">
<div class="tls-simple-text">We remind you that you have to subscribe to an insurance..
</div>
</div>
<div class="tls-checkout-confirm--summary">
<div class="tls-summary">
<div class="tls-summary-title">
<h1>Summary</h1>
</div>
<div class="tls-summary-list">
<div class="tls-summary-list--slot">
<div class="tls-summary-list-item">
<div class="tls-summary-list-item--title">
<div class="tls-simple-text">Summary item
</div>
</div>
<div class="tls-summary-list-item--end">
<div class="tls-summary-list-item--value">
<div class="tls-simple-text">XX €
</div>
</div>
<div class="tls-summary-list-item--action">
<div class="tls-simple-text">-
</div>
</div>
</div>
</div>
</div>
<div class="tls-summary-list--slot">
<div class="tls-summary-list-item">
<div class="tls-summary-list-item--title">
<div class="tls-simple-text">Summary item
</div>
</div>
<div class="tls-summary-list-item--end">
<div class="tls-summary-list-item--value">
<div class="tls-simple-text">XX €
</div>
</div>
<div class="tls-summary-list-item--action">
<div class="tls-simple-text">-
</div>
</div>
</div>
</div>
</div>
<div class="tls-summary-list--slot">
<div class="tls-summary-list-item">
<div class="tls-summary-list-item--title">
<div class="tls-simple-text">Summary item
</div>
</div>
<div class="tls-summary-list-item--end">
<div class="tls-summary-list-item--value">
<div class="tls-simple-text">XX €
</div>
</div>
<div class="tls-summary-list-item--action">
<div class="tls-simple-text">-
</div>
</div>
</div>
</div>
</div>
</div>
<div class="tls-summary-horizontal-separator"></div>
<div class="tls-summary-sublist">
<div class="tls-summary-sublist--slot">
<div class="tls-summary-sublist-item">
<div class="tls-summary-sublist-item--title">
<div class="tls-simple-text">Sublist item
</div>
</div>
<div class="tls-summary-sublist-item--value">
<div class="tls-simple-text">XX €
</div>
</div>
</div>
</div>
<div class="tls-summary-sublist--slot">
<div class="tls-summary-sublist-item">
<div class="tls-summary-sublist-item--title">
<div class="tls-simple-text">Sublist item
</div>
</div>
<div class="tls-summary-sublist-item--value">
<div class="tls-simple-text">XX €
</div>
</div>
</div>
</div>
</div>
<div class="tls-summary-total">
<div class="tls-summary-total-content">
<div class="tls-summary-total--title">
<div class="tls-simple-text -color-white">Total
</div>
</div>
<div class="tls-summary-total--value">
<div class="tls-simple-text -color-white">XX €
</div>
</div>
</div>
</div>
</div>
</div>
<div class="tls-checkout-confirm--footer">
<h2 class="tls-heading-2">Heading level 2</h2>
</div>
</div>
<div class="tls-footer">
<div class="tls-footer-links">
<div class="tls-footer-links--slot">
<div class="tls-footer-links--title">
<div class="tls-simple-text -color-white -weight-bold">Tls links
</div>
</div>
<div class="tls-footer-links--list">
<ul class="tls-link-list">
<li class="tls-link-list--slot"><a class="tls-link">My Link</a></li>
<li class="tls-link-list--slot"><a class="tls-link">My Link</a></li>
</ul>
</div>
</div>
<div class="tls-footer-links--slot">
<div class="tls-footer-links--title">
<div class="tls-simple-text -color-white -weight-bold">Tls links
</div>
</div>
<div class="tls-footer-links--list">
<ul class="tls-link-list">
<li class="tls-link-list--slot"><a class="tls-link">My Link</a></li>
<li class="tls-link-list--slot"><a class="tls-link">My Link</a></li>
</ul>
</div>
</div>
<div class="tls-footer-links--slot">
<div class="tls-footer-links--title">
<div class="tls-simple-text -color-white -weight-bold">Tls links
</div>
</div>
<div class="tls-footer-links--list">
<ul class="tls-link-list">
<li class="tls-link-list--slot"><a class="tls-link">My Link</a></li>
<li class="tls-link-list--slot"><a class="tls-link">My Link</a></li>
</ul>
</div>
</div>
<div class="tls-footer-links--slot">
<div class="tls-footer-links--title">
<div class="tls-simple-text -color-white -weight-bold">Tls links
</div>
</div>
<div class="tls-footer-links--list">
<ul class="tls-link-list">
<li class="tls-link-list--slot"><a class="tls-link">My Link</a></li>
<li class="tls-link-list--slot"><a class="tls-link">My Link</a></li>
</ul>
</div>
</div>
</div>
<div class="tls-footer-line"></div>
<div class="tls-footer-content">
<div class="tls-footer--slot"><a class="tls-logo" href="#"><img class="tls-logo--img" src="/atom/logo/logo/logo.svg"/></a></div>
<div class="tls-footer--slot tls-sm-visible">
<div class="tls-simple-text -color-white -size-12">© 2019 TLScontact. Tous droits réservés.
</div>
</div>
<div class="tls-footer--slot tls-sm-visible">
<div class="tls-social-logo-group">
<div class="tls-social-logo-group--slot"><a class="tls-social-logo" href="#"><i class="fab fa-linkedin-in tls-social-logo--icon"></i></a></div>
<div class="tls-social-logo-group--slot"><a class="tls-social-logo" href="#"><i class="fab fa-linkedin-in tls-social-logo--icon"></i></a></div>
</div>
</div>
<div class="tls-footer--slot"><a class="tls-logo" href="#"><img class="tls-logo--img" src="/atom/logo/logo/logo.svg"/></a></div>
</div>
</div>
</div>.tls-checkout-confirm
.tls-navbar
.tls-navbar--content
.tls-navbar--logo
a.tls-logo(href='#')
img.tls-logo--img(src='/atom/logo/logo/logo.svg')
.tls-navbar--links.-opened
.tls-navbar--slot
.tls-dropdown
a.tls-link-dropdown
.tls-link-dropdown--text Opened
.tls-link-dropdown--icon
i.fa.fa-chevron-up
.tls-dropdown--content
.tls-dropdown--content
.tls-dropdown-list
.tls-dropdown-list--slot
a.tls-dropdown-text My dropdown text
.tls-dropdown-list--slot
.tls-dropdown-text A longer text to see the difference
.tls-navbar--slot
.tls-dropdown
a.tls-link-dropdown
.tls-link-dropdown--text Closed
.tls-link-dropdown--icon
i.fa.fa-chevron-down
.tls-dropdown--content.hidden
.tls-dropdown--content.hidden Hidden content.
.tls-navbar--slot
a.tls-link-uppercase My Uppercase Link
.tls-navbar--slot
a.tls-button-link Button link
.tls-navbar--language
.tls-navbar--slot
a.tls-link-dropdown
img.tls-link-dropdown--flag(src='./flag-en.png')
.tls-link-dropdown--text Link
.tls-link-dropdown--icon
i.fa.fa-chevron-down
.tls-navbar--hamburger
.tls-hamburger.-state-closed
.tls-hamburger--top-line
.tls-hamburger--middle-line
.tls-hamburger--bottom-line
header.tls-simple-banner
.tls-home-text-group
.tls-simple-text.-color-white.-size-22
| Simple text
img.tls-image(src='/atom/image/image.png')
h1.tls-heading-1 Heading level 1
.tls-checkout-confirm--card
.tls-large-card-info
.tls-card-lg
.tls-simple-text.-size-16
p lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur felis magna, lacinia ornare congue ornare, pharetra a leo. Suspendisse fermentum ut mi vel pulvinar. Maecenas gravida varius mauris, sed tempus risus pulvinar sed. In varius placerat erat in porttitor. Sed mollis est ligula, sit amet iaculis nulla rhoncus sed. Morbi quis felis et quam posuere sodales eget quis est. Integer congue faucibus nunc, rhoncus hendrerit massa lobortis sit amet. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
.tls-simple-text.-size-16
p Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur felis magna, lacinia ornare congue ornare, pharetra a leo. Suspendisse fermentum ut mi vel pulvinar. Maecenas gravida varius mauris, sed tempus risus pulvinar sed. In varius placerat erat in porttitor. Sed mollis est ligula, sit amet iaculis nulla rhoncus sed. Morbi quis felis et quam posuere sodales eget quis est. Integer congue faucibus nunc, rhoncus hendrerit massa lobortis sit amet. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
.tls-large-card-info--decoration
.tls-decoration-vertical-lines.-blue
.tls-line1
.tls-line2
.tls-checkout-confirm--content
.tls-checkout-confirm--heading
h2.tls-heading-2 Heading level 2
.tls-checkout-confirm--info
.tls-simple-text.
We're happy to meet you in your application center in Alger, 18th July 2019 at 9am
.tls-checkout-confirm--documents
.tls-checkout-confirm-documents--info
.tls-simple-text.-color-main.-weight-bold.
Here is the list of document you will have to provide for your appointment:
ul.tls-checkout-confirm-documents--list
li.tls-checkout-confirm-documents-list--item
div Document 1
li.tls-checkout-confirm-documents-list--item
div Document 2
li.tls-checkout-confirm-documents-list--item
div Document 3
li.tls-checkout-confirm-documents-list--item
div Document 4
.tls-checkout-confirm--insurance
.tls-simple-text.
We remind you that you have to subscribe to an insurance..
.tls-checkout-confirm--summary
.tls-summary
.tls-summary-title
h1 Summary
.tls-summary-list
.tls-summary-list--slot
.tls-summary-list-item
.tls-summary-list-item--title
.tls-simple-text.
Summary item
.tls-summary-list-item--end
.tls-summary-list-item--value
.tls-simple-text.
XX €
.tls-summary-list-item--action
.tls-simple-text.
-
.tls-summary-list--slot
.tls-summary-list-item
.tls-summary-list-item--title
.tls-simple-text.
Summary item
.tls-summary-list-item--end
.tls-summary-list-item--value
.tls-simple-text.
XX €
.tls-summary-list-item--action
.tls-simple-text.
-
.tls-summary-list--slot
.tls-summary-list-item
.tls-summary-list-item--title
.tls-simple-text.
Summary item
.tls-summary-list-item--end
.tls-summary-list-item--value
.tls-simple-text.
XX €
.tls-summary-list-item--action
.tls-simple-text.
-
.tls-summary-horizontal-separator
.tls-summary-sublist
.tls-summary-sublist--slot
.tls-summary-sublist-item
.tls-summary-sublist-item--title
.tls-simple-text.
Sublist item
.tls-summary-sublist-item--value
.tls-simple-text.
XX €
.tls-summary-sublist--slot
.tls-summary-sublist-item
.tls-summary-sublist-item--title
.tls-simple-text.
Sublist item
.tls-summary-sublist-item--value
.tls-simple-text.
XX €
.tls-summary-total
.tls-summary-total-content
.tls-summary-total--title
.tls-simple-text.-color-white.
Total
.tls-summary-total--value
.tls-simple-text.-color-white.
XX €
.tls-checkout-confirm--footer
h2.tls-heading-2 Heading level 2
.tls-footer
.tls-footer-links
.tls-footer-links--slot
.tls-footer-links--title
.tls-simple-text.-color-white.-weight-bold.
Tls links
.tls-footer-links--list
ul.tls-link-list
li.tls-link-list--slot
a.tls-link My Link
li.tls-link-list--slot
a.tls-link My Link
.tls-footer-links--slot
.tls-footer-links--title
.tls-simple-text.-color-white.-weight-bold.
Tls links
.tls-footer-links--list
ul.tls-link-list
li.tls-link-list--slot
a.tls-link My Link
li.tls-link-list--slot
a.tls-link My Link
.tls-footer-links--slot
.tls-footer-links--title
.tls-simple-text.-color-white.-weight-bold.
Tls links
.tls-footer-links--list
ul.tls-link-list
li.tls-link-list--slot
a.tls-link My Link
li.tls-link-list--slot
a.tls-link My Link
.tls-footer-links--slot
.tls-footer-links--title
.tls-simple-text.-color-white.-weight-bold.
Tls links
.tls-footer-links--list
ul.tls-link-list
li.tls-link-list--slot
a.tls-link My Link
li.tls-link-list--slot
a.tls-link My Link
.tls-footer-line
.tls-footer-content
.tls-footer--slot
a.tls-logo(href='#')
img.tls-logo--img(src='/atom/logo/logo/logo.svg')
.tls-footer--slot.tls-sm-visible
.tls-simple-text.-color-white.-size-12.
© 2019 TLScontact. Tous droits réservés.
.tls-footer--slot.tls-sm-visible
.tls-social-logo-group
.tls-social-logo-group--slot
a.tls-social-logo(href='#')
i.fab.fa-linkedin-in.tls-social-logo--icon
.tls-social-logo-group--slot
a.tls-social-logo(href='#')
i.fab.fa-linkedin-in.tls-social-logo--icon
.tls-footer--slot
a.tls-logo(href='#')
img.tls-logo--img(src='/atom/logo/logo/logo.svg')FAQ
<div class="tls-faq">
<div class="tls-navbar">
<div class="tls-navbar--content">
<div class="tls-navbar--logo"><a class="tls-logo" href="#"><img class="tls-logo--img" src="/atom/logo/logo/logo.svg"/></a></div>
<div class="tls-navbar--links -opened">
<div class="tls-navbar--slot">
<div class="tls-dropdown"><a class="tls-link-dropdown">
<div class="tls-link-dropdown--text">Opened</div>
<div class="tls-link-dropdown--icon"><i class="fa fa-chevron-up"></i></div></a>
<div class="tls-dropdown--content">
<div class="tls-dropdown--content">
<div class="tls-dropdown-list">
<div class="tls-dropdown-list--slot"><a class="tls-dropdown-text">My dropdown text</a></div>
<div class="tls-dropdown-list--slot">
<div class="tls-dropdown-text">A longer text to see the difference</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="tls-navbar--slot">
<div class="tls-dropdown"><a class="tls-link-dropdown">
<div class="tls-link-dropdown--text">Closed</div>
<div class="tls-link-dropdown--icon"><i class="fa fa-chevron-down"></i></div></a>
<div class="tls-dropdown--content hidden">
<div class="tls-dropdown--content hidden">Hidden content.</div>
</div>
</div>
</div>
<div class="tls-navbar--slot"><a class="tls-link-uppercase">My Uppercase Link</a></div>
<div class="tls-navbar--slot"><a class="tls-button-link">Button link</a></div>
</div>
<div class="tls-navbar--language">
<div class="tls-navbar--slot"><a class="tls-link-dropdown"><img class="tls-link-dropdown--flag" src="./flag-en.png"/>
<div class="tls-link-dropdown--text">Link</div>
<div class="tls-link-dropdown--icon"><i class="fa fa-chevron-down"></i></div></a></div>
</div>
<div class="tls-navbar--hamburger">
<div class="tls-hamburger -state-closed">
<div class="tls-hamburger--top-line"></div>
<div class="tls-hamburger--middle-line"></div>
<div class="tls-hamburger--bottom-line"></div>
</div>
</div>
</div>
</div>
<header class="tls-simple-banner">
<div class="tls-home-text-group">
<div class="tls-simple-text -color-white -size-22">Simple text<img class="tls-image" src="/atom/image/image.png"/>
</div>
<h1 class="tls-heading-1">Heading level 1</h1>
</div>
</header>
<div class="tls-faq-content">
<div class="tls-large-card-info">
<div class="tls-card-lg">
<div class="tls-simple-text -size-16">
<p>lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur felis magna, lacinia ornare congue ornare, pharetra a leo. Suspendisse fermentum ut mi vel pulvinar. Maecenas gravida varius mauris, sed tempus risus pulvinar sed. In varius placerat erat in porttitor. Sed mollis est ligula, sit amet iaculis nulla rhoncus sed. Morbi quis felis et quam posuere sodales eget quis est. Integer congue faucibus nunc, rhoncus hendrerit massa lobortis sit amet. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
</div>
<div class="tls-simple-text -size-16">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur felis magna, lacinia ornare congue ornare, pharetra a leo. Suspendisse fermentum ut mi vel pulvinar. Maecenas gravida varius mauris, sed tempus risus pulvinar sed. In varius placerat erat in porttitor. Sed mollis est ligula, sit amet iaculis nulla rhoncus sed. Morbi quis felis et quam posuere sodales eget quis est. Integer congue faucibus nunc, rhoncus hendrerit massa lobortis sit amet. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
</div>
</div>
<div class="tls-large-card-info--decoration">
<div class="tls-decoration-vertical-lines -blue">
<div class="tls-line1"></div>
<div class="tls-line2"></div>
</div>
</div>
</div>
<div class="tls-faq-action">
<div class="tls-faq-action--slot">
<h2 class="tls-heading-2">Heading level 2</h2>
</div>
<div class="tls-faq-action--slot">
<button class="tls-button-primary">Button
</button>
</div>
<div class="tls-faq-action--slot">
<h2 class="tls-heading-2">Heading level 2</h2>
</div>
<div class="tls-faq-action--slot">
<div class="tls-faq-action-text">
<ul class="tls-link-list">
<li class="tls-link-list--slot"><a class="tls-link">My Link</a></li>
<li class="tls-link-list--slot"><a class="tls-link">My Link</a></li>
</ul>
</div>
</div>
</div>
<div class="tls-faq-info">
<h2 class="tls-heading-2">Tab title example</h2>
<div class="tls-simple-text -size-16">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur felis magna, lacinia ornare congue ornare, pharetra a leo. Suspendisse fermentum ut mi vel pulvinar. Maecenas gravida varius mauris, sed tempus risus pulvinar sed. In varius placerat erat in porttitor. Sed mollis est ligula, sit amet iaculis nulla rhoncus sed. Morbi quis felis et quam posuere sodales eget quis est. Integer congue faucibus nunc, rhoncus hendrerit massa lobortis sit amet. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
</div>
<div class="tls-tab-content-paragraph"><a class="tls-link"><i class="fa fa-chevron-up"></i>
<div>Haut</div></a></div>
</div>
</div>
<div class="tls-footer">
<div class="tls-footer-links">
<div class="tls-footer-links--slot">
<div class="tls-footer-links--title">
<div class="tls-simple-text -color-white -weight-bold">Tls links
</div>
</div>
<div class="tls-footer-links--list">
<ul class="tls-link-list">
<li class="tls-link-list--slot"><a class="tls-link">My Link</a></li>
<li class="tls-link-list--slot"><a class="tls-link">My Link</a></li>
</ul>
</div>
</div>
<div class="tls-footer-links--slot">
<div class="tls-footer-links--title">
<div class="tls-simple-text -color-white -weight-bold">Tls links
</div>
</div>
<div class="tls-footer-links--list">
<ul class="tls-link-list">
<li class="tls-link-list--slot"><a class="tls-link">My Link</a></li>
<li class="tls-link-list--slot"><a class="tls-link">My Link</a></li>
</ul>
</div>
</div>
<div class="tls-footer-links--slot">
<div class="tls-footer-links--title">
<div class="tls-simple-text -color-white -weight-bold">Tls links
</div>
</div>
<div class="tls-footer-links--list">
<ul class="tls-link-list">
<li class="tls-link-list--slot"><a class="tls-link">My Link</a></li>
<li class="tls-link-list--slot"><a class="tls-link">My Link</a></li>
</ul>
</div>
</div>
<div class="tls-footer-links--slot">
<div class="tls-footer-links--title">
<div class="tls-simple-text -color-white -weight-bold">Tls links
</div>
</div>
<div class="tls-footer-links--list">
<ul class="tls-link-list">
<li class="tls-link-list--slot"><a class="tls-link">My Link</a></li>
<li class="tls-link-list--slot"><a class="tls-link">My Link</a></li>
</ul>
</div>
</div>
</div>
<div class="tls-footer-line"></div>
<div class="tls-footer-content">
<div class="tls-footer--slot"><a class="tls-logo" href="#"><img class="tls-logo--img" src="/atom/logo/logo/logo.svg"/></a></div>
<div class="tls-footer--slot tls-sm-visible">
<div class="tls-simple-text -color-white -size-12">© 2019 TLScontact. Tous droits réservés.
</div>
</div>
<div class="tls-footer--slot tls-sm-visible">
<div class="tls-social-logo-group">
<div class="tls-social-logo-group--slot"><a class="tls-social-logo" href="#"><i class="fab fa-linkedin-in tls-social-logo--icon"></i></a></div>
<div class="tls-social-logo-group--slot"><a class="tls-social-logo" href="#"><i class="fab fa-linkedin-in tls-social-logo--icon"></i></a></div>
</div>
</div>
<div class="tls-footer--slot"><a class="tls-logo" href="#"><img class="tls-logo--img" src="/atom/logo/logo/logo.svg"/></a></div>
</div>
</div>
</div>.tls-faq
.tls-navbar
.tls-navbar--content
.tls-navbar--logo
a.tls-logo(href='#')
img.tls-logo--img(src='/atom/logo/logo/logo.svg')
.tls-navbar--links.-opened
.tls-navbar--slot
.tls-dropdown
a.tls-link-dropdown
.tls-link-dropdown--text Opened
.tls-link-dropdown--icon
i.fa.fa-chevron-up
.tls-dropdown--content
.tls-dropdown--content
.tls-dropdown-list
.tls-dropdown-list--slot
a.tls-dropdown-text My dropdown text
.tls-dropdown-list--slot
.tls-dropdown-text A longer text to see the difference
.tls-navbar--slot
.tls-dropdown
a.tls-link-dropdown
.tls-link-dropdown--text Closed
.tls-link-dropdown--icon
i.fa.fa-chevron-down
.tls-dropdown--content.hidden
.tls-dropdown--content.hidden Hidden content.
.tls-navbar--slot
a.tls-link-uppercase My Uppercase Link
.tls-navbar--slot
a.tls-button-link Button link
.tls-navbar--language
.tls-navbar--slot
a.tls-link-dropdown
img.tls-link-dropdown--flag(src='./flag-en.png')
.tls-link-dropdown--text Link
.tls-link-dropdown--icon
i.fa.fa-chevron-down
.tls-navbar--hamburger
.tls-hamburger.-state-closed
.tls-hamburger--top-line
.tls-hamburger--middle-line
.tls-hamburger--bottom-line
header.tls-simple-banner
.tls-home-text-group
.tls-simple-text.-color-white.-size-22
| Simple text
img.tls-image(src='/atom/image/image.png')
h1.tls-heading-1 Heading level 1
.tls-faq-content
.tls-large-card-info
.tls-card-lg
.tls-simple-text.-size-16
p lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur felis magna, lacinia ornare congue ornare, pharetra a leo. Suspendisse fermentum ut mi vel pulvinar. Maecenas gravida varius mauris, sed tempus risus pulvinar sed. In varius placerat erat in porttitor. Sed mollis est ligula, sit amet iaculis nulla rhoncus sed. Morbi quis felis et quam posuere sodales eget quis est. Integer congue faucibus nunc, rhoncus hendrerit massa lobortis sit amet. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
.tls-simple-text.-size-16
p Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur felis magna, lacinia ornare congue ornare, pharetra a leo. Suspendisse fermentum ut mi vel pulvinar. Maecenas gravida varius mauris, sed tempus risus pulvinar sed. In varius placerat erat in porttitor. Sed mollis est ligula, sit amet iaculis nulla rhoncus sed. Morbi quis felis et quam posuere sodales eget quis est. Integer congue faucibus nunc, rhoncus hendrerit massa lobortis sit amet. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
.tls-large-card-info--decoration
.tls-decoration-vertical-lines.-blue
.tls-line1
.tls-line2
.tls-faq-action
.tls-faq-action--slot
h2.tls-heading-2 Heading level 2
.tls-faq-action--slot
button.tls-button-primary.
Button
.tls-faq-action--slot
h2.tls-heading-2 Heading level 2
.tls-faq-action--slot
.tls-faq-action-text
ul.tls-link-list
li.tls-link-list--slot
a.tls-link My Link
li.tls-link-list--slot
a.tls-link My Link
.tls-faq-info
h2.tls-heading-2 Tab title example
.tls-simple-text.-size-16.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur felis magna, lacinia ornare congue ornare, pharetra a leo. Suspendisse fermentum ut mi vel pulvinar. Maecenas gravida varius mauris, sed tempus risus pulvinar sed. In varius placerat erat in porttitor. Sed mollis est ligula, sit amet iaculis nulla rhoncus sed. Morbi quis felis et quam posuere sodales eget quis est. Integer congue faucibus nunc, rhoncus hendrerit massa lobortis sit amet. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
.tls-tab-content-paragraph
a.tls-link
i.fa.fa-chevron-up
div Haut
.tls-footer
.tls-footer-links
.tls-footer-links--slot
.tls-footer-links--title
.tls-simple-text.-color-white.-weight-bold.
Tls links
.tls-footer-links--list
ul.tls-link-list
li.tls-link-list--slot
a.tls-link My Link
li.tls-link-list--slot
a.tls-link My Link
.tls-footer-links--slot
.tls-footer-links--title
.tls-simple-text.-color-white.-weight-bold.
Tls links
.tls-footer-links--list
ul.tls-link-list
li.tls-link-list--slot
a.tls-link My Link
li.tls-link-list--slot
a.tls-link My Link
.tls-footer-links--slot
.tls-footer-links--title
.tls-simple-text.-color-white.-weight-bold.
Tls links
.tls-footer-links--list
ul.tls-link-list
li.tls-link-list--slot
a.tls-link My Link
li.tls-link-list--slot
a.tls-link My Link
.tls-footer-links--slot
.tls-footer-links--title
.tls-simple-text.-color-white.-weight-bold.
Tls links
.tls-footer-links--list
ul.tls-link-list
li.tls-link-list--slot
a.tls-link My Link
li.tls-link-list--slot
a.tls-link My Link
.tls-footer-line
.tls-footer-content
.tls-footer--slot
a.tls-logo(href='#')
img.tls-logo--img(src='/atom/logo/logo/logo.svg')
.tls-footer--slot.tls-sm-visible
.tls-simple-text.-color-white.-size-12.
© 2019 TLScontact. Tous droits réservés.
.tls-footer--slot.tls-sm-visible
.tls-social-logo-group
.tls-social-logo-group--slot
a.tls-social-logo(href='#')
i.fab.fa-linkedin-in.tls-social-logo--icon
.tls-social-logo-group--slot
a.tls-social-logo(href='#')
i.fab.fa-linkedin-in.tls-social-logo--icon
.tls-footer--slot
a.tls-logo(href='#')
img.tls-logo--img(src='/atom/logo/logo/logo.svg')Form Group
<div class="tls-form-group">
<div class="tls-navbar">
<div class="tls-navbar--content">
<div class="tls-navbar--logo"><a class="tls-logo" href="#"><img class="tls-logo--img" src="/atom/logo/logo/logo.svg"/></a></div>
<div class="tls-navbar--links -opened">
<div class="tls-navbar--slot">
<div class="tls-dropdown"><a class="tls-link-dropdown">
<div class="tls-link-dropdown--text">Opened</div>
<div class="tls-link-dropdown--icon"><i class="fa fa-chevron-up"></i></div></a>
<div class="tls-dropdown--content">
<div class="tls-dropdown--content">
<div class="tls-dropdown-list">
<div class="tls-dropdown-list--slot"><a class="tls-dropdown-text">My dropdown text</a></div>
<div class="tls-dropdown-list--slot">
<div class="tls-dropdown-text">A longer text to see the difference</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="tls-navbar--slot">
<div class="tls-dropdown"><a class="tls-link-dropdown">
<div class="tls-link-dropdown--text">Closed</div>
<div class="tls-link-dropdown--icon"><i class="fa fa-chevron-down"></i></div></a>
<div class="tls-dropdown--content hidden">
<div class="tls-dropdown--content hidden">Hidden content.</div>
</div>
</div>
</div>
<div class="tls-navbar--slot"><a class="tls-link-uppercase">My Uppercase Link</a></div>
<div class="tls-navbar--slot"><a class="tls-button-link">Button link</a></div>
</div>
<div class="tls-navbar--language">
<div class="tls-navbar--slot"><a class="tls-link-dropdown"><img class="tls-link-dropdown--flag" src="./flag-en.png"/>
<div class="tls-link-dropdown--text">Link</div>
<div class="tls-link-dropdown--icon"><i class="fa fa-chevron-down"></i></div></a></div>
</div>
<div class="tls-navbar--hamburger">
<div class="tls-hamburger -state-closed">
<div class="tls-hamburger--top-line"></div>
<div class="tls-hamburger--middle-line"></div>
<div class="tls-hamburger--bottom-line"></div>
</div>
</div>
</div>
</div>
<header class="tls-simple-banner">
<div class="tls-home-text-group">
<div class="tls-simple-text -color-white -size-22">Simple text<img class="tls-image" src="/atom/image/image.png"/>
</div>
<h1 class="tls-heading-1">Heading level 1</h1>
</div>
</header>
<div class="tls-form-group-content">
<div class="tls-large-card-info">
<div class="tls-card-lg">
<div class="tls-simple-text -size-16">
<p>lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur felis magna, lacinia ornare congue ornare, pharetra a leo. Suspendisse fermentum ut mi vel pulvinar. Maecenas gravida varius mauris, sed tempus risus pulvinar sed. In varius placerat erat in porttitor. Sed mollis est ligula, sit amet iaculis nulla rhoncus sed. Morbi quis felis et quam posuere sodales eget quis est. Integer congue faucibus nunc, rhoncus hendrerit massa lobortis sit amet. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
</div>
<div class="tls-simple-text -size-16">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur felis magna, lacinia ornare congue ornare, pharetra a leo. Suspendisse fermentum ut mi vel pulvinar. Maecenas gravida varius mauris, sed tempus risus pulvinar sed. In varius placerat erat in porttitor. Sed mollis est ligula, sit amet iaculis nulla rhoncus sed. Morbi quis felis et quam posuere sodales eget quis est. Integer congue faucibus nunc, rhoncus hendrerit massa lobortis sit amet. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
</div>
</div>
<div class="tls-large-card-info--decoration">
<div class="tls-decoration-vertical-lines -blue">
<div class="tls-line1"></div>
<div class="tls-line2"></div>
</div>
</div>
</div>
<div class="tls-form-group-info">
<div class="tls-form-group-info--content">
<div class="tls-status-card-group">
<div class="tls-status-card-group--slot">
<div class="tls-status-card-info">
<div class="tls-status-card-info--body">
<div class="tls-status-card-info-body--image">
<div class="tls-image-info"><img class="tls-image-info--img" src="/molecule/image-info/work.png"/>
<div class="tls-simple-text">Simple Text
</div>
</div>
</div>
<div class="tls-status-card-info-body--separator"></div>
<div class="tls-status-card-info-body--close">
<button class="tls-button-icon">×</button>
</div>
<div class="tls-status-card-info-body--content">
<div class="tls-status-card-info-body--badge">
<div class="tls-badge">
<div class="tls-badge--icon">
<div class="tls-circle -color-success"></div>
</div>
<div class="tls-badge--content">
<div class="tls-simple-text -color-success -size-16">Simple Text
</div>
</div>
</div>
</div>
<div class="tls-status-card-info-body--title">
<div class="tls-simple-text -weight-bold -size-22">Simple Text
</div>
</div>
<div class="tls-status-card-info-body--subtitle">
<div class="tls-simple-text">Simple Text
</div>
</div>
</div>
</div>
<div class="tls-status-card-info--time">
<div class="tls-status-card-info-time--description">
<div class="tls-simple-text -style-italic">Your have booked an appointment on:
</div>
</div>
<div class="tls-status-card-info-time--value">
<div class="tls-simple-text -weight-bold">Monday, 25th September 2020 at 09:00
</div>
</div>
</div>
<div class="tls-status-card-info--action">
<button class="tls-button-primary -small">Small Button
</button>
</div>
</div>
</div>
<div class="tls-status-card-group--slot">
<div class="tls-status-card-info">
<div class="tls-status-card-info--body">
<div class="tls-status-card-info-body--image">
<div class="tls-image-info"><img class="tls-image-info--img" src="/molecule/image-info/work.png"/>
<div class="tls-simple-text">Simple Text
</div>
</div>
</div>
<div class="tls-status-card-info-body--separator"></div>
<div class="tls-status-card-info-body--close">
<button class="tls-button-icon">×</button>
</div>
<div class="tls-status-card-info-body--content">
<div class="tls-status-card-info-body--badge">
<div class="tls-badge">
<div class="tls-badge--icon">
<div class="tls-circle -color-success"></div>
</div>
<div class="tls-badge--content">
<div class="tls-simple-text -color-success -size-16">Simple Text
</div>
</div>
</div>
</div>
<div class="tls-status-card-info-body--title">
<div class="tls-simple-text -weight-bold -size-22">Simple Text
</div>
</div>
<div class="tls-status-card-info-body--subtitle">
<div class="tls-simple-text">Simple Text
</div>
</div>
</div>
</div>
<div class="tls-status-card-info--time">
<div class="tls-status-card-info-time--description">
<div class="tls-simple-text -style-italic">Your have booked an appointment on:
</div>
</div>
<div class="tls-status-card-info-time--value">
<div class="tls-simple-text -weight-bold">Monday, 25th September 2020 at 09:00
</div>
</div>
</div>
<div class="tls-status-card-info--action">
<button class="tls-button-primary -small">Small Button
</button>
</div>
</div>
</div>
<div class="tls-status-card-group--slot">
<div class="tls-status-card-info">
<div class="tls-status-card-info--body">
<div class="tls-status-card-info-body--image">
<div class="tls-image-info"><img class="tls-image-info--img" src="/molecule/image-info/work.png"/>
<div class="tls-simple-text">Simple Text
</div>
</div>
</div>
<div class="tls-status-card-info-body--separator"></div>
<div class="tls-status-card-info-body--close">
<button class="tls-button-icon">×</button>
</div>
<div class="tls-status-card-info-body--content">
<div class="tls-status-card-info-body--badge">
<div class="tls-badge">
<div class="tls-badge--icon">
<div class="tls-circle -color-success"></div>
</div>
<div class="tls-badge--content">
<div class="tls-simple-text -color-success -size-16">Simple Text
</div>
</div>
</div>
</div>
<div class="tls-status-card-info-body--title">
<div class="tls-simple-text -weight-bold -size-22">Simple Text
</div>
</div>
<div class="tls-status-card-info-body--subtitle">
<div class="tls-simple-text">Simple Text
</div>
</div>
</div>
</div>
<div class="tls-status-card-info--time">
<div class="tls-status-card-info-time--description">
<div class="tls-simple-text -style-italic">Your have booked an appointment on:
</div>
</div>
<div class="tls-status-card-info-time--value">
<div class="tls-simple-text -weight-bold">Monday, 25th September 2020 at 09:00
</div>
</div>
</div>
<div class="tls-status-card-info--action">
<button class="tls-button-primary -small">Small Button
</button>
</div>
</div>
</div>
<div class="tls-status-card-group--slot">
<div class="tls-status-card-info">
<div class="tls-status-card-info--body">
<div class="tls-status-card-info-body--image">
<div class="tls-image-info"><img class="tls-image-info--img" src="/molecule/image-info/work.png"/>
<div class="tls-simple-text">Simple Text
</div>
</div>
</div>
<div class="tls-status-card-info-body--separator"></div>
<div class="tls-status-card-info-body--close">
<button class="tls-button-icon">×</button>
</div>
<div class="tls-status-card-info-body--content">
<div class="tls-status-card-info-body--badge">
<div class="tls-badge">
<div class="tls-badge--icon">
<div class="tls-circle -color-success"></div>
</div>
<div class="tls-badge--content">
<div class="tls-simple-text -color-success -size-16">Simple Text
</div>
</div>
</div>
</div>
<div class="tls-status-card-info-body--title">
<div class="tls-simple-text -weight-bold -size-22">Simple Text
</div>
</div>
<div class="tls-status-card-info-body--subtitle">
<div class="tls-simple-text">Simple Text
</div>
</div>
</div>
</div>
<div class="tls-status-card-info--time">
<div class="tls-status-card-info-time--description">
<div class="tls-simple-text -style-italic">Your have booked an appointment on:
</div>
</div>
<div class="tls-status-card-info-time--value">
<div class="tls-simple-text -weight-bold">Monday, 25th September 2020 at 09:00
</div>
</div>
</div>
<div class="tls-status-card-info--action">
<button class="tls-button-primary -small">Small Button
</button>
</div>
</div>
</div>
<div class="tls-status-card-group--slot">
<div class="tls-status-card-info">
<div class="tls-status-card-info--body">
<div class="tls-status-card-info-body--image">
<div class="tls-image-info"><img class="tls-image-info--img" src="/molecule/image-info/work.png"/>
<div class="tls-simple-text">Simple Text
</div>
</div>
</div>
<div class="tls-status-card-info-body--separator"></div>
<div class="tls-status-card-info-body--close">
<button class="tls-button-icon">×</button>
</div>
<div class="tls-status-card-info-body--content">
<div class="tls-status-card-info-body--badge">
<div class="tls-badge">
<div class="tls-badge--icon">
<div class="tls-circle -color-success"></div>
</div>
<div class="tls-badge--content">
<div class="tls-simple-text -color-success -size-16">Simple Text
</div>
</div>
</div>
</div>
<div class="tls-status-card-info-body--title">
<div class="tls-simple-text -weight-bold -size-22">Simple Text
</div>
</div>
<div class="tls-status-card-info-body--subtitle">
<div class="tls-simple-text">Simple Text
</div>
</div>
</div>
</div>
<div class="tls-status-card-info--time">
<div class="tls-status-card-info-time--description">
<div class="tls-simple-text -style-italic">Your have booked an appointment on:
</div>
</div>
<div class="tls-status-card-info-time--value">
<div class="tls-simple-text -weight-bold">Monday, 25th September 2020 at 09:00
</div>
</div>
</div>
<div class="tls-status-card-info--action">
<button class="tls-button-primary -small">Small Button
</button>
</div>
</div>
</div>
</div>
<div class="tls-form-group-action">
<button class="tls-button-primary -uppercase">Submit
</button>
</div>
</div>
</div>
</div>
<div class="tls-footer">
<div class="tls-footer-links">
<div class="tls-footer-links--slot">
<div class="tls-footer-links--title">
<div class="tls-simple-text -color-white -weight-bold">Tls links
</div>
</div>
<div class="tls-footer-links--list">
<ul class="tls-link-list">
<li class="tls-link-list--slot"><a class="tls-link">My Link</a></li>
<li class="tls-link-list--slot"><a class="tls-link">My Link</a></li>
</ul>
</div>
</div>
<div class="tls-footer-links--slot">
<div class="tls-footer-links--title">
<div class="tls-simple-text -color-white -weight-bold">Tls links
</div>
</div>
<div class="tls-footer-links--list">
<ul class="tls-link-list">
<li class="tls-link-list--slot"><a class="tls-link">My Link</a></li>
<li class="tls-link-list--slot"><a class="tls-link">My Link</a></li>
</ul>
</div>
</div>
<div class="tls-footer-links--slot">
<div class="tls-footer-links--title">
<div class="tls-simple-text -color-white -weight-bold">Tls links
</div>
</div>
<div class="tls-footer-links--list">
<ul class="tls-link-list">
<li class="tls-link-list--slot"><a class="tls-link">My Link</a></li>
<li class="tls-link-list--slot"><a class="tls-link">My Link</a></li>
</ul>
</div>
</div>
<div class="tls-footer-links--slot">
<div class="tls-footer-links--title">
<div class="tls-simple-text -color-white -weight-bold">Tls links
</div>
</div>
<div class="tls-footer-links--list">
<ul class="tls-link-list">
<li class="tls-link-list--slot"><a class="tls-link">My Link</a></li>
<li class="tls-link-list--slot"><a class="tls-link">My Link</a></li>
</ul>
</div>
</div>
</div>
<div class="tls-footer-line"></div>
<div class="tls-footer-content">
<div class="tls-footer--slot"><a class="tls-logo" href="#"><img class="tls-logo--img" src="/atom/logo/logo/logo.svg"/></a></div>
<div class="tls-footer--slot tls-sm-visible">
<div class="tls-simple-text -color-white -size-12">© 2019 TLScontact. Tous droits réservés.
</div>
</div>
<div class="tls-footer--slot tls-sm-visible">
<div class="tls-social-logo-group">
<div class="tls-social-logo-group--slot"><a class="tls-social-logo" href="#"><i class="fab fa-linkedin-in tls-social-logo--icon"></i></a></div>
<div class="tls-social-logo-group--slot"><a class="tls-social-logo" href="#"><i class="fab fa-linkedin-in tls-social-logo--icon"></i></a></div>
</div>
</div>
<div class="tls-footer--slot"><a class="tls-logo" href="#"><img class="tls-logo--img" src="/atom/logo/logo/logo.svg"/></a></div>
</div>
</div>
</div>.tls-form-group
.tls-navbar
.tls-navbar--content
.tls-navbar--logo
a.tls-logo(href='#')
img.tls-logo--img(src='/atom/logo/logo/logo.svg')
.tls-navbar--links.-opened
.tls-navbar--slot
.tls-dropdown
a.tls-link-dropdown
.tls-link-dropdown--text Opened
.tls-link-dropdown--icon
i.fa.fa-chevron-up
.tls-dropdown--content
.tls-dropdown--content
.tls-dropdown-list
.tls-dropdown-list--slot
a.tls-dropdown-text My dropdown text
.tls-dropdown-list--slot
.tls-dropdown-text A longer text to see the difference
.tls-navbar--slot
.tls-dropdown
a.tls-link-dropdown
.tls-link-dropdown--text Closed
.tls-link-dropdown--icon
i.fa.fa-chevron-down
.tls-dropdown--content.hidden
.tls-dropdown--content.hidden Hidden content.
.tls-navbar--slot
a.tls-link-uppercase My Uppercase Link
.tls-navbar--slot
a.tls-button-link Button link
.tls-navbar--language
.tls-navbar--slot
a.tls-link-dropdown
img.tls-link-dropdown--flag(src='./flag-en.png')
.tls-link-dropdown--text Link
.tls-link-dropdown--icon
i.fa.fa-chevron-down
.tls-navbar--hamburger
.tls-hamburger.-state-closed
.tls-hamburger--top-line
.tls-hamburger--middle-line
.tls-hamburger--bottom-line
header.tls-simple-banner
.tls-home-text-group
.tls-simple-text.-color-white.-size-22
| Simple text
img.tls-image(src='/atom/image/image.png')
h1.tls-heading-1 Heading level 1
.tls-form-group-content
.tls-large-card-info
.tls-card-lg
.tls-simple-text.-size-16
p lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur felis magna, lacinia ornare congue ornare, pharetra a leo. Suspendisse fermentum ut mi vel pulvinar. Maecenas gravida varius mauris, sed tempus risus pulvinar sed. In varius placerat erat in porttitor. Sed mollis est ligula, sit amet iaculis nulla rhoncus sed. Morbi quis felis et quam posuere sodales eget quis est. Integer congue faucibus nunc, rhoncus hendrerit massa lobortis sit amet. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
.tls-simple-text.-size-16
p Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur felis magna, lacinia ornare congue ornare, pharetra a leo. Suspendisse fermentum ut mi vel pulvinar. Maecenas gravida varius mauris, sed tempus risus pulvinar sed. In varius placerat erat in porttitor. Sed mollis est ligula, sit amet iaculis nulla rhoncus sed. Morbi quis felis et quam posuere sodales eget quis est. Integer congue faucibus nunc, rhoncus hendrerit massa lobortis sit amet. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
.tls-large-card-info--decoration
.tls-decoration-vertical-lines.-blue
.tls-line1
.tls-line2
.tls-form-group-info
.tls-form-group-info--content
.tls-status-card-group
.tls-status-card-group--slot
.tls-status-card-info
.tls-status-card-info--body
.tls-status-card-info-body--image
.tls-image-info
img.tls-image-info--img(src='/molecule/image-info/work.png')
.tls-simple-text.
Simple Text
.tls-status-card-info-body--separator
.tls-status-card-info-body--close
button.tls-button-icon ×
.tls-status-card-info-body--content
.tls-status-card-info-body--badge
.tls-badge
.tls-badge--icon
.tls-circle.-color-success
.tls-badge--content
.tls-simple-text.-color-success.-size-16.
Simple Text
.tls-status-card-info-body--title
.tls-simple-text.-weight-bold.-size-22.
Simple Text
.tls-status-card-info-body--subtitle
.tls-simple-text.
Simple Text
.tls-status-card-info--time
.tls-status-card-info-time--description
.tls-simple-text.-style-italic.
Your have booked an appointment on:
.tls-status-card-info-time--value
.tls-simple-text.-weight-bold.
Monday, 25th September 2020 at 09:00
.tls-status-card-info--action
button.tls-button-primary.-small.
Small Button
.tls-status-card-group--slot
.tls-status-card-info
.tls-status-card-info--body
.tls-status-card-info-body--image
.tls-image-info
img.tls-image-info--img(src='/molecule/image-info/work.png')
.tls-simple-text.
Simple Text
.tls-status-card-info-body--separator
.tls-status-card-info-body--close
button.tls-button-icon ×
.tls-status-card-info-body--content
.tls-status-card-info-body--badge
.tls-badge
.tls-badge--icon
.tls-circle.-color-success
.tls-badge--content
.tls-simple-text.-color-success.-size-16.
Simple Text
.tls-status-card-info-body--title
.tls-simple-text.-weight-bold.-size-22.
Simple Text
.tls-status-card-info-body--subtitle
.tls-simple-text.
Simple Text
.tls-status-card-info--time
.tls-status-card-info-time--description
.tls-simple-text.-style-italic.
Your have booked an appointment on:
.tls-status-card-info-time--value
.tls-simple-text.-weight-bold.
Monday, 25th September 2020 at 09:00
.tls-status-card-info--action
button.tls-button-primary.-small.
Small Button
.tls-status-card-group--slot
.tls-status-card-info
.tls-status-card-info--body
.tls-status-card-info-body--image
.tls-image-info
img.tls-image-info--img(src='/molecule/image-info/work.png')
.tls-simple-text.
Simple Text
.tls-status-card-info-body--separator
.tls-status-card-info-body--close
button.tls-button-icon ×
.tls-status-card-info-body--content
.tls-status-card-info-body--badge
.tls-badge
.tls-badge--icon
.tls-circle.-color-success
.tls-badge--content
.tls-simple-text.-color-success.-size-16.
Simple Text
.tls-status-card-info-body--title
.tls-simple-text.-weight-bold.-size-22.
Simple Text
.tls-status-card-info-body--subtitle
.tls-simple-text.
Simple Text
.tls-status-card-info--time
.tls-status-card-info-time--description
.tls-simple-text.-style-italic.
Your have booked an appointment on:
.tls-status-card-info-time--value
.tls-simple-text.-weight-bold.
Monday, 25th September 2020 at 09:00
.tls-status-card-info--action
button.tls-button-primary.-small.
Small Button
.tls-status-card-group--slot
.tls-status-card-info
.tls-status-card-info--body
.tls-status-card-info-body--image
.tls-image-info
img.tls-image-info--img(src='/molecule/image-info/work.png')
.tls-simple-text.
Simple Text
.tls-status-card-info-body--separator
.tls-status-card-info-body--close
button.tls-button-icon ×
.tls-status-card-info-body--content
.tls-status-card-info-body--badge
.tls-badge
.tls-badge--icon
.tls-circle.-color-success
.tls-badge--content
.tls-simple-text.-color-success.-size-16.
Simple Text
.tls-status-card-info-body--title
.tls-simple-text.-weight-bold.-size-22.
Simple Text
.tls-status-card-info-body--subtitle
.tls-simple-text.
Simple Text
.tls-status-card-info--time
.tls-status-card-info-time--description
.tls-simple-text.-style-italic.
Your have booked an appointment on:
.tls-status-card-info-time--value
.tls-simple-text.-weight-bold.
Monday, 25th September 2020 at 09:00
.tls-status-card-info--action
button.tls-button-primary.-small.
Small Button
.tls-status-card-group--slot
.tls-status-card-info
.tls-status-card-info--body
.tls-status-card-info-body--image
.tls-image-info
img.tls-image-info--img(src='/molecule/image-info/work.png')
.tls-simple-text.
Simple Text
.tls-status-card-info-body--separator
.tls-status-card-info-body--close
button.tls-button-icon ×
.tls-status-card-info-body--content
.tls-status-card-info-body--badge
.tls-badge
.tls-badge--icon
.tls-circle.-color-success
.tls-badge--content
.tls-simple-text.-color-success.-size-16.
Simple Text
.tls-status-card-info-body--title
.tls-simple-text.-weight-bold.-size-22.
Simple Text
.tls-status-card-info-body--subtitle
.tls-simple-text.
Simple Text
.tls-status-card-info--time
.tls-status-card-info-time--description
.tls-simple-text.-style-italic.
Your have booked an appointment on:
.tls-status-card-info-time--value
.tls-simple-text.-weight-bold.
Monday, 25th September 2020 at 09:00
.tls-status-card-info--action
button.tls-button-primary.-small.
Small Button
.tls-form-group-action
button.tls-button-primary.-uppercase.
Submit
.tls-footer
.tls-footer-links
.tls-footer-links--slot
.tls-footer-links--title
.tls-simple-text.-color-white.-weight-bold.
Tls links
.tls-footer-links--list
ul.tls-link-list
li.tls-link-list--slot
a.tls-link My Link
li.tls-link-list--slot
a.tls-link My Link
.tls-footer-links--slot
.tls-footer-links--title
.tls-simple-text.-color-white.-weight-bold.
Tls links
.tls-footer-links--list
ul.tls-link-list
li.tls-link-list--slot
a.tls-link My Link
li.tls-link-list--slot
a.tls-link My Link
.tls-footer-links--slot
.tls-footer-links--title
.tls-simple-text.-color-white.-weight-bold.
Tls links
.tls-footer-links--list
ul.tls-link-list
li.tls-link-list--slot
a.tls-link My Link
li.tls-link-list--slot
a.tls-link My Link
.tls-footer-links--slot
.tls-footer-links--title
.tls-simple-text.-color-white.-weight-bold.
Tls links
.tls-footer-links--list
ul.tls-link-list
li.tls-link-list--slot
a.tls-link My Link
li.tls-link-list--slot
a.tls-link My Link
.tls-footer-line
.tls-footer-content
.tls-footer--slot
a.tls-logo(href='#')
img.tls-logo--img(src='/atom/logo/logo/logo.svg')
.tls-footer--slot.tls-sm-visible
.tls-simple-text.-color-white.-size-12.
© 2019 TLScontact. Tous droits réservés.
.tls-footer--slot.tls-sm-visible
.tls-social-logo-group
.tls-social-logo-group--slot
a.tls-social-logo(href='#')
i.fab.fa-linkedin-in.tls-social-logo--icon
.tls-social-logo-group--slot
a.tls-social-logo(href='#')
i.fab.fa-linkedin-in.tls-social-logo--icon
.tls-footer--slot
a.tls-logo(href='#')
img.tls-logo--img(src='/atom/logo/logo/logo.svg')Covid Form Group
<div class="tls-form-group-covid">
<div class="tls-navbar">
<div class="tls-navbar--content">
<div class="tls-navbar--logo"><a class="tls-logo" href="#"><img class="tls-logo--img" src="/atom/logo/logo/logo.svg"/></a></div>
<div class="tls-navbar--links -opened">
<div class="tls-navbar--slot">
<div class="tls-dropdown"><a class="tls-link-dropdown">
<div class="tls-link-dropdown--text">Opened</div>
<div class="tls-link-dropdown--icon"><i class="fa fa-chevron-up"></i></div></a>
<div class="tls-dropdown--content">
<div class="tls-dropdown--content">
<div class="tls-dropdown-list">
<div class="tls-dropdown-list--slot"><a class="tls-dropdown-text">My dropdown text</a></div>
<div class="tls-dropdown-list--slot">
<div class="tls-dropdown-text">A longer text to see the difference</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="tls-navbar--slot">
<div class="tls-dropdown"><a class="tls-link-dropdown">
<div class="tls-link-dropdown--text">Closed</div>
<div class="tls-link-dropdown--icon"><i class="fa fa-chevron-down"></i></div></a>
<div class="tls-dropdown--content hidden">
<div class="tls-dropdown--content hidden">Hidden content.</div>
</div>
</div>
</div>
<div class="tls-navbar--slot"><a class="tls-link-uppercase">My Uppercase Link</a></div>
<div class="tls-navbar--slot"><a class="tls-button-link">Button link</a></div>
</div>
<div class="tls-navbar--language">
<div class="tls-navbar--slot"><a class="tls-link-dropdown"><img class="tls-link-dropdown--flag" src="./flag-en.png"/>
<div class="tls-link-dropdown--text">Link</div>
<div class="tls-link-dropdown--icon"><i class="fa fa-chevron-down"></i></div></a></div>
</div>
<div class="tls-navbar--hamburger">
<div class="tls-hamburger -state-closed">
<div class="tls-hamburger--top-line"></div>
<div class="tls-hamburger--middle-line"></div>
<div class="tls-hamburger--bottom-line"></div>
</div>
</div>
</div>
</div>
<header class="tls-simple-banner">
<div class="tls-home-text-group">
<div class="tls-simple-text -color-white -size-22">Simple text<img class="tls-image" src="/atom/image/image.png"/>
</div>
<h1 class="tls-heading-1">Heading level 1</h1>
</div>
</header>
<div class="tls-form-group-content">
<div class="tls-large-card-info">
<div class="tls-card-lg">
<div class="tls-simple-text -size-16">
<p>lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur felis magna, lacinia ornare congue ornare, pharetra a leo. Suspendisse fermentum ut mi vel pulvinar. Maecenas gravida varius mauris, sed tempus risus pulvinar sed. In varius placerat erat in porttitor. Sed mollis est ligula, sit amet iaculis nulla rhoncus sed. Morbi quis felis et quam posuere sodales eget quis est. Integer congue faucibus nunc, rhoncus hendrerit massa lobortis sit amet. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
</div>
<div class="tls-simple-text -size-16">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur felis magna, lacinia ornare congue ornare, pharetra a leo. Suspendisse fermentum ut mi vel pulvinar. Maecenas gravida varius mauris, sed tempus risus pulvinar sed. In varius placerat erat in porttitor. Sed mollis est ligula, sit amet iaculis nulla rhoncus sed. Morbi quis felis et quam posuere sodales eget quis est. Integer congue faucibus nunc, rhoncus hendrerit massa lobortis sit amet. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
</div>
</div>
<div class="tls-large-card-info--decoration">
<div class="tls-decoration-vertical-lines -blue">
<div class="tls-line1"></div>
<div class="tls-line2"></div>
</div>
</div>
</div>
<div class="tls-form-group-info">
<div class="tls-form-group-info--content">
<div class="tls-form-group-info--title">
<h2 class="tls-heading-2">Application(s)</h2>
<div class="tls-simple-text -size-16">Here are the mandatory steps to apply for a Schengen visa
</div>
</div>
<div class="tls-status-covid-card-group">
<div class="tls-status-covid-card-group--slot">
<div class="tls-status-covid-card-info">
<div class="tls-status-covid-card-info--title">
<div class="tls-simple-text -color-white -size-16">Patient 1
</div>
</div>
<div class="tls-status-covid-card-info--body">
<div class="tls-status-covid-card-info-body--content">
<div class="tls-form">
<div class="tls-complex-form--slot">
<div class="tls-simple-text -color-danger -weight-bold -size-16">Simple Text with danger message</div>
</div>
<div class="tls-complex-form--slot">
<h2 class="tls-heading-2">Heading level 2</h2>
</div>
<div class="tls-form--slot">
<div class="tls-field">
<div class="tls-field--label">
<label class="tls-label">Label</label>
</div>
<div class="tls-field--area">
<input class="tls-input-text valid" type="text"/>
</div>
</div>
</div>
<div class="tls-form--slot">
<div class="tls-field">
<div class="tls-field--label">
<label class="tls-label">Label</label>
</div>
<div class="tls-field--area">
<input class="tls-input-text valid" type="text"/>
</div>
</div>
<div class="tls-simple-text -size-16">Simple Text
</div>
</div>
<div class="tls-form--slot">
<div class="tls-field">
<div class="tls-field--label">
<label class="tls-label">Label</label>
</div>
<div class="tls-field--area">
<input class="tls-input-text valid" type="text"/>
</div>
</div>
</div>
<div class="tls-form--slot">
<div class="tls-field inline">
<div class="tls-field--label-group">
<label class="tls-label">Label</label>
</div>
<div class="tls-field--area">
<div class="tls-input-check-group">
<input class="tls-input-check" id="val1" type="checkbox"/>
<label class="tls-input-check--label" for="val1">Value 1</label>
</div>
<div class="tls-input-check-group">
<input class="tls-input-check" id="val2" type="checkbox"/>
<label class="tls-input-check--label" for="val2">Value 2</label>
</div>
<div class="tls-input-check-group">
<input class="tls-input-check" id="val3" type="checkbox"/>
<label class="tls-input-check--label" for="val3">Value 3</label>
</div>
</div>
</div>
</div>
<div class="tls-form--slot">
<div class="tls-form--group-button">
<div class="tls-form-button">
<button class="tls-button-primary -small">Submit
</button>
</div>
<div class="tls-form-button">
<button class="tls-button-primary -small">Submit
</button>
</div>
</div>
</div>
<div class="tls-complex-form--slot">
<h2 class="tls-heading-2">Heading level 2</h2>
</div>
<div class="tls-form--slot">
<div class="tls-field">
<div class="tls-field--label">
<label class="tls-label">Label</label><span class="tls-mandatory-indicator tls-simple-text -color-danger -weight-bold -size-16">*</span>
</div>
<div class="tls-field--area">
<input class="tls-input-text valid" type="text"/>
</div>
</div>
</div>
<div class="tls-form--slot">
<div class="tls-form-button">
<button class="tls-button-primary -small">Submit
</button>
</div>
</div>
</div>
<div class="tls-form--group-button">
<div class="tls-form-button"></div>
<button class="tls-button-primary">Submit
</button>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="tls-form-group-info--new-form">
<label class="tls-label">Label</label>
</div>
<div class="tls-status-card-info--action">
<div class="tls-form--group-button">
<div class="tls-form-button"><a class="tls-button-link">Button link</a></div>
<div class="tls-form-button">
<button class="tls-button-primary -small">Submit
</button>
</div>
</div>
</div>
<div class="tls-form-group-action">
<button class="tls-button-primary -uppercase">Submit
</button>
</div>
</div>
</div>
</div>
<div class="tls-footer">
<div class="tls-footer-links">
<div class="tls-footer-links--slot">
<div class="tls-footer-links--title">
<div class="tls-simple-text -color-white -weight-bold">Tls links
</div>
</div>
<div class="tls-footer-links--list">
<ul class="tls-link-list">
<li class="tls-link-list--slot"><a class="tls-link">My Link</a></li>
<li class="tls-link-list--slot"><a class="tls-link">My Link</a></li>
</ul>
</div>
</div>
<div class="tls-footer-links--slot">
<div class="tls-footer-links--title">
<div class="tls-simple-text -color-white -weight-bold">Tls links
</div>
</div>
<div class="tls-footer-links--list">
<ul class="tls-link-list">
<li class="tls-link-list--slot"><a class="tls-link">My Link</a></li>
<li class="tls-link-list--slot"><a class="tls-link">My Link</a></li>
</ul>
</div>
</div>
<div class="tls-footer-links--slot">
<div class="tls-footer-links--title">
<div class="tls-simple-text -color-white -weight-bold">Tls links
</div>
</div>
<div class="tls-footer-links--list">
<ul class="tls-link-list">
<li class="tls-link-list--slot"><a class="tls-link">My Link</a></li>
<li class="tls-link-list--slot"><a class="tls-link">My Link</a></li>
</ul>
</div>
</div>
<div class="tls-footer-links--slot">
<div class="tls-footer-links--title">
<div class="tls-simple-text -color-white -weight-bold">Tls links
</div>
</div>
<div class="tls-footer-links--list">
<ul class="tls-link-list">
<li class="tls-link-list--slot"><a class="tls-link">My Link</a></li>
<li class="tls-link-list--slot"><a class="tls-link">My Link</a></li>
</ul>
</div>
</div>
</div>
<div class="tls-footer-line"></div>
<div class="tls-footer-content">
<div class="tls-footer--slot"><a class="tls-logo" href="#"><img class="tls-logo--img" src="/atom/logo/logo/logo.svg"/></a></div>
<div class="tls-footer--slot tls-sm-visible">
<div class="tls-simple-text -color-white -size-12">© 2019 TLScontact. Tous droits réservés.
</div>
</div>
<div class="tls-footer--slot tls-sm-visible">
<div class="tls-social-logo-group">
<div class="tls-social-logo-group--slot"><a class="tls-social-logo" href="#"><i class="fab fa-linkedin-in tls-social-logo--icon"></i></a></div>
<div class="tls-social-logo-group--slot"><a class="tls-social-logo" href="#"><i class="fab fa-linkedin-in tls-social-logo--icon"></i></a></div>
</div>
</div>
<div class="tls-footer--slot"><a class="tls-logo" href="#"><img class="tls-logo--img" src="/atom/logo/logo/logo.svg"/></a></div>
</div>
</div>
</div>.tls-form-group-covid
.tls-navbar
.tls-navbar--content
.tls-navbar--logo
a.tls-logo(href='#')
img.tls-logo--img(src='/atom/logo/logo/logo.svg')
.tls-navbar--links.-opened
.tls-navbar--slot
.tls-dropdown
a.tls-link-dropdown
.tls-link-dropdown--text Opened
.tls-link-dropdown--icon
i.fa.fa-chevron-up
.tls-dropdown--content
.tls-dropdown--content
.tls-dropdown-list
.tls-dropdown-list--slot
a.tls-dropdown-text My dropdown text
.tls-dropdown-list--slot
.tls-dropdown-text A longer text to see the difference
.tls-navbar--slot
.tls-dropdown
a.tls-link-dropdown
.tls-link-dropdown--text Closed
.tls-link-dropdown--icon
i.fa.fa-chevron-down
.tls-dropdown--content.hidden
.tls-dropdown--content.hidden Hidden content.
.tls-navbar--slot
a.tls-link-uppercase My Uppercase Link
.tls-navbar--slot
a.tls-button-link Button link
.tls-navbar--language
.tls-navbar--slot
a.tls-link-dropdown
img.tls-link-dropdown--flag(src='./flag-en.png')
.tls-link-dropdown--text Link
.tls-link-dropdown--icon
i.fa.fa-chevron-down
.tls-navbar--hamburger
.tls-hamburger.-state-closed
.tls-hamburger--top-line
.tls-hamburger--middle-line
.tls-hamburger--bottom-line
header.tls-simple-banner
.tls-home-text-group
.tls-simple-text.-color-white.-size-22
| Simple text
img.tls-image(src='/atom/image/image.png')
h1.tls-heading-1 Heading level 1
.tls-form-group-content
.tls-large-card-info
.tls-card-lg
.tls-simple-text.-size-16
p lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur felis magna, lacinia ornare congue ornare, pharetra a leo. Suspendisse fermentum ut mi vel pulvinar. Maecenas gravida varius mauris, sed tempus risus pulvinar sed. In varius placerat erat in porttitor. Sed mollis est ligula, sit amet iaculis nulla rhoncus sed. Morbi quis felis et quam posuere sodales eget quis est. Integer congue faucibus nunc, rhoncus hendrerit massa lobortis sit amet. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
.tls-simple-text.-size-16
p Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur felis magna, lacinia ornare congue ornare, pharetra a leo. Suspendisse fermentum ut mi vel pulvinar. Maecenas gravida varius mauris, sed tempus risus pulvinar sed. In varius placerat erat in porttitor. Sed mollis est ligula, sit amet iaculis nulla rhoncus sed. Morbi quis felis et quam posuere sodales eget quis est. Integer congue faucibus nunc, rhoncus hendrerit massa lobortis sit amet. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
.tls-large-card-info--decoration
.tls-decoration-vertical-lines.-blue
.tls-line1
.tls-line2
.tls-form-group-info
.tls-form-group-info--content
.tls-form-group-info--title
h2.tls-heading-2 Application(s)
.tls-simple-text.-size-16.
Here are the mandatory steps to apply for a Schengen visa
.tls-status-covid-card-group
.tls-status-covid-card-group--slot
.tls-status-covid-card-info
.tls-status-covid-card-info--title
.tls-simple-text.-color-white.-size-16.
Patient 1
.tls-status-covid-card-info--body
.tls-status-covid-card-info-body--content
.tls-form
.tls-complex-form--slot
.tls-simple-text.-color-danger.-weight-bold.-size-16 Simple Text with danger message
.tls-complex-form--slot
h2.tls-heading-2 Heading level 2
.tls-form--slot
.tls-field
.tls-field--label
label.tls-label Label
.tls-field--area
input.tls-input-text.valid(type='text')
.tls-form--slot
.tls-field
.tls-field--label
label.tls-label Label
.tls-field--area
input.tls-input-text.valid(type='text')
.tls-simple-text.-size-16.
Simple Text
.tls-form--slot
.tls-field
.tls-field--label
label.tls-label Label
.tls-field--area
input.tls-input-text.valid(type='text')
.tls-form--slot
.tls-field.inline
.tls-field--label-group
label.tls-label Label
.tls-field--area
.tls-input-check-group
input.tls-input-check#val1(type='checkbox')
label.tls-input-check--label(for='val1') Value 1
.tls-input-check-group
input.tls-input-check#val2(type='checkbox')
label.tls-input-check--label(for='val2') Value 2
.tls-input-check-group
input.tls-input-check#val3(type='checkbox')
label.tls-input-check--label(for='val3') Value 3
.tls-form--slot
.tls-form--group-button
.tls-form-button
button.tls-button-primary.-small.
Submit
.tls-form-button
button.tls-button-primary.-small.
Submit
.tls-complex-form--slot
h2.tls-heading-2 Heading level 2
.tls-form--slot
.tls-field
.tls-field--label
label.tls-label Label
span.tls-mandatory-indicator.tls-simple-text.-color-danger.-weight-bold.-size-16 *
.tls-field--area
input.tls-input-text.valid(type='text')
.tls-form--slot
.tls-form-button
button.tls-button-primary.-small.
Submit
.tls-form--group-button
.tls-form-button
button.tls-button-primary.
Submit
.tls-form-group-info--new-form
label.tls-label Label
.tls-status-card-info--action
.tls-form--group-button
.tls-form-button
a.tls-button-link Button link
.tls-form-button
button.tls-button-primary.-small.
Submit
.tls-form-group-action
button.tls-button-primary.-uppercase.
Submit
.tls-footer
.tls-footer-links
.tls-footer-links--slot
.tls-footer-links--title
.tls-simple-text.-color-white.-weight-bold.
Tls links
.tls-footer-links--list
ul.tls-link-list
li.tls-link-list--slot
a.tls-link My Link
li.tls-link-list--slot
a.tls-link My Link
.tls-footer-links--slot
.tls-footer-links--title
.tls-simple-text.-color-white.-weight-bold.
Tls links
.tls-footer-links--list
ul.tls-link-list
li.tls-link-list--slot
a.tls-link My Link
li.tls-link-list--slot
a.tls-link My Link
.tls-footer-links--slot
.tls-footer-links--title
.tls-simple-text.-color-white.-weight-bold.
Tls links
.tls-footer-links--list
ul.tls-link-list
li.tls-link-list--slot
a.tls-link My Link
li.tls-link-list--slot
a.tls-link My Link
.tls-footer-links--slot
.tls-footer-links--title
.tls-simple-text.-color-white.-weight-bold.
Tls links
.tls-footer-links--list
ul.tls-link-list
li.tls-link-list--slot
a.tls-link My Link
li.tls-link-list--slot
a.tls-link My Link
.tls-footer-line
.tls-footer-content
.tls-footer--slot
a.tls-logo(href='#')
img.tls-logo--img(src='/atom/logo/logo/logo.svg')
.tls-footer--slot.tls-sm-visible
.tls-simple-text.-color-white.-size-12.
© 2019 TLScontact. Tous droits réservés.
.tls-footer--slot.tls-sm-visible
.tls-social-logo-group
.tls-social-logo-group--slot
a.tls-social-logo(href='#')
i.fab.fa-linkedin-in.tls-social-logo--icon
.tls-social-logo-group--slot
a.tls-social-logo(href='#')
i.fab.fa-linkedin-in.tls-social-logo--icon
.tls-footer--slot
a.tls-logo(href='#')
img.tls-logo--img(src='/atom/logo/logo/logo.svg')Form Group List
<div class="tls-form-group-list">
<div class="tls-navbar">
<div class="tls-navbar--content">
<div class="tls-navbar--logo"><a class="tls-logo" href="#"><img class="tls-logo--img" src="/atom/logo/logo/logo.svg"/></a></div>
<div class="tls-navbar--links -opened">
<div class="tls-navbar--slot">
<div class="tls-dropdown"><a class="tls-link-dropdown">
<div class="tls-link-dropdown--text">Opened</div>
<div class="tls-link-dropdown--icon"><i class="fa fa-chevron-up"></i></div></a>
<div class="tls-dropdown--content">
<div class="tls-dropdown--content">
<div class="tls-dropdown-list">
<div class="tls-dropdown-list--slot"><a class="tls-dropdown-text">My dropdown text</a></div>
<div class="tls-dropdown-list--slot">
<div class="tls-dropdown-text">A longer text to see the difference</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="tls-navbar--slot">
<div class="tls-dropdown"><a class="tls-link-dropdown">
<div class="tls-link-dropdown--text">Closed</div>
<div class="tls-link-dropdown--icon"><i class="fa fa-chevron-down"></i></div></a>
<div class="tls-dropdown--content hidden">
<div class="tls-dropdown--content hidden">Hidden content.</div>
</div>
</div>
</div>
<div class="tls-navbar--slot"><a class="tls-link-uppercase">My Uppercase Link</a></div>
<div class="tls-navbar--slot"><a class="tls-button-link">Button link</a></div>
</div>
<div class="tls-navbar--language">
<div class="tls-navbar--slot"><a class="tls-link-dropdown"><img class="tls-link-dropdown--flag" src="./flag-en.png"/>
<div class="tls-link-dropdown--text">Link</div>
<div class="tls-link-dropdown--icon"><i class="fa fa-chevron-down"></i></div></a></div>
</div>
<div class="tls-navbar--hamburger">
<div class="tls-hamburger -state-closed">
<div class="tls-hamburger--top-line"></div>
<div class="tls-hamburger--middle-line"></div>
<div class="tls-hamburger--bottom-line"></div>
</div>
</div>
</div>
</div>
<header class="tls-simple-banner">
<div class="tls-home-text-group">
<div class="tls-simple-text -color-white -size-22">Simple text<img class="tls-image" src="/atom/image/image.png"/>
</div>
<h1 class="tls-heading-1">Heading level 1</h1>
</div>
</header>
<div class="tls-form-group-list-content">
<div class="tls-large-card-info">
<div class="tls-card-lg">
<div class="tls-simple-text -size-16">
<p>lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur felis magna, lacinia ornare congue ornare, pharetra a leo. Suspendisse fermentum ut mi vel pulvinar. Maecenas gravida varius mauris, sed tempus risus pulvinar sed. In varius placerat erat in porttitor. Sed mollis est ligula, sit amet iaculis nulla rhoncus sed. Morbi quis felis et quam posuere sodales eget quis est. Integer congue faucibus nunc, rhoncus hendrerit massa lobortis sit amet. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
</div>
<div class="tls-simple-text -size-16">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur felis magna, lacinia ornare congue ornare, pharetra a leo. Suspendisse fermentum ut mi vel pulvinar. Maecenas gravida varius mauris, sed tempus risus pulvinar sed. In varius placerat erat in porttitor. Sed mollis est ligula, sit amet iaculis nulla rhoncus sed. Morbi quis felis et quam posuere sodales eget quis est. Integer congue faucibus nunc, rhoncus hendrerit massa lobortis sit amet. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
</div>
</div>
<div class="tls-large-card-info--decoration">
<div class="tls-decoration-vertical-lines -blue">
<div class="tls-line1"></div>
<div class="tls-line2"></div>
</div>
</div>
</div>
<div class="tls-form-group-list-info">
<div class="tls-form-group-list-info--content">
<div class="tls-status-card-group">
<div class="tls-status-card-group--slot">
<div class="tls-status-card-info">
<div class="tls-status-card-info--body">
<div class="tls-status-card-info-body--image">
<div class="tls-image-info"><img class="tls-image-info--img" src="/molecule/image-info/work.png"/>
<div class="tls-simple-text">Simple Text
</div>
</div>
</div>
<div class="tls-status-card-info-body--separator"></div>
<div class="tls-status-card-info-body--close">
<button class="tls-button-icon">×</button>
</div>
<div class="tls-status-card-info-body--content">
<div class="tls-status-card-info-body--badge">
<div class="tls-badge">
<div class="tls-badge--icon">
<div class="tls-circle -color-success"></div>
</div>
<div class="tls-badge--content">
<div class="tls-simple-text -color-success -size-16">Simple Text
</div>
</div>
</div>
</div>
<div class="tls-status-card-info-body--title">
<div class="tls-simple-text -weight-bold -size-22">Simple Text
</div>
</div>
<div class="tls-status-card-info-body--subtitle">
<div class="tls-simple-text">Simple Text
</div>
</div>
</div>
</div>
<div class="tls-status-card-info--time">
<div class="tls-status-card-info-time--description">
<div class="tls-simple-text -style-italic">Your have booked an appointment on:
</div>
</div>
<div class="tls-status-card-info-time--value">
<div class="tls-simple-text -weight-bold">Monday, 25th September 2020 at 09:00
</div>
</div>
</div>
<div class="tls-status-card-info--action">
<button class="tls-button-primary -small">Small Button
</button>
</div>
</div>
</div>
<div class="tls-status-card-group--slot">
<div class="tls-status-card-info">
<div class="tls-status-card-info--body">
<div class="tls-status-card-info-body--image">
<div class="tls-image-info"><img class="tls-image-info--img" src="/molecule/image-info/work.png"/>
<div class="tls-simple-text">Simple Text
</div>
</div>
</div>
<div class="tls-status-card-info-body--separator"></div>
<div class="tls-status-card-info-body--close">
<button class="tls-button-icon">×</button>
</div>
<div class="tls-status-card-info-body--content">
<div class="tls-status-card-info-body--badge">
<div class="tls-badge">
<div class="tls-badge--icon">
<div class="tls-circle -color-success"></div>
</div>
<div class="tls-badge--content">
<div class="tls-simple-text -color-success -size-16">Simple Text
</div>
</div>
</div>
</div>
<div class="tls-status-card-info-body--title">
<div class="tls-simple-text -weight-bold -size-22">Simple Text
</div>
</div>
<div class="tls-status-card-info-body--subtitle">
<div class="tls-simple-text">Simple Text
</div>
</div>
</div>
</div>
<div class="tls-status-card-info--time">
<div class="tls-status-card-info-time--description">
<div class="tls-simple-text -style-italic">Your have booked an appointment on:
</div>
</div>
<div class="tls-status-card-info-time--value">
<div class="tls-simple-text -weight-bold">Monday, 25th September 2020 at 09:00
</div>
</div>
</div>
<div class="tls-status-card-info--action">
<button class="tls-button-primary -small">Small Button
</button>
</div>
</div>
</div>
<div class="tls-status-card-group--slot">
<div class="tls-status-card-info">
<div class="tls-status-card-info--body">
<div class="tls-status-card-info-body--image">
<div class="tls-image-info"><img class="tls-image-info--img" src="/molecule/image-info/work.png"/>
<div class="tls-simple-text">Simple Text
</div>
</div>
</div>
<div class="tls-status-card-info-body--separator"></div>
<div class="tls-status-card-info-body--close">
<button class="tls-button-icon">×</button>
</div>
<div class="tls-status-card-info-body--content">
<div class="tls-status-card-info-body--badge">
<div class="tls-badge">
<div class="tls-badge--icon">
<div class="tls-circle -color-success"></div>
</div>
<div class="tls-badge--content">
<div class="tls-simple-text -color-success -size-16">Simple Text
</div>
</div>
</div>
</div>
<div class="tls-status-card-info-body--title">
<div class="tls-simple-text -weight-bold -size-22">Simple Text
</div>
</div>
<div class="tls-status-card-info-body--subtitle">
<div class="tls-simple-text">Simple Text
</div>
</div>
</div>
</div>
<div class="tls-status-card-info--time">
<div class="tls-status-card-info-time--description">
<div class="tls-simple-text -style-italic">Your have booked an appointment on:
</div>
</div>
<div class="tls-status-card-info-time--value">
<div class="tls-simple-text -weight-bold">Monday, 25th September 2020 at 09:00
</div>
</div>
</div>
<div class="tls-status-card-info--action">
<button class="tls-button-primary -small">Small Button
</button>
</div>
</div>
</div>
<div class="tls-status-card-group--slot">
<div class="tls-status-card-info">
<div class="tls-status-card-info--body">
<div class="tls-status-card-info-body--image">
<div class="tls-image-info"><img class="tls-image-info--img" src="/molecule/image-info/work.png"/>
<div class="tls-simple-text">Simple Text
</div>
</div>
</div>
<div class="tls-status-card-info-body--separator"></div>
<div class="tls-status-card-info-body--close">
<button class="tls-button-icon">×</button>
</div>
<div class="tls-status-card-info-body--content">
<div class="tls-status-card-info-body--badge">
<div class="tls-badge">
<div class="tls-badge--icon">
<div class="tls-circle -color-success"></div>
</div>
<div class="tls-badge--content">
<div class="tls-simple-text -color-success -size-16">Simple Text
</div>
</div>
</div>
</div>
<div class="tls-status-card-info-body--title">
<div class="tls-simple-text -weight-bold -size-22">Simple Text
</div>
</div>
<div class="tls-status-card-info-body--subtitle">
<div class="tls-simple-text">Simple Text
</div>
</div>
</div>
</div>
<div class="tls-status-card-info--time">
<div class="tls-status-card-info-time--description">
<div class="tls-simple-text -style-italic">Your have booked an appointment on:
</div>
</div>
<div class="tls-status-card-info-time--value">
<div class="tls-simple-text -weight-bold">Monday, 25th September 2020 at 09:00
</div>
</div>
</div>
<div class="tls-status-card-info--action">
<button class="tls-button-primary -small">Small Button
</button>
</div>
</div>
</div>
<div class="tls-status-card-group--slot">
<div class="tls-status-card-info">
<div class="tls-status-card-info--body">
<div class="tls-status-card-info-body--image">
<div class="tls-image-info"><img class="tls-image-info--img" src="/molecule/image-info/work.png"/>
<div class="tls-simple-text">Simple Text
</div>
</div>
</div>
<div class="tls-status-card-info-body--separator"></div>
<div class="tls-status-card-info-body--close">
<button class="tls-button-icon">×</button>
</div>
<div class="tls-status-card-info-body--content">
<div class="tls-status-card-info-body--badge">
<div class="tls-badge">
<div class="tls-badge--icon">
<div class="tls-circle -color-success"></div>
</div>
<div class="tls-badge--content">
<div class="tls-simple-text -color-success -size-16">Simple Text
</div>
</div>
</div>
</div>
<div class="tls-status-card-info-body--title">
<div class="tls-simple-text -weight-bold -size-22">Simple Text
</div>
</div>
<div class="tls-status-card-info-body--subtitle">
<div class="tls-simple-text">Simple Text
</div>
</div>
</div>
</div>
<div class="tls-status-card-info--time">
<div class="tls-status-card-info-time--description">
<div class="tls-simple-text -style-italic">Your have booked an appointment on:
</div>
</div>
<div class="tls-status-card-info-time--value">
<div class="tls-simple-text -weight-bold">Monday, 25th September 2020 at 09:00
</div>
</div>
</div>
<div class="tls-status-card-info--action">
<button class="tls-button-primary -small">Small Button
</button>
</div>
</div>
</div>
</div>
<div class="tls-form-group-list-action">
<button class="tls-button-primary -uppercase">Submit
</button>
</div>
</div>
</div>
</div>
<div class="tls-footer">
<div class="tls-footer-links">
<div class="tls-footer-links--slot">
<div class="tls-footer-links--title">
<div class="tls-simple-text -color-white -weight-bold">Tls links
</div>
</div>
<div class="tls-footer-links--list">
<ul class="tls-link-list">
<li class="tls-link-list--slot"><a class="tls-link">My Link</a></li>
<li class="tls-link-list--slot"><a class="tls-link">My Link</a></li>
</ul>
</div>
</div>
<div class="tls-footer-links--slot">
<div class="tls-footer-links--title">
<div class="tls-simple-text -color-white -weight-bold">Tls links
</div>
</div>
<div class="tls-footer-links--list">
<ul class="tls-link-list">
<li class="tls-link-list--slot"><a class="tls-link">My Link</a></li>
<li class="tls-link-list--slot"><a class="tls-link">My Link</a></li>
</ul>
</div>
</div>
<div class="tls-footer-links--slot">
<div class="tls-footer-links--title">
<div class="tls-simple-text -color-white -weight-bold">Tls links
</div>
</div>
<div class="tls-footer-links--list">
<ul class="tls-link-list">
<li class="tls-link-list--slot"><a class="tls-link">My Link</a></li>
<li class="tls-link-list--slot"><a class="tls-link">My Link</a></li>
</ul>
</div>
</div>
<div class="tls-footer-links--slot">
<div class="tls-footer-links--title">
<div class="tls-simple-text -color-white -weight-bold">Tls links
</div>
</div>
<div class="tls-footer-links--list">
<ul class="tls-link-list">
<li class="tls-link-list--slot"><a class="tls-link">My Link</a></li>
<li class="tls-link-list--slot"><a class="tls-link">My Link</a></li>
</ul>
</div>
</div>
</div>
<div class="tls-footer-line"></div>
<div class="tls-footer-content">
<div class="tls-footer--slot"><a class="tls-logo" href="#"><img class="tls-logo--img" src="/atom/logo/logo/logo.svg"/></a></div>
<div class="tls-footer--slot tls-sm-visible">
<div class="tls-simple-text -color-white -size-12">© 2019 TLScontact. Tous droits réservés.
</div>
</div>
<div class="tls-footer--slot tls-sm-visible">
<div class="tls-social-logo-group">
<div class="tls-social-logo-group--slot"><a class="tls-social-logo" href="#"><i class="fab fa-linkedin-in tls-social-logo--icon"></i></a></div>
<div class="tls-social-logo-group--slot"><a class="tls-social-logo" href="#"><i class="fab fa-linkedin-in tls-social-logo--icon"></i></a></div>
</div>
</div>
<div class="tls-footer--slot"><a class="tls-logo" href="#"><img class="tls-logo--img" src="/atom/logo/logo/logo.svg"/></a></div>
</div>
</div>
</div>.tls-form-group-list
.tls-navbar
.tls-navbar--content
.tls-navbar--logo
a.tls-logo(href='#')
img.tls-logo--img(src='/atom/logo/logo/logo.svg')
.tls-navbar--links.-opened
.tls-navbar--slot
.tls-dropdown
a.tls-link-dropdown
.tls-link-dropdown--text Opened
.tls-link-dropdown--icon
i.fa.fa-chevron-up
.tls-dropdown--content
.tls-dropdown--content
.tls-dropdown-list
.tls-dropdown-list--slot
a.tls-dropdown-text My dropdown text
.tls-dropdown-list--slot
.tls-dropdown-text A longer text to see the difference
.tls-navbar--slot
.tls-dropdown
a.tls-link-dropdown
.tls-link-dropdown--text Closed
.tls-link-dropdown--icon
i.fa.fa-chevron-down
.tls-dropdown--content.hidden
.tls-dropdown--content.hidden Hidden content.
.tls-navbar--slot
a.tls-link-uppercase My Uppercase Link
.tls-navbar--slot
a.tls-button-link Button link
.tls-navbar--language
.tls-navbar--slot
a.tls-link-dropdown
img.tls-link-dropdown--flag(src='./flag-en.png')
.tls-link-dropdown--text Link
.tls-link-dropdown--icon
i.fa.fa-chevron-down
.tls-navbar--hamburger
.tls-hamburger.-state-closed
.tls-hamburger--top-line
.tls-hamburger--middle-line
.tls-hamburger--bottom-line
header.tls-simple-banner
.tls-home-text-group
.tls-simple-text.-color-white.-size-22
| Simple text
img.tls-image(src='/atom/image/image.png')
h1.tls-heading-1 Heading level 1
.tls-form-group-list-content
.tls-large-card-info
.tls-card-lg
.tls-simple-text.-size-16
p lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur felis magna, lacinia ornare congue ornare, pharetra a leo. Suspendisse fermentum ut mi vel pulvinar. Maecenas gravida varius mauris, sed tempus risus pulvinar sed. In varius placerat erat in porttitor. Sed mollis est ligula, sit amet iaculis nulla rhoncus sed. Morbi quis felis et quam posuere sodales eget quis est. Integer congue faucibus nunc, rhoncus hendrerit massa lobortis sit amet. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
.tls-simple-text.-size-16
p Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur felis magna, lacinia ornare congue ornare, pharetra a leo. Suspendisse fermentum ut mi vel pulvinar. Maecenas gravida varius mauris, sed tempus risus pulvinar sed. In varius placerat erat in porttitor. Sed mollis est ligula, sit amet iaculis nulla rhoncus sed. Morbi quis felis et quam posuere sodales eget quis est. Integer congue faucibus nunc, rhoncus hendrerit massa lobortis sit amet. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
.tls-large-card-info--decoration
.tls-decoration-vertical-lines.-blue
.tls-line1
.tls-line2
.tls-form-group-list-info
.tls-form-group-list-info--content
.tls-status-card-group
.tls-status-card-group--slot
.tls-status-card-info
.tls-status-card-info--body
.tls-status-card-info-body--image
.tls-image-info
img.tls-image-info--img(src='/molecule/image-info/work.png')
.tls-simple-text.
Simple Text
.tls-status-card-info-body--separator
.tls-status-card-info-body--close
button.tls-button-icon ×
.tls-status-card-info-body--content
.tls-status-card-info-body--badge
.tls-badge
.tls-badge--icon
.tls-circle.-color-success
.tls-badge--content
.tls-simple-text.-color-success.-size-16.
Simple Text
.tls-status-card-info-body--title
.tls-simple-text.-weight-bold.-size-22.
Simple Text
.tls-status-card-info-body--subtitle
.tls-simple-text.
Simple Text
.tls-status-card-info--time
.tls-status-card-info-time--description
.tls-simple-text.-style-italic.
Your have booked an appointment on:
.tls-status-card-info-time--value
.tls-simple-text.-weight-bold.
Monday, 25th September 2020 at 09:00
.tls-status-card-info--action
button.tls-button-primary.-small.
Small Button
.tls-status-card-group--slot
.tls-status-card-info
.tls-status-card-info--body
.tls-status-card-info-body--image
.tls-image-info
img.tls-image-info--img(src='/molecule/image-info/work.png')
.tls-simple-text.
Simple Text
.tls-status-card-info-body--separator
.tls-status-card-info-body--close
button.tls-button-icon ×
.tls-status-card-info-body--content
.tls-status-card-info-body--badge
.tls-badge
.tls-badge--icon
.tls-circle.-color-success
.tls-badge--content
.tls-simple-text.-color-success.-size-16.
Simple Text
.tls-status-card-info-body--title
.tls-simple-text.-weight-bold.-size-22.
Simple Text
.tls-status-card-info-body--subtitle
.tls-simple-text.
Simple Text
.tls-status-card-info--time
.tls-status-card-info-time--description
.tls-simple-text.-style-italic.
Your have booked an appointment on:
.tls-status-card-info-time--value
.tls-simple-text.-weight-bold.
Monday, 25th September 2020 at 09:00
.tls-status-card-info--action
button.tls-button-primary.-small.
Small Button
.tls-status-card-group--slot
.tls-status-card-info
.tls-status-card-info--body
.tls-status-card-info-body--image
.tls-image-info
img.tls-image-info--img(src='/molecule/image-info/work.png')
.tls-simple-text.
Simple Text
.tls-status-card-info-body--separator
.tls-status-card-info-body--close
button.tls-button-icon ×
.tls-status-card-info-body--content
.tls-status-card-info-body--badge
.tls-badge
.tls-badge--icon
.tls-circle.-color-success
.tls-badge--content
.tls-simple-text.-color-success.-size-16.
Simple Text
.tls-status-card-info-body--title
.tls-simple-text.-weight-bold.-size-22.
Simple Text
.tls-status-card-info-body--subtitle
.tls-simple-text.
Simple Text
.tls-status-card-info--time
.tls-status-card-info-time--description
.tls-simple-text.-style-italic.
Your have booked an appointment on:
.tls-status-card-info-time--value
.tls-simple-text.-weight-bold.
Monday, 25th September 2020 at 09:00
.tls-status-card-info--action
button.tls-button-primary.-small.
Small Button
.tls-status-card-group--slot
.tls-status-card-info
.tls-status-card-info--body
.tls-status-card-info-body--image
.tls-image-info
img.tls-image-info--img(src='/molecule/image-info/work.png')
.tls-simple-text.
Simple Text
.tls-status-card-info-body--separator
.tls-status-card-info-body--close
button.tls-button-icon ×
.tls-status-card-info-body--content
.tls-status-card-info-body--badge
.tls-badge
.tls-badge--icon
.tls-circle.-color-success
.tls-badge--content
.tls-simple-text.-color-success.-size-16.
Simple Text
.tls-status-card-info-body--title
.tls-simple-text.-weight-bold.-size-22.
Simple Text
.tls-status-card-info-body--subtitle
.tls-simple-text.
Simple Text
.tls-status-card-info--time
.tls-status-card-info-time--description
.tls-simple-text.-style-italic.
Your have booked an appointment on:
.tls-status-card-info-time--value
.tls-simple-text.-weight-bold.
Monday, 25th September 2020 at 09:00
.tls-status-card-info--action
button.tls-button-primary.-small.
Small Button
.tls-status-card-group--slot
.tls-status-card-info
.tls-status-card-info--body
.tls-status-card-info-body--image
.tls-image-info
img.tls-image-info--img(src='/molecule/image-info/work.png')
.tls-simple-text.
Simple Text
.tls-status-card-info-body--separator
.tls-status-card-info-body--close
button.tls-button-icon ×
.tls-status-card-info-body--content
.tls-status-card-info-body--badge
.tls-badge
.tls-badge--icon
.tls-circle.-color-success
.tls-badge--content
.tls-simple-text.-color-success.-size-16.
Simple Text
.tls-status-card-info-body--title
.tls-simple-text.-weight-bold.-size-22.
Simple Text
.tls-status-card-info-body--subtitle
.tls-simple-text.
Simple Text
.tls-status-card-info--time
.tls-status-card-info-time--description
.tls-simple-text.-style-italic.
Your have booked an appointment on:
.tls-status-card-info-time--value
.tls-simple-text.-weight-bold.
Monday, 25th September 2020 at 09:00
.tls-status-card-info--action
button.tls-button-primary.-small.
Small Button
.tls-form-group-list-action
button.tls-button-primary.-uppercase.
Submit
.tls-footer
.tls-footer-links
.tls-footer-links--slot
.tls-footer-links--title
.tls-simple-text.-color-white.-weight-bold.
Tls links
.tls-footer-links--list
ul.tls-link-list
li.tls-link-list--slot
a.tls-link My Link
li.tls-link-list--slot
a.tls-link My Link
.tls-footer-links--slot
.tls-footer-links--title
.tls-simple-text.-color-white.-weight-bold.
Tls links
.tls-footer-links--list
ul.tls-link-list
li.tls-link-list--slot
a.tls-link My Link
li.tls-link-list--slot
a.tls-link My Link
.tls-footer-links--slot
.tls-footer-links--title
.tls-simple-text.-color-white.-weight-bold.
Tls links
.tls-footer-links--list
ul.tls-link-list
li.tls-link-list--slot
a.tls-link My Link
li.tls-link-list--slot
a.tls-link My Link
.tls-footer-links--slot
.tls-footer-links--title
.tls-simple-text.-color-white.-weight-bold.
Tls links
.tls-footer-links--list
ul.tls-link-list
li.tls-link-list--slot
a.tls-link My Link
li.tls-link-list--slot
a.tls-link My Link
.tls-footer-line
.tls-footer-content
.tls-footer--slot
a.tls-logo(href='#')
img.tls-logo--img(src='/atom/logo/logo/logo.svg')
.tls-footer--slot.tls-sm-visible
.tls-simple-text.-color-white.-size-12.
© 2019 TLScontact. Tous droits réservés.
.tls-footer--slot.tls-sm-visible
.tls-social-logo-group
.tls-social-logo-group--slot
a.tls-social-logo(href='#')
i.fab.fa-linkedin-in.tls-social-logo--icon
.tls-social-logo-group--slot
a.tls-social-logo(href='#')
i.fab.fa-linkedin-in.tls-social-logo--icon
.tls-footer--slot
a.tls-logo(href='#')
img.tls-logo--img(src='/atom/logo/logo/logo.svg')Covid Form List
<div class="tls-form-group-covid">
<div class="tls-navbar">
<div class="tls-navbar--content">
<div class="tls-navbar--logo"><a class="tls-logo" href="#"><img class="tls-logo--img" src="/atom/logo/logo/logo.svg"/></a></div>
<div class="tls-navbar--links -opened">
<div class="tls-navbar--slot">
<div class="tls-dropdown"><a class="tls-link-dropdown">
<div class="tls-link-dropdown--text">Opened</div>
<div class="tls-link-dropdown--icon"><i class="fa fa-chevron-up"></i></div></a>
<div class="tls-dropdown--content">
<div class="tls-dropdown--content">
<div class="tls-dropdown-list">
<div class="tls-dropdown-list--slot"><a class="tls-dropdown-text">My dropdown text</a></div>
<div class="tls-dropdown-list--slot">
<div class="tls-dropdown-text">A longer text to see the difference</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="tls-navbar--slot">
<div class="tls-dropdown"><a class="tls-link-dropdown">
<div class="tls-link-dropdown--text">Closed</div>
<div class="tls-link-dropdown--icon"><i class="fa fa-chevron-down"></i></div></a>
<div class="tls-dropdown--content hidden">
<div class="tls-dropdown--content hidden">Hidden content.</div>
</div>
</div>
</div>
<div class="tls-navbar--slot"><a class="tls-link-uppercase">My Uppercase Link</a></div>
<div class="tls-navbar--slot"><a class="tls-button-link">Button link</a></div>
</div>
<div class="tls-navbar--language">
<div class="tls-navbar--slot"><a class="tls-link-dropdown"><img class="tls-link-dropdown--flag" src="./flag-en.png"/>
<div class="tls-link-dropdown--text">Link</div>
<div class="tls-link-dropdown--icon"><i class="fa fa-chevron-down"></i></div></a></div>
</div>
<div class="tls-navbar--hamburger">
<div class="tls-hamburger -state-closed">
<div class="tls-hamburger--top-line"></div>
<div class="tls-hamburger--middle-line"></div>
<div class="tls-hamburger--bottom-line"></div>
</div>
</div>
</div>
</div>
<header class="tls-simple-banner">
<div class="tls-home-text-group">
<div class="tls-simple-text -color-white -size-22">Simple text<img class="tls-image" src="/atom/image/image.png"/>
</div>
<h1 class="tls-heading-1">Heading level 1</h1>
</div>
</header>
<div class="tls-form-group-content">
<div class="tls-large-card-info">
<div class="tls-card-lg">
<div class="tls-simple-text -size-16">
<p>lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur felis magna, lacinia ornare congue ornare, pharetra a leo. Suspendisse fermentum ut mi vel pulvinar. Maecenas gravida varius mauris, sed tempus risus pulvinar sed. In varius placerat erat in porttitor. Sed mollis est ligula, sit amet iaculis nulla rhoncus sed. Morbi quis felis et quam posuere sodales eget quis est. Integer congue faucibus nunc, rhoncus hendrerit massa lobortis sit amet. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
</div>
<div class="tls-simple-text -size-16">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur felis magna, lacinia ornare congue ornare, pharetra a leo. Suspendisse fermentum ut mi vel pulvinar. Maecenas gravida varius mauris, sed tempus risus pulvinar sed. In varius placerat erat in porttitor. Sed mollis est ligula, sit amet iaculis nulla rhoncus sed. Morbi quis felis et quam posuere sodales eget quis est. Integer congue faucibus nunc, rhoncus hendrerit massa lobortis sit amet. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
</div>
</div>
<div class="tls-large-card-info--decoration">
<div class="tls-decoration-vertical-lines -blue">
<div class="tls-line1"></div>
<div class="tls-line2"></div>
</div>
</div>
</div>
<div class="tls-form-group-info">
<div class="tls-form-group-info--content">
<div class="tls-form-group-info--title">
<h2 class="tls-heading-2">Application(s)</h2>
<div class="tls-simple-text -size-16">Here are the mandatory steps to apply for a Schengen visa
</div>
</div>
<div class="tls-status-covid-card-group">
<div class="tls-status-covid-card-group--slot">
<div class="tls-status-covid-card-info">
<div class="tls-status-covid-card-info--title">
<div class="tls-simple-text -color-white -size-16">Patient 1
</div>
</div>
<div class="tls-status-covid-card-info--body">
<div class="tls-status-covid-card-info-body--content">
<div class="tls-form">
<div class="tls-complex-form--slot">
<div class="tls-simple-text -color-danger -weight-bold -size-16">Simple Text with danger message</div>
</div>
<div class="tls-complex-form--slot">
<h2 class="tls-heading-2">Heading level 2</h2>
</div>
<div class="tls-form--slot">
<div class="tls-field">
<div class="tls-field--label">
<label class="tls-label">Label</label>
</div>
<div class="tls-field--area">
<input class="tls-input-text valid" type="text"/>
</div>
</div>
</div>
<div class="tls-form--slot">
<div class="tls-field">
<div class="tls-field--label">
<label class="tls-label">Label</label>
</div>
<div class="tls-field--area">
<input class="tls-input-text valid" type="text"/>
</div>
</div>
<div class="tls-simple-text -size-16">Simple Text
</div>
</div>
<div class="tls-form--slot">
<div class="tls-field">
<div class="tls-field--label">
<label class="tls-label">Label</label>
</div>
<div class="tls-field--area">
<input class="tls-input-text valid" type="text"/>
</div>
</div>
</div>
<div class="tls-form--slot">
<div class="tls-field inline">
<div class="tls-field--label-group">
<label class="tls-label">Label</label>
</div>
<div class="tls-field--area">
<div class="tls-input-check-group">
<input class="tls-input-check" id="val1" type="checkbox"/>
<label class="tls-input-check--label" for="val1">Value 1</label>
</div>
<div class="tls-input-check-group">
<input class="tls-input-check" id="val2" type="checkbox"/>
<label class="tls-input-check--label" for="val2">Value 2</label>
</div>
<div class="tls-input-check-group">
<input class="tls-input-check" id="val3" type="checkbox"/>
<label class="tls-input-check--label" for="val3">Value 3</label>
</div>
</div>
</div>
</div>
<div class="tls-form--slot">
<div class="tls-form--group-button">
<div class="tls-form-button">
<button class="tls-button-primary -small">Submit
</button>
</div>
<div class="tls-form-button">
<button class="tls-button-primary -small">Submit
</button>
</div>
</div>
</div>
<div class="tls-complex-form--slot">
<h2 class="tls-heading-2">Heading level 2</h2>
</div>
<div class="tls-form--slot">
<div class="tls-field">
<div class="tls-field--label">
<label class="tls-label">Label</label><span class="tls-mandatory-indicator tls-simple-text -color-danger -weight-bold -size-16">*</span>
</div>
<div class="tls-field--area">
<input class="tls-input-text valid" type="text"/>
</div>
</div>
</div>
<div class="tls-form--slot">
<div class="tls-form-button">
<button class="tls-button-primary -small">Submit
</button>
</div>
</div>
</div>
<div class="tls-form--group-button">
<div class="tls-form-button"></div>
<button class="tls-button-primary">Submit
</button>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="tls-form-group-info--new-form">
<label class="tls-label">Label</label>
</div>
<div class="tls-status-card-info--action">
<div class="tls-form--group-button">
<div class="tls-form-button"><a class="tls-button-link">Button link</a></div>
<div class="tls-form-button">
<button class="tls-button-primary -small">Submit
</button>
</div>
</div>
</div>
<div class="tls-form-group-action">
<button class="tls-button-primary -uppercase">Submit
</button>
</div>
</div>
</div>
</div>
<div class="tls-footer">
<div class="tls-footer-links">
<div class="tls-footer-links--slot">
<div class="tls-footer-links--title">
<div class="tls-simple-text -color-white -weight-bold">Tls links
</div>
</div>
<div class="tls-footer-links--list">
<ul class="tls-link-list">
<li class="tls-link-list--slot"><a class="tls-link">My Link</a></li>
<li class="tls-link-list--slot"><a class="tls-link">My Link</a></li>
</ul>
</div>
</div>
<div class="tls-footer-links--slot">
<div class="tls-footer-links--title">
<div class="tls-simple-text -color-white -weight-bold">Tls links
</div>
</div>
<div class="tls-footer-links--list">
<ul class="tls-link-list">
<li class="tls-link-list--slot"><a class="tls-link">My Link</a></li>
<li class="tls-link-list--slot"><a class="tls-link">My Link</a></li>
</ul>
</div>
</div>
<div class="tls-footer-links--slot">
<div class="tls-footer-links--title">
<div class="tls-simple-text -color-white -weight-bold">Tls links
</div>
</div>
<div class="tls-footer-links--list">
<ul class="tls-link-list">
<li class="tls-link-list--slot"><a class="tls-link">My Link</a></li>
<li class="tls-link-list--slot"><a class="tls-link">My Link</a></li>
</ul>
</div>
</div>
<div class="tls-footer-links--slot">
<div class="tls-footer-links--title">
<div class="tls-simple-text -color-white -weight-bold">Tls links
</div>
</div>
<div class="tls-footer-links--list">
<ul class="tls-link-list">
<li class="tls-link-list--slot"><a class="tls-link">My Link</a></li>
<li class="tls-link-list--slot"><a class="tls-link">My Link</a></li>
</ul>
</div>
</div>
</div>
<div class="tls-footer-line"></div>
<div class="tls-footer-content">
<div class="tls-footer--slot"><a class="tls-logo" href="#"><img class="tls-logo--img" src="/atom/logo/logo/logo.svg"/></a></div>
<div class="tls-footer--slot tls-sm-visible">
<div class="tls-simple-text -color-white -size-12">© 2019 TLScontact. Tous droits réservés.
</div>
</div>
<div class="tls-footer--slot tls-sm-visible">
<div class="tls-social-logo-group">
<div class="tls-social-logo-group--slot"><a class="tls-social-logo" href="#"><i class="fab fa-linkedin-in tls-social-logo--icon"></i></a></div>
<div class="tls-social-logo-group--slot"><a class="tls-social-logo" href="#"><i class="fab fa-linkedin-in tls-social-logo--icon"></i></a></div>
</div>
</div>
<div class="tls-footer--slot"><a class="tls-logo" href="#"><img class="tls-logo--img" src="/atom/logo/logo/logo.svg"/></a></div>
</div>
</div>
</div>.tls-form-group-covid
.tls-navbar
.tls-navbar--content
.tls-navbar--logo
a.tls-logo(href='#')
img.tls-logo--img(src='/atom/logo/logo/logo.svg')
.tls-navbar--links.-opened
.tls-navbar--slot
.tls-dropdown
a.tls-link-dropdown
.tls-link-dropdown--text Opened
.tls-link-dropdown--icon
i.fa.fa-chevron-up
.tls-dropdown--content
.tls-dropdown--content
.tls-dropdown-list
.tls-dropdown-list--slot
a.tls-dropdown-text My dropdown text
.tls-dropdown-list--slot
.tls-dropdown-text A longer text to see the difference
.tls-navbar--slot
.tls-dropdown
a.tls-link-dropdown
.tls-link-dropdown--text Closed
.tls-link-dropdown--icon
i.fa.fa-chevron-down
.tls-dropdown--content.hidden
.tls-dropdown--content.hidden Hidden content.
.tls-navbar--slot
a.tls-link-uppercase My Uppercase Link
.tls-navbar--slot
a.tls-button-link Button link
.tls-navbar--language
.tls-navbar--slot
a.tls-link-dropdown
img.tls-link-dropdown--flag(src='./flag-en.png')
.tls-link-dropdown--text Link
.tls-link-dropdown--icon
i.fa.fa-chevron-down
.tls-navbar--hamburger
.tls-hamburger.-state-closed
.tls-hamburger--top-line
.tls-hamburger--middle-line
.tls-hamburger--bottom-line
header.tls-simple-banner
.tls-home-text-group
.tls-simple-text.-color-white.-size-22
| Simple text
img.tls-image(src='/atom/image/image.png')
h1.tls-heading-1 Heading level 1
.tls-form-group-content
.tls-large-card-info
.tls-card-lg
.tls-simple-text.-size-16
p lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur felis magna, lacinia ornare congue ornare, pharetra a leo. Suspendisse fermentum ut mi vel pulvinar. Maecenas gravida varius mauris, sed tempus risus pulvinar sed. In varius placerat erat in porttitor. Sed mollis est ligula, sit amet iaculis nulla rhoncus sed. Morbi quis felis et quam posuere sodales eget quis est. Integer congue faucibus nunc, rhoncus hendrerit massa lobortis sit amet. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
.tls-simple-text.-size-16
p Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur felis magna, lacinia ornare congue ornare, pharetra a leo. Suspendisse fermentum ut mi vel pulvinar. Maecenas gravida varius mauris, sed tempus risus pulvinar sed. In varius placerat erat in porttitor. Sed mollis est ligula, sit amet iaculis nulla rhoncus sed. Morbi quis felis et quam posuere sodales eget quis est. Integer congue faucibus nunc, rhoncus hendrerit massa lobortis sit amet. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
.tls-large-card-info--decoration
.tls-decoration-vertical-lines.-blue
.tls-line1
.tls-line2
.tls-form-group-info
.tls-form-group-info--content
.tls-form-group-info--title
h2.tls-heading-2 Application(s)
.tls-simple-text.-size-16.
Here are the mandatory steps to apply for a Schengen visa
.tls-status-covid-card-group
.tls-status-covid-card-group--slot
.tls-status-covid-card-info
.tls-status-covid-card-info--title
.tls-simple-text.-color-white.-size-16.
Patient 1
.tls-status-covid-card-info--body
.tls-status-covid-card-info-body--content
.tls-form
.tls-complex-form--slot
.tls-simple-text.-color-danger.-weight-bold.-size-16 Simple Text with danger message
.tls-complex-form--slot
h2.tls-heading-2 Heading level 2
.tls-form--slot
.tls-field
.tls-field--label
label.tls-label Label
.tls-field--area
input.tls-input-text.valid(type='text')
.tls-form--slot
.tls-field
.tls-field--label
label.tls-label Label
.tls-field--area
input.tls-input-text.valid(type='text')
.tls-simple-text.-size-16.
Simple Text
.tls-form--slot
.tls-field
.tls-field--label
label.tls-label Label
.tls-field--area
input.tls-input-text.valid(type='text')
.tls-form--slot
.tls-field.inline
.tls-field--label-group
label.tls-label Label
.tls-field--area
.tls-input-check-group
input.tls-input-check#val1(type='checkbox')
label.tls-input-check--label(for='val1') Value 1
.tls-input-check-group
input.tls-input-check#val2(type='checkbox')
label.tls-input-check--label(for='val2') Value 2
.tls-input-check-group
input.tls-input-check#val3(type='checkbox')
label.tls-input-check--label(for='val3') Value 3
.tls-form--slot
.tls-form--group-button
.tls-form-button
button.tls-button-primary.-small.
Submit
.tls-form-button
button.tls-button-primary.-small.
Submit
.tls-complex-form--slot
h2.tls-heading-2 Heading level 2
.tls-form--slot
.tls-field
.tls-field--label
label.tls-label Label
span.tls-mandatory-indicator.tls-simple-text.-color-danger.-weight-bold.-size-16 *
.tls-field--area
input.tls-input-text.valid(type='text')
.tls-form--slot
.tls-form-button
button.tls-button-primary.-small.
Submit
.tls-form--group-button
.tls-form-button
button.tls-button-primary.
Submit
.tls-form-group-info--new-form
label.tls-label Label
.tls-status-card-info--action
.tls-form--group-button
.tls-form-button
a.tls-button-link Button link
.tls-form-button
button.tls-button-primary.-small.
Submit
.tls-form-group-action
button.tls-button-primary.-uppercase.
Submit
.tls-footer
.tls-footer-links
.tls-footer-links--slot
.tls-footer-links--title
.tls-simple-text.-color-white.-weight-bold.
Tls links
.tls-footer-links--list
ul.tls-link-list
li.tls-link-list--slot
a.tls-link My Link
li.tls-link-list--slot
a.tls-link My Link
.tls-footer-links--slot
.tls-footer-links--title
.tls-simple-text.-color-white.-weight-bold.
Tls links
.tls-footer-links--list
ul.tls-link-list
li.tls-link-list--slot
a.tls-link My Link
li.tls-link-list--slot
a.tls-link My Link
.tls-footer-links--slot
.tls-footer-links--title
.tls-simple-text.-color-white.-weight-bold.
Tls links
.tls-footer-links--list
ul.tls-link-list
li.tls-link-list--slot
a.tls-link My Link
li.tls-link-list--slot
a.tls-link My Link
.tls-footer-links--slot
.tls-footer-links--title
.tls-simple-text.-color-white.-weight-bold.
Tls links
.tls-footer-links--list
ul.tls-link-list
li.tls-link-list--slot
a.tls-link My Link
li.tls-link-list--slot
a.tls-link My Link
.tls-footer-line
.tls-footer-content
.tls-footer--slot
a.tls-logo(href='#')
img.tls-logo--img(src='/atom/logo/logo/logo.svg')
.tls-footer--slot.tls-sm-visible
.tls-simple-text.-color-white.-size-12.
© 2019 TLScontact. Tous droits réservés.
.tls-footer--slot.tls-sm-visible
.tls-social-logo-group
.tls-social-logo-group--slot
a.tls-social-logo(href='#')
i.fab.fa-linkedin-in.tls-social-logo--icon
.tls-social-logo-group--slot
a.tls-social-logo(href='#')
i.fab.fa-linkedin-in.tls-social-logo--icon
.tls-footer--slot
a.tls-logo(href='#')
img.tls-logo--img(src='/atom/logo/logo/logo.svg')TLS home page.
<div class="tls-home">
<div class="tls-navbar">
<div class="tls-navbar--content">
<div class="tls-navbar--logo"><a class="tls-logo" href="#"><img class="tls-logo--img" src="/atom/logo/logo/logo.svg"/></a></div>
<div class="tls-navbar--links -opened">
<div class="tls-navbar--slot">
<div class="tls-dropdown"><a class="tls-link-dropdown">
<div class="tls-link-dropdown--text">Opened</div>
<div class="tls-link-dropdown--icon"><i class="fa fa-chevron-up"></i></div></a>
<div class="tls-dropdown--content">
<div class="tls-dropdown--content">
<div class="tls-dropdown-list">
<div class="tls-dropdown-list--slot"><a class="tls-dropdown-text">My dropdown text</a></div>
<div class="tls-dropdown-list--slot">
<div class="tls-dropdown-text">A longer text to see the difference</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="tls-navbar--slot">
<div class="tls-dropdown"><a class="tls-link-dropdown">
<div class="tls-link-dropdown--text">Closed</div>
<div class="tls-link-dropdown--icon"><i class="fa fa-chevron-down"></i></div></a>
<div class="tls-dropdown--content hidden">
<div class="tls-dropdown--content hidden">Hidden content.</div>
</div>
</div>
</div>
<div class="tls-navbar--slot"><a class="tls-link-uppercase">My Uppercase Link</a></div>
<div class="tls-navbar--slot"><a class="tls-button-link">Button link</a></div>
</div>
<div class="tls-navbar--language">
<div class="tls-navbar--slot"><a class="tls-link-dropdown"><img class="tls-link-dropdown--flag" src="./flag-en.png"/>
<div class="tls-link-dropdown--text">Link</div>
<div class="tls-link-dropdown--icon"><i class="fa fa-chevron-down"></i></div></a></div>
</div>
<div class="tls-navbar--hamburger">
<div class="tls-hamburger -state-closed">
<div class="tls-hamburger--top-line"></div>
<div class="tls-hamburger--middle-line"></div>
<div class="tls-hamburger--bottom-line"></div>
</div>
</div>
</div>
</div>
<div class="tls-news-banner">
<div class="tls-simple-text -color-white">This is the news banner<a href="">...with a link</a>
</div>
</div>
<div class="tls-home-banner">
<div class="tls-home-banner--img" style="background-image: url("/organism/banner/home-banner/italy.jpg")">
<div class="tls-home-banner--content">
<div class="tls-home-text-group">
<div class="tls-simple-text -color-white -size-22">Simple text<img class="tls-image" src="/atom/image/image.png"/>
</div>
<h1 class="tls-heading-1">Heading level 1</h1>
</div>
</div>
</div>
<div class="tls-home-banner--decoration">
<div class="tls-decoration-vertical-lines -blue">
<div class="tls-line1"></div>
<div class="tls-line2"></div>
</div>
</div>
</div>
<div class="tls-home--content">
<div class="tls-home-select">
<div class="tls-home-select--form">
<div class="tls-inline-forms">
<div class="tls-inline-forms--field">
<div class="tls-field">
<div class="tls-field--label">
<label class="tls-label">Label</label>
</div>
<div class="tls-field--area">
<div class="tls-input-select-container">
<select class="tls-input-select">
<div class="tls-input-select--content">
<option class="tls-input-select-option" value="AB">Option 1</option>
<option class="tls-input-select-option" value="CD">Option 2</option>
<option class="tls-input-select-option" value="ZD">Option 3</option>
</div>
</select>
</div>
</div>
</div>
</div>
<div class="tls-inline-forms--button">
<button class="tls-button-primary -small">Submit
</button>
</div>
</div>
</div>
<div class="tls-home-select--footer">
<div class="tls-simple-text -size-12">Container footer example
</div>
</div>
</div>
</div>
<div class="tls-footer">
<div class="tls-footer-links">
<div class="tls-footer-links--slot">
<div class="tls-footer-links--title">
<div class="tls-simple-text -color-white -weight-bold">Tls links
</div>
</div>
<div class="tls-footer-links--list">
<ul class="tls-link-list">
<li class="tls-link-list--slot"><a class="tls-link">My Link</a></li>
<li class="tls-link-list--slot"><a class="tls-link">My Link</a></li>
</ul>
</div>
</div>
<div class="tls-footer-links--slot">
<div class="tls-footer-links--title">
<div class="tls-simple-text -color-white -weight-bold">Tls links
</div>
</div>
<div class="tls-footer-links--list">
<ul class="tls-link-list">
<li class="tls-link-list--slot"><a class="tls-link">My Link</a></li>
<li class="tls-link-list--slot"><a class="tls-link">My Link</a></li>
</ul>
</div>
</div>
<div class="tls-footer-links--slot">
<div class="tls-footer-links--title">
<div class="tls-simple-text -color-white -weight-bold">Tls links
</div>
</div>
<div class="tls-footer-links--list">
<ul class="tls-link-list">
<li class="tls-link-list--slot"><a class="tls-link">My Link</a></li>
<li class="tls-link-list--slot"><a class="tls-link">My Link</a></li>
</ul>
</div>
</div>
<div class="tls-footer-links--slot">
<div class="tls-footer-links--title">
<div class="tls-simple-text -color-white -weight-bold">Tls links
</div>
</div>
<div class="tls-footer-links--list">
<ul class="tls-link-list">
<li class="tls-link-list--slot"><a class="tls-link">My Link</a></li>
<li class="tls-link-list--slot"><a class="tls-link">My Link</a></li>
</ul>
</div>
</div>
</div>
<div class="tls-footer-line"></div>
<div class="tls-footer-content">
<div class="tls-footer--slot"><a class="tls-logo" href="#"><img class="tls-logo--img" src="/atom/logo/logo/logo.svg"/></a></div>
<div class="tls-footer--slot tls-sm-visible">
<div class="tls-simple-text -color-white -size-12">© 2019 TLScontact. Tous droits réservés.
</div>
</div>
<div class="tls-footer--slot tls-sm-visible">
<div class="tls-social-logo-group">
<div class="tls-social-logo-group--slot"><a class="tls-social-logo" href="#"><i class="fab fa-linkedin-in tls-social-logo--icon"></i></a></div>
<div class="tls-social-logo-group--slot"><a class="tls-social-logo" href="#"><i class="fab fa-linkedin-in tls-social-logo--icon"></i></a></div>
</div>
</div>
<div class="tls-footer--slot"><a class="tls-logo" href="#"><img class="tls-logo--img" src="/atom/logo/logo/logo.svg"/></a></div>
</div>
</div>
</div>.tls-home
.tls-navbar
.tls-navbar--content
.tls-navbar--logo
a.tls-logo(href='#')
img.tls-logo--img(src='/atom/logo/logo/logo.svg')
.tls-navbar--links.-opened
.tls-navbar--slot
.tls-dropdown
a.tls-link-dropdown
.tls-link-dropdown--text Opened
.tls-link-dropdown--icon
i.fa.fa-chevron-up
.tls-dropdown--content
.tls-dropdown--content
.tls-dropdown-list
.tls-dropdown-list--slot
a.tls-dropdown-text My dropdown text
.tls-dropdown-list--slot
.tls-dropdown-text A longer text to see the difference
.tls-navbar--slot
.tls-dropdown
a.tls-link-dropdown
.tls-link-dropdown--text Closed
.tls-link-dropdown--icon
i.fa.fa-chevron-down
.tls-dropdown--content.hidden
.tls-dropdown--content.hidden Hidden content.
.tls-navbar--slot
a.tls-link-uppercase My Uppercase Link
.tls-navbar--slot
a.tls-button-link Button link
.tls-navbar--language
.tls-navbar--slot
a.tls-link-dropdown
img.tls-link-dropdown--flag(src='./flag-en.png')
.tls-link-dropdown--text Link
.tls-link-dropdown--icon
i.fa.fa-chevron-down
.tls-navbar--hamburger
.tls-hamburger.-state-closed
.tls-hamburger--top-line
.tls-hamburger--middle-line
.tls-hamburger--bottom-line
.tls-news-banner
.tls-simple-text.-color-white
| This is the news banner
a(href) ...with a link
.tls-home-banner
.tls-home-banner--img(style='background-image: url("/organism/banner/home-banner/italy.jpg")')
.tls-home-banner--content
.tls-home-text-group
.tls-simple-text.-color-white.-size-22
| Simple text
img.tls-image(src='/atom/image/image.png')
h1.tls-heading-1 Heading level 1
.tls-home-banner--decoration
.tls-decoration-vertical-lines.-blue
.tls-line1
.tls-line2
.tls-home--content
.tls-home-select
.tls-home-select--form
.tls-inline-forms
.tls-inline-forms--field
.tls-field
.tls-field--label
label.tls-label Label
.tls-field--area
.tls-input-select-container
select.tls-input-select
option.tls-input-select-option(value='AB') Option 1
option.tls-input-select-option(value='CD') Option 2
option.tls-input-select-option(value='ZD') Option 3
.tls-inline-forms--button
button.tls-button-primary.-small.
Submit
.tls-home-select--footer
.tls-simple-text.-size-12.
Container footer example
.tls-footer
.tls-footer-links
.tls-footer-links--slot
.tls-footer-links--title
.tls-simple-text.-color-white.-weight-bold.
Tls links
.tls-footer-links--list
ul.tls-link-list
li.tls-link-list--slot
a.tls-link My Link
li.tls-link-list--slot
a.tls-link My Link
.tls-footer-links--slot
.tls-footer-links--title
.tls-simple-text.-color-white.-weight-bold.
Tls links
.tls-footer-links--list
ul.tls-link-list
li.tls-link-list--slot
a.tls-link My Link
li.tls-link-list--slot
a.tls-link My Link
.tls-footer-links--slot
.tls-footer-links--title
.tls-simple-text.-color-white.-weight-bold.
Tls links
.tls-footer-links--list
ul.tls-link-list
li.tls-link-list--slot
a.tls-link My Link
li.tls-link-list--slot
a.tls-link My Link
.tls-footer-links--slot
.tls-footer-links--title
.tls-simple-text.-color-white.-weight-bold.
Tls links
.tls-footer-links--list
ul.tls-link-list
li.tls-link-list--slot
a.tls-link My Link
li.tls-link-list--slot
a.tls-link My Link
.tls-footer-line
.tls-footer-content
.tls-footer--slot
a.tls-logo(href='#')
img.tls-logo--img(src='/atom/logo/logo/logo.svg')
.tls-footer--slot.tls-sm-visible
.tls-simple-text.-color-white.-size-12.
© 2019 TLScontact. Tous droits réservés.
.tls-footer--slot.tls-sm-visible
.tls-social-logo-group
.tls-social-logo-group--slot
a.tls-social-logo(href='#')
i.fab.fa-linkedin-in.tls-social-logo--icon
.tls-social-logo-group--slot
a.tls-social-logo(href='#')
i.fab.fa-linkedin-in.tls-social-logo--icon
.tls-footer--slot
a.tls-logo(href='#')
img.tls-logo--img(src='/atom/logo/logo/logo.svg')Contact us
<div class="tls-inquiry">
<div class="tls-navbar">
<div class="tls-navbar--content">
<div class="tls-navbar--logo"><a class="tls-logo" href="#"><img class="tls-logo--img" src="/atom/logo/logo/logo.svg"/></a></div>
<div class="tls-navbar--links -opened">
<div class="tls-navbar--slot">
<div class="tls-dropdown"><a class="tls-link-dropdown">
<div class="tls-link-dropdown--text">Opened</div>
<div class="tls-link-dropdown--icon"><i class="fa fa-chevron-up"></i></div></a>
<div class="tls-dropdown--content">
<div class="tls-dropdown--content">
<div class="tls-dropdown-list">
<div class="tls-dropdown-list--slot"><a class="tls-dropdown-text">My dropdown text</a></div>
<div class="tls-dropdown-list--slot">
<div class="tls-dropdown-text">A longer text to see the difference</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="tls-navbar--slot">
<div class="tls-dropdown"><a class="tls-link-dropdown">
<div class="tls-link-dropdown--text">Closed</div>
<div class="tls-link-dropdown--icon"><i class="fa fa-chevron-down"></i></div></a>
<div class="tls-dropdown--content hidden">
<div class="tls-dropdown--content hidden">Hidden content.</div>
</div>
</div>
</div>
<div class="tls-navbar--slot"><a class="tls-link-uppercase">My Uppercase Link</a></div>
<div class="tls-navbar--slot"><a class="tls-button-link">Button link</a></div>
</div>
<div class="tls-navbar--language">
<div class="tls-navbar--slot"><a class="tls-link-dropdown"><img class="tls-link-dropdown--flag" src="./flag-en.png"/>
<div class="tls-link-dropdown--text">Link</div>
<div class="tls-link-dropdown--icon"><i class="fa fa-chevron-down"></i></div></a></div>
</div>
<div class="tls-navbar--hamburger">
<div class="tls-hamburger -state-closed">
<div class="tls-hamburger--top-line"></div>
<div class="tls-hamburger--middle-line"></div>
<div class="tls-hamburger--bottom-line"></div>
</div>
</div>
</div>
</div>
<header class="tls-simple-banner">
<div class="tls-home-text-group">
<div class="tls-simple-text -color-white -size-22">Simple text<img class="tls-image" src="/atom/image/image.png"/>
</div>
<h1 class="tls-heading-1">Heading level 1</h1>
</div>
</header>
<div class="tls-inquiry-content">
<div class="tls-large-card-map">
<div class="tls-card-lg">
<div class="tls-large-card-body">
<div class="tls-large-card-map--description">
<div class="tls-address">
<div class="tls-address-icon"><img class="tls-address-icon-img" src="/molecule/address/return-to-the-centre.png"/></div>
<div class="tls-address-desc">
<div class="tls-address-title">
<h2 class="tls-heading-2">Heading level 2</h2>
</div>
<div class="tls-address-description-bold">
<div class="tls-simple-text -color-main -weight-bold -size-16">Address desc first line
</div>
</div>
<div class="tls-address-description-italic">
<div class="tls-simple-text -color-main -size-16 -style-italic">address desc rest line
</div>
</div>
</div>
</div>
</div>
<div class="tls-large-card-map--map">
<div class="tls-google-map">
<iframe class="tls-google-map-iframe" src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3212.8176904014567!2d6.639447615032586!3d36.36519458004049!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x12f176eb4e52720f%3A0x840973aeb1fc132a!2sTLScontact%20Visa%20Application%20Center%20Constantine!5e0!3m2!1sen!2stn!4v1566901882835!5m2!1sen!2stn"></iframe>
</div>
</div>
</div>
</div>
<div class="tls-large-card-map--decoration">
<div class="tls-decoration-vertical-lines -blue">
<div class="tls-line1"></div>
<div class="tls-line2"></div>
</div>
</div>
</div>
<div class="tls-inquiry-help">
<div class="tls-inquiry-help--title">
<h2 class="tls-heading-2">Heading level 2</h2>
</div>
<div class="tls-inquiry-help--avs">
<div class="tls-avs">
<div class="tls-avs-icon-ribbon"><img class="tls-avs-icon-img" src="/organism/card-avs/icon-ribbon.png"/></div>
<div class="tls-card-info">
<div class="tls-card-info--content">
<div class="tls-card-info--content-paragraph">
<div class="tls-simple-text -size-16">A very long Simple text on multiple lines
</div>
</div>
<div class="tls-card-info--content-price">
<div class="tls-simple-text -color-main -weight-bold -size-19">Simple text
</div>
</div>
<div class="tls-card-info--content-button">
<div class="tls-button-dynamic">
<div class="tls-button-dynamic--text">
<div class="tls-simple-text -color-primary -size-19">Simple Text
</div>
</div>
<div class="tls-button-dynamic--decoration">
<div class="tls-line1"></div>
<div class="tls-line2"></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="tls-inquiry-help--centre">
<div class="tls-simple-text -color-main -size-16">
<h3>
<u>Get in touch with our Call Centre:</u>
</h3>
<p>contact us<strong>+375 740 7409999 (mobile phone) / 8 740 7409999 (landline phone).</strong></p>
<ul>
<li>text1<strong>phone-number</strong></li>
<li>text2<strong>Monday</strong></li>
</ul>
</div>
</div>
<div class="tls-inquiry-form-area">
<div class="tls-schengen-form-content--slot">
<div class="tls-inquiry-form">
<div class="tls-error-info">
<div class="tls-error-info--content">
<div class="tls-simple-text -size-16">Simple Text</div>
</div>
</div>
<div class="tls-row">
<div class="tls-form--slot">
<div class="tls-field">
<div class="tls-field--label">
<label class="tls-label">Label</label>
</div>
<div class="tls-field--area">
<input class="tls-input-text valid" type="text"/>
</div>
</div>
<div class="tls-simple-text -color-danger -weight-bold -size-16">Simple Text with danger message
</div>
</div>
<div class="tls-form--slot">
<div class="tls-field">
<div class="tls-field--label">
<label class="tls-label">Label</label>
</div>
<div class="tls-field--area">
<input class="tls-input-text valid" type="text"/>
</div>
</div>
<div class="tls-simple-text -color-danger -weight-bold -size-16">Simple Text with danger message
</div>
</div>
</div>
<div class="tls-row">
<div class="tls-form--slot">
<div class="tls-field">
<div class="tls-field--label">
<label class="tls-label">Label</label>
</div>
<div class="tls-field--area">
<input class="tls-input-text valid" type="text"/>
</div>
</div>
<div class="tls-simple-text -color-danger -weight-bold -size-16">Simple Text with danger message
</div>
</div>
<div class="tls-form--slot">
<div class="tls-field">
<div class="tls-field--label">
<label class="tls-label">Label</label>
</div>
<div class="tls-field--area">
<div class="tls-input-select-container">
<select class="tls-input-select">
<div class="tls-input-select--content">
<option class="tls-input-select-option" value="AB">Option 1</option>
<option class="tls-input-select-option" value="CD">Option 2</option>
<option class="tls-input-select-option" value="ZD">Option 3</option>
</div>
</select>
</div>
</div>
</div>
<div class="tls-simple-text -color-danger -weight-bold -size-16">Simple Text with danger message
</div>
</div>
</div>
<div class="tls-row">
<div class="tls-textarea">
<div class="tls-textarea--label">
<label class="tls-label">Label</label>
</div>
<div class="tls-textarea--area">
<textarea class="tls-textarea-textarea"></textarea>
</div>
<div class="tls-simple-text -color-danger -weight-bold -size-16">Simple Text with danger message
</div>
</div>
</div>
<div class="tls-row">
<div class="tls-inquiry-form--text">* Mandatory fields</div>
</div>
<div class="tls-form--group-button">
<div class="tls-form-button">
<button class="tls-button-primary">Submit
</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="tls-footer">
<div class="tls-footer-links">
<div class="tls-footer-links--slot">
<div class="tls-footer-links--title">
<div class="tls-simple-text -color-white -weight-bold">Tls links
</div>
</div>
<div class="tls-footer-links--list">
<ul class="tls-link-list">
<li class="tls-link-list--slot"><a class="tls-link">My Link</a></li>
<li class="tls-link-list--slot"><a class="tls-link">My Link</a></li>
</ul>
</div>
</div>
<div class="tls-footer-links--slot">
<div class="tls-footer-links--title">
<div class="tls-simple-text -color-white -weight-bold">Tls links
</div>
</div>
<div class="tls-footer-links--list">
<ul class="tls-link-list">
<li class="tls-link-list--slot"><a class="tls-link">My Link</a></li>
<li class="tls-link-list--slot"><a class="tls-link">My Link</a></li>
</ul>
</div>
</div>
<div class="tls-footer-links--slot">
<div class="tls-footer-links--title">
<div class="tls-simple-text -color-white -weight-bold">Tls links
</div>
</div>
<div class="tls-footer-links--list">
<ul class="tls-link-list">
<li class="tls-link-list--slot"><a class="tls-link">My Link</a></li>
<li class="tls-link-list--slot"><a class="tls-link">My Link</a></li>
</ul>
</div>
</div>
<div class="tls-footer-links--slot">
<div class="tls-footer-links--title">
<div class="tls-simple-text -color-white -weight-bold">Tls links
</div>
</div>
<div class="tls-footer-links--list">
<ul class="tls-link-list">
<li class="tls-link-list--slot"><a class="tls-link">My Link</a></li>
<li class="tls-link-list--slot"><a class="tls-link">My Link</a></li>
</ul>
</div>
</div>
</div>
<div class="tls-footer-line"></div>
<div class="tls-footer-content">
<div class="tls-footer--slot"><a class="tls-logo" href="#"><img class="tls-logo--img" src="/atom/logo/logo/logo.svg"/></a></div>
<div class="tls-footer--slot tls-sm-visible">
<div class="tls-simple-text -color-white -size-12">© 2019 TLScontact. Tous droits réservés.
</div>
</div>
<div class="tls-footer--slot tls-sm-visible">
<div class="tls-social-logo-group">
<div class="tls-social-logo-group--slot"><a class="tls-social-logo" href="#"><i class="fab fa-linkedin-in tls-social-logo--icon"></i></a></div>
<div class="tls-social-logo-group--slot"><a class="tls-social-logo" href="#"><i class="fab fa-linkedin-in tls-social-logo--icon"></i></a></div>
</div>
</div>
<div class="tls-footer--slot"><a class="tls-logo" href="#"><img class="tls-logo--img" src="/atom/logo/logo/logo.svg"/></a></div>
</div>
</div>
</div>.tls-inquiry
.tls-navbar
.tls-navbar--content
.tls-navbar--logo
a.tls-logo(href='#')
img.tls-logo--img(src='/atom/logo/logo/logo.svg')
.tls-navbar--links.-opened
.tls-navbar--slot
.tls-dropdown
a.tls-link-dropdown
.tls-link-dropdown--text Opened
.tls-link-dropdown--icon
i.fa.fa-chevron-up
.tls-dropdown--content
.tls-dropdown--content
.tls-dropdown-list
.tls-dropdown-list--slot
a.tls-dropdown-text My dropdown text
.tls-dropdown-list--slot
.tls-dropdown-text A longer text to see the difference
.tls-navbar--slot
.tls-dropdown
a.tls-link-dropdown
.tls-link-dropdown--text Closed
.tls-link-dropdown--icon
i.fa.fa-chevron-down
.tls-dropdown--content.hidden
.tls-dropdown--content.hidden Hidden content.
.tls-navbar--slot
a.tls-link-uppercase My Uppercase Link
.tls-navbar--slot
a.tls-button-link Button link
.tls-navbar--language
.tls-navbar--slot
a.tls-link-dropdown
img.tls-link-dropdown--flag(src='./flag-en.png')
.tls-link-dropdown--text Link
.tls-link-dropdown--icon
i.fa.fa-chevron-down
.tls-navbar--hamburger
.tls-hamburger.-state-closed
.tls-hamburger--top-line
.tls-hamburger--middle-line
.tls-hamburger--bottom-line
header.tls-simple-banner
.tls-home-text-group
.tls-simple-text.-color-white.-size-22
| Simple text
img.tls-image(src='/atom/image/image.png')
h1.tls-heading-1 Heading level 1
.tls-inquiry-content
.tls-large-card-map
.tls-card-lg
.tls-large-card-body
.tls-large-card-map--description
.tls-address
.tls-address-icon
img.tls-address-icon-img(src='/molecule/address/return-to-the-centre.png')
.tls-address-desc
.tls-address-title
h2.tls-heading-2 Heading level 2
.tls-address-description-bold
.tls-simple-text.-color-main.-weight-bold.-size-16.
Address desc first line
.tls-address-description-italic
.tls-simple-text.-color-main.-size-16.-style-italic.
address desc rest line
.tls-large-card-map--map
.tls-google-map
iframe.tls-google-map-iframe(src='https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3212.8176904014567!2d6.639447615032586!3d36.36519458004049!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x12f176eb4e52720f%3A0x840973aeb1fc132a!2sTLScontact%20Visa%20Application%20Center%20Constantine!5e0!3m2!1sen!2stn!4v1566901882835!5m2!1sen!2stn')
.tls-large-card-map--decoration
.tls-decoration-vertical-lines.-blue
.tls-line1
.tls-line2
.tls-inquiry-help
.tls-inquiry-help--title
h2.tls-heading-2 Heading level 2
.tls-inquiry-help--avs
.tls-avs
.tls-avs-icon-ribbon
img.tls-avs-icon-img(src='/organism/card-avs/icon-ribbon.png')
.tls-card-info
.tls-card-info--content
.tls-card-info--content-paragraph
.tls-simple-text.-size-16.
A very long Simple text on multiple lines
.tls-card-info--content-price
.tls-simple-text.-color-main.-weight-bold.-size-19.
Simple text
.tls-card-info--content-button
.tls-button-dynamic
.tls-button-dynamic--text
.tls-simple-text.-color-primary.-size-19.
Simple Text
.tls-button-dynamic--decoration
.tls-line1
.tls-line2
.tls-inquiry-help--centre
.tls-simple-text.-color-main.-size-16
h3
u Get in touch with our Call Centre:
p
| contact us
strong +375 740 7409999 (mobile phone) / 8 740 7409999 (landline phone).
ul
li
| text1
strong phone-number
li
| text2
strong Monday
.tls-inquiry-form-area
.tls-schengen-form-content--slot
.tls-inquiry-form
.tls-error-info
.tls-error-info--content
.tls-simple-text.-size-16 Simple Text
.tls-row
.tls-form--slot
.tls-field
.tls-field--label
label.tls-label Label
.tls-field--area
input.tls-input-text.valid(type='text')
.tls-simple-text.-color-danger.-weight-bold.-size-16.
Simple Text with danger message
.tls-form--slot
.tls-field
.tls-field--label
label.tls-label Label
.tls-field--area
input.tls-input-text.valid(type='text')
.tls-simple-text.-color-danger.-weight-bold.-size-16.
Simple Text with danger message
.tls-row
.tls-form--slot
.tls-field
.tls-field--label
label.tls-label Label
.tls-field--area
input.tls-input-text.valid(type='text')
.tls-simple-text.-color-danger.-weight-bold.-size-16.
Simple Text with danger message
.tls-form--slot
.tls-field
.tls-field--label
label.tls-label Label
.tls-field--area
.tls-input-select-container
select.tls-input-select
option.tls-input-select-option(value='AB') Option 1
option.tls-input-select-option(value='CD') Option 2
option.tls-input-select-option(value='ZD') Option 3
.tls-simple-text.-color-danger.-weight-bold.-size-16.
Simple Text with danger message
.tls-row
.tls-textarea
.tls-textarea--label
label.tls-label Label
.tls-textarea--area
textarea.tls-textarea-textarea
.tls-simple-text.-color-danger.-weight-bold.-size-16.
Simple Text with danger message
.tls-row
.tls-inquiry-form--text * Mandatory fields
.tls-form--group-button
.tls-form-button
button.tls-button-primary.
Submit
.tls-footer
.tls-footer-links
.tls-footer-links--slot
.tls-footer-links--title
.tls-simple-text.-color-white.-weight-bold.
Tls links
.tls-footer-links--list
ul.tls-link-list
li.tls-link-list--slot
a.tls-link My Link
li.tls-link-list--slot
a.tls-link My Link
.tls-footer-links--slot
.tls-footer-links--title
.tls-simple-text.-color-white.-weight-bold.
Tls links
.tls-footer-links--list
ul.tls-link-list
li.tls-link-list--slot
a.tls-link My Link
li.tls-link-list--slot
a.tls-link My Link
.tls-footer-links--slot
.tls-footer-links--title
.tls-simple-text.-color-white.-weight-bold.
Tls links
.tls-footer-links--list
ul.tls-link-list
li.tls-link-list--slot
a.tls-link My Link
li.tls-link-list--slot
a.tls-link My Link
.tls-footer-links--slot
.tls-footer-links--title
.tls-simple-text.-color-white.-weight-bold.
Tls links
.tls-footer-links--list
ul.tls-link-list
li.tls-link-list--slot
a.tls-link My Link
li.tls-link-list--slot
a.tls-link My Link
.tls-footer-line
.tls-footer-content
.tls-footer--slot
a.tls-logo(href='#')
img.tls-logo--img(src='/atom/logo/logo/logo.svg')
.tls-footer--slot.tls-sm-visible
.tls-simple-text.-color-white.-size-12.
© 2019 TLScontact. Tous droits réservés.
.tls-footer--slot.tls-sm-visible
.tls-social-logo-group
.tls-social-logo-group--slot
a.tls-social-logo(href='#')
i.fab.fa-linkedin-in.tls-social-logo--icon
.tls-social-logo-group--slot
a.tls-social-logo(href='#')
i.fab.fa-linkedin-in.tls-social-logo--icon
.tls-footer--slot
a.tls-logo(href='#')
img.tls-logo--img(src='/atom/logo/logo/logo.svg')Legal
<div class="tls-legal">
<div class="tls-navbar">
<div class="tls-navbar--content">
<div class="tls-navbar--logo"><a class="tls-logo" href="#"><img class="tls-logo--img" src="/atom/logo/logo/logo.svg"/></a></div>
<div class="tls-navbar--links -opened">
<div class="tls-navbar--slot">
<div class="tls-dropdown"><a class="tls-link-dropdown">
<div class="tls-link-dropdown--text">Opened</div>
<div class="tls-link-dropdown--icon"><i class="fa fa-chevron-up"></i></div></a>
<div class="tls-dropdown--content">
<div class="tls-dropdown--content">
<div class="tls-dropdown-list">
<div class="tls-dropdown-list--slot"><a class="tls-dropdown-text">My dropdown text</a></div>
<div class="tls-dropdown-list--slot">
<div class="tls-dropdown-text">A longer text to see the difference</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="tls-navbar--slot">
<div class="tls-dropdown"><a class="tls-link-dropdown">
<div class="tls-link-dropdown--text">Closed</div>
<div class="tls-link-dropdown--icon"><i class="fa fa-chevron-down"></i></div></a>
<div class="tls-dropdown--content hidden">
<div class="tls-dropdown--content hidden">Hidden content.</div>
</div>
</div>
</div>
<div class="tls-navbar--slot"><a class="tls-link-uppercase">My Uppercase Link</a></div>
<div class="tls-navbar--slot"><a class="tls-button-link">Button link</a></div>
</div>
<div class="tls-navbar--language">
<div class="tls-navbar--slot"><a class="tls-link-dropdown"><img class="tls-link-dropdown--flag" src="./flag-en.png"/>
<div class="tls-link-dropdown--text">Link</div>
<div class="tls-link-dropdown--icon"><i class="fa fa-chevron-down"></i></div></a></div>
</div>
<div class="tls-navbar--hamburger">
<div class="tls-hamburger -state-closed">
<div class="tls-hamburger--top-line"></div>
<div class="tls-hamburger--middle-line"></div>
<div class="tls-hamburger--bottom-line"></div>
</div>
</div>
</div>
</div>
<header class="tls-simple-banner">
<div class="tls-home-text-group">
<div class="tls-simple-text -color-white -size-22">Simple text<img class="tls-image" src="/atom/image/image.png"/>
</div>
<h1 class="tls-heading-1">Heading level 1</h1>
</div>
</header>
<div class="tls-legal-content">
<div class="tls-large-card-info">
<div class="tls-card-lg">
<div class="tls-simple-text -size-16">
<p>lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur felis magna, lacinia ornare congue ornare, pharetra a leo. Suspendisse fermentum ut mi vel pulvinar. Maecenas gravida varius mauris, sed tempus risus pulvinar sed. In varius placerat erat in porttitor. Sed mollis est ligula, sit amet iaculis nulla rhoncus sed. Morbi quis felis et quam posuere sodales eget quis est. Integer congue faucibus nunc, rhoncus hendrerit massa lobortis sit amet. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
</div>
<div class="tls-simple-text -size-16">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur felis magna, lacinia ornare congue ornare, pharetra a leo. Suspendisse fermentum ut mi vel pulvinar. Maecenas gravida varius mauris, sed tempus risus pulvinar sed. In varius placerat erat in porttitor. Sed mollis est ligula, sit amet iaculis nulla rhoncus sed. Morbi quis felis et quam posuere sodales eget quis est. Integer congue faucibus nunc, rhoncus hendrerit massa lobortis sit amet. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
</div>
</div>
<div class="tls-large-card-info--decoration">
<div class="tls-decoration-vertical-lines -blue">
<div class="tls-line1"></div>
<div class="tls-line2"></div>
</div>
</div>
</div>
<div class="tls-legal-action">
<div class="tls-legal-action--heading">
<div class="tls-legal-action--slot">
<h2 class="tls-heading-2">Heading level 2</h2>
</div>
<div class="tls-legal-action--slot">
<button class="tls-button-primary">Button
</button>
</div>
</div>
<div class="tls-legal-action--title">
<div class="tls-simple-text -size-16">If you wish to upgrade your appointment to Premium, Prime time or purchase an Express Courier Return, please note that you can get in touch with our representatives on the day of your appointment.
</div>
</div>
<div class="tls-legal-action--slot">
<h2 class="tls-heading-2">Heading level 2</h2>
</div>
<div class="tls-legal-action--slot">
<div class="tls-legal-action-text">
<ul class="tls-link-list">
<li class="tls-link-list--slot"><a class="tls-link">My Link</a></li>
<li class="tls-link-list--slot"><a class="tls-link">My Link</a></li>
</ul>
<div class="tls-simple-text -size-16">TLScontact and its worldwide companies (hereinafter “TLScontact”, “we”, “us”, “our”) is committed to protecting the privacy of the customers who visit TLScontact websites (hereinafter “Customers”, “you”, “your”). The purpose of this cookies policy (hereinafter the “Cookies Policy”) is to explain how and why we use cookies to ensure you remain informed and in control of your information.
</div>
</div>
</div>
</div>
<div class="tls-legal-info">
<div class="tls-simple-text -size-16">TLScontact Visa Application Centre is a service provided by Unitary Enterprise Providing Services "TLSContact" (hereunder referred to as “TLScontact”, “we”, “us”, “our”) with company registration number 192205546, registered office at office 60, h. 40, 220004, Nemiga str., Minsk, Belarus.
</div>
<h2 class="tls-heading-2">Tab title example</h2>
<div class="tls-simple-text -size-16">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur felis magna, lacinia ornare congue ornare, pharetra a leo. Suspendisse fermentum ut mi vel pulvinar. Maecenas gravida varius mauris, sed tempus risus pulvinar sed. In varius placerat erat in porttitor. Sed mollis est ligula, sit amet iaculis nulla rhoncus sed. Morbi quis felis et quam posuere sodales eget quis est. Integer congue faucibus nunc, rhoncus hendrerit massa lobortis sit amet. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
</div>
<div class="tls-tab-content-paragraph"><a class="tls-link">A link</a></div>
<h2 class="tls-heading-2">Which cookies do third parties set on our websites?</h2>
<div class="tls-simple-text -size-16">TLScontact allows some third parties to set and access their own cookies on your device.
</div>
<div class="tls-simple-text -size-16">Third parties place the following cookie on TLScontact websites.
</div>
<div class="tls-legal-table">
<h3 class="tls-heading-3">Analytics and Performance Cookies</h3>
<div class="tls-table-card-info">
<div class="tls-card-lg">
<table>
<thead>
<th></th>
<th class="tls-table-head">Simple Text
</th>
<th class="tls-table-head">Simple Text
</th>
<th class="tls-table-head">Simple Text
</th>
</thead>
<tbody>
<tr>
<th class="tls-table-head">City
</th>
<td class="tls-table-cell">Simple Text
</td>
<td class="tls-table-cell">Simple Text
</td>
<td class="tls-table-cell">Simple Text
</td>
</tr>
<tr>
<th class="tls-table-head">City
</th>
<td class="tls-table-cell">Simple Text
</td>
<td class="tls-table-cell">Simple Text
</td>
<td class="tls-table-cell">Simple Text
</td>
</tr>
<tr>
<th class="tls-table-head">City
</th>
<td class="tls-table-cell">Simple Text
</td>
<td class="tls-table-cell">Simple Text
</td>
<td class="tls-table-cell">Simple Text
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<div class="tls-simple-text -size-16">For example, Google Analytics is used to identify your visit to the site. Google Analytics help TLScontact to understand how visitors engage with their sites or apps. When Google Analytics is used, the web browser automatically sends certain information to Google. For further information, please visit https://support.google.com/analytics/answer/6004245?hl=en-GB
</div>
<div class="tls-simple-text -size-16">To learn more about third party cookies, please refer to third party websites.
</div>
<div class="tls-tab-content-paragraph"><i class="fa fa-chevron-up"></i><a class="tls-link">A link</a></div>
</div>
</div>
<div class="tls-footer">
<div class="tls-footer-links">
<div class="tls-footer-links--slot">
<div class="tls-footer-links--title">
<div class="tls-simple-text -color-white -weight-bold">Tls links
</div>
</div>
<div class="tls-footer-links--list">
<ul class="tls-link-list">
<li class="tls-link-list--slot"><a class="tls-link">My Link</a></li>
<li class="tls-link-list--slot"><a class="tls-link">My Link</a></li>
</ul>
</div>
</div>
<div class="tls-footer-links--slot">
<div class="tls-footer-links--title">
<div class="tls-simple-text -color-white -weight-bold">Tls links
</div>
</div>
<div class="tls-footer-links--list">
<ul class="tls-link-list">
<li class="tls-link-list--slot"><a class="tls-link">My Link</a></li>
<li class="tls-link-list--slot"><a class="tls-link">My Link</a></li>
</ul>
</div>
</div>
<div class="tls-footer-links--slot">
<div class="tls-footer-links--title">
<div class="tls-simple-text -color-white -weight-bold">Tls links
</div>
</div>
<div class="tls-footer-links--list">
<ul class="tls-link-list">
<li class="tls-link-list--slot"><a class="tls-link">My Link</a></li>
<li class="tls-link-list--slot"><a class="tls-link">My Link</a></li>
</ul>
</div>
</div>
<div class="tls-footer-links--slot">
<div class="tls-footer-links--title">
<div class="tls-simple-text -color-white -weight-bold">Tls links
</div>
</div>
<div class="tls-footer-links--list">
<ul class="tls-link-list">
<li class="tls-link-list--slot"><a class="tls-link">My Link</a></li>
<li class="tls-link-list--slot"><a class="tls-link">My Link</a></li>
</ul>
</div>
</div>
</div>
<div class="tls-footer-line"></div>
<div class="tls-footer-content">
<div class="tls-footer--slot"><a class="tls-logo" href="#"><img class="tls-logo--img" src="/atom/logo/logo/logo.svg"/></a></div>
<div class="tls-footer--slot tls-sm-visible">
<div class="tls-simple-text -color-white -size-12">© 2019 TLScontact. Tous droits réservés.
</div>
</div>
<div class="tls-footer--slot tls-sm-visible">
<div class="tls-social-logo-group">
<div class="tls-social-logo-group--slot"><a class="tls-social-logo" href="#"><i class="fab fa-linkedin-in tls-social-logo--icon"></i></a></div>
<div class="tls-social-logo-group--slot"><a class="tls-social-logo" href="#"><i class="fab fa-linkedin-in tls-social-logo--icon"></i></a></div>
</div>
</div>
<div class="tls-footer--slot"><a class="tls-logo" href="#"><img class="tls-logo--img" src="/atom/logo/logo/logo.svg"/></a></div>
</div>
</div>
</div>.tls-legal
.tls-navbar
.tls-navbar--content
.tls-navbar--logo
a.tls-logo(href='#')
img.tls-logo--img(src='/atom/logo/logo/logo.svg')
.tls-navbar--links.-opened
.tls-navbar--slot
.tls-dropdown
a.tls-link-dropdown
.tls-link-dropdown--text Opened
.tls-link-dropdown--icon
i.fa.fa-chevron-up
.tls-dropdown--content
.tls-dropdown--content
.tls-dropdown-list
.tls-dropdown-list--slot
a.tls-dropdown-text My dropdown text
.tls-dropdown-list--slot
.tls-dropdown-text A longer text to see the difference
.tls-navbar--slot
.tls-dropdown
a.tls-link-dropdown
.tls-link-dropdown--text Closed
.tls-link-dropdown--icon
i.fa.fa-chevron-down
.tls-dropdown--content.hidden
.tls-dropdown--content.hidden Hidden content.
.tls-navbar--slot
a.tls-link-uppercase My Uppercase Link
.tls-navbar--slot
a.tls-button-link Button link
.tls-navbar--language
.tls-navbar--slot
a.tls-link-dropdown
img.tls-link-dropdown--flag(src='./flag-en.png')
.tls-link-dropdown--text Link
.tls-link-dropdown--icon
i.fa.fa-chevron-down
.tls-navbar--hamburger
.tls-hamburger.-state-closed
.tls-hamburger--top-line
.tls-hamburger--middle-line
.tls-hamburger--bottom-line
header.tls-simple-banner
.tls-home-text-group
.tls-simple-text.-color-white.-size-22
| Simple text
img.tls-image(src='/atom/image/image.png')
h1.tls-heading-1 Heading level 1
.tls-legal-content
.tls-large-card-info
.tls-card-lg
.tls-simple-text.-size-16
p lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur felis magna, lacinia ornare congue ornare, pharetra a leo. Suspendisse fermentum ut mi vel pulvinar. Maecenas gravida varius mauris, sed tempus risus pulvinar sed. In varius placerat erat in porttitor. Sed mollis est ligula, sit amet iaculis nulla rhoncus sed. Morbi quis felis et quam posuere sodales eget quis est. Integer congue faucibus nunc, rhoncus hendrerit massa lobortis sit amet. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
.tls-simple-text.-size-16
p Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur felis magna, lacinia ornare congue ornare, pharetra a leo. Suspendisse fermentum ut mi vel pulvinar. Maecenas gravida varius mauris, sed tempus risus pulvinar sed. In varius placerat erat in porttitor. Sed mollis est ligula, sit amet iaculis nulla rhoncus sed. Morbi quis felis et quam posuere sodales eget quis est. Integer congue faucibus nunc, rhoncus hendrerit massa lobortis sit amet. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
.tls-large-card-info--decoration
.tls-decoration-vertical-lines.-blue
.tls-line1
.tls-line2
.tls-legal-action
.tls-legal-action--heading
.tls-legal-action--slot
h2.tls-heading-2 Heading level 2
.tls-legal-action--slot
button.tls-button-primary.
Button
.tls-legal-action--title
.tls-simple-text.-size-16.
If you wish to upgrade your appointment to Premium, Prime time or purchase an Express Courier Return, please note that you can get in touch with our representatives on the day of your appointment.
.tls-legal-action--slot
h2.tls-heading-2 Heading level 2
.tls-legal-action--slot
.tls-legal-action-text
ul.tls-link-list
li.tls-link-list--slot
a.tls-link My Link
li.tls-link-list--slot
a.tls-link My Link
.tls-simple-text.-size-16.
TLScontact and its worldwide companies (hereinafter “TLScontact”, “we”, “us”, “our”) is committed to protecting the privacy of the customers who visit TLScontact websites (hereinafter “Customers”, “you”, “your”). The purpose of this cookies policy (hereinafter the “Cookies Policy”) is to explain how and why we use cookies to ensure you remain informed and in control of your information.
.tls-legal-info
.tls-simple-text.-size-16.
TLScontact Visa Application Centre is a service provided by Unitary Enterprise Providing Services "TLSContact" (hereunder referred to as “TLScontact”, “we”, “us”, “our”) with company registration number 192205546, registered office at office 60, h. 40, 220004, Nemiga str., Minsk, Belarus.
h2.tls-heading-2 Tab title example
.tls-simple-text.-size-16.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur felis magna, lacinia ornare congue ornare, pharetra a leo. Suspendisse fermentum ut mi vel pulvinar. Maecenas gravida varius mauris, sed tempus risus pulvinar sed. In varius placerat erat in porttitor. Sed mollis est ligula, sit amet iaculis nulla rhoncus sed. Morbi quis felis et quam posuere sodales eget quis est. Integer congue faucibus nunc, rhoncus hendrerit massa lobortis sit amet. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
.tls-tab-content-paragraph
a.tls-link A link
h2.tls-heading-2 Which cookies do third parties set on our websites?
.tls-simple-text.-size-16.
TLScontact allows some third parties to set and access their own cookies on your device.
.tls-simple-text.-size-16.
Third parties place the following cookie on TLScontact websites.
.tls-legal-table
h3.tls-heading-3 Analytics and Performance Cookies
.tls-table-card-info
.tls-card-lg
table
thead
tr
th
th.tls-table-head.
Simple Text
th.tls-table-head.
Simple Text
th.tls-table-head.
Simple Text
tbody
tr
th.tls-table-head.
City
td.tls-table-cell.
Simple Text
td.tls-table-cell.
Simple Text
td.tls-table-cell.
Simple Text
tr
th.tls-table-head.
City
td.tls-table-cell.
Simple Text
td.tls-table-cell.
Simple Text
td.tls-table-cell.
Simple Text
tr
th.tls-table-head.
City
td.tls-table-cell.
Simple Text
td.tls-table-cell.
Simple Text
td.tls-table-cell.
Simple Text
.tls-simple-text.-size-16.
For example, Google Analytics is used to identify your visit to the site. Google Analytics help TLScontact to understand how visitors engage with their sites or apps. When Google Analytics is used, the web browser automatically sends certain information to Google. For further information, please visit https://support.google.com/analytics/answer/6004245?hl=en-GB
.tls-simple-text.-size-16.
To learn more about third party cookies, please refer to third party websites.
.tls-tab-content-paragraph
i.fa.fa-chevron-up
a.tls-link A link
.tls-footer
.tls-footer-links
.tls-footer-links--slot
.tls-footer-links--title
.tls-simple-text.-color-white.-weight-bold.
Tls links
.tls-footer-links--list
ul.tls-link-list
li.tls-link-list--slot
a.tls-link My Link
li.tls-link-list--slot
a.tls-link My Link
.tls-footer-links--slot
.tls-footer-links--title
.tls-simple-text.-color-white.-weight-bold.
Tls links
.tls-footer-links--list
ul.tls-link-list
li.tls-link-list--slot
a.tls-link My Link
li.tls-link-list--slot
a.tls-link My Link
.tls-footer-links--slot
.tls-footer-links--title
.tls-simple-text.-color-white.-weight-bold.
Tls links
.tls-footer-links--list
ul.tls-link-list
li.tls-link-list--slot
a.tls-link My Link
li.tls-link-list--slot
a.tls-link My Link
.tls-footer-links--slot
.tls-footer-links--title
.tls-simple-text.-color-white.-weight-bold.
Tls links
.tls-footer-links--list
ul.tls-link-list
li.tls-link-list--slot
a.tls-link My Link
li.tls-link-list--slot
a.tls-link My Link
.tls-footer-line
.tls-footer-content
.tls-footer--slot
a.tls-logo(href='#')
img.tls-logo--img(src='/atom/logo/logo/logo.svg')
.tls-footer--slot.tls-sm-visible
.tls-simple-text.-color-white.-size-12.
© 2019 TLScontact. Tous droits réservés.
.tls-footer--slot.tls-sm-visible
.tls-social-logo-group
.tls-social-logo-group--slot
a.tls-social-logo(href='#')
i.fab.fa-linkedin-in.tls-social-logo--icon
.tls-social-logo-group--slot
a.tls-social-logo(href='#')
i.fab.fa-linkedin-in.tls-social-logo--icon
.tls-footer--slot
a.tls-logo(href='#')
img.tls-logo--img(src='/atom/logo/logo/logo.svg')Legal Mentions
<div class="tls-legal-mentions">
<div class="tls-navbar">
<div class="tls-navbar--content">
<div class="tls-navbar--logo"><a class="tls-logo" href="#"><img class="tls-logo--img" src="/atom/logo/logo/logo.svg"/></a></div>
<div class="tls-navbar--links -opened">
<div class="tls-navbar--slot">
<div class="tls-dropdown"><a class="tls-link-dropdown">
<div class="tls-link-dropdown--text">Opened</div>
<div class="tls-link-dropdown--icon"><i class="fa fa-chevron-up"></i></div></a>
<div class="tls-dropdown--content">
<div class="tls-dropdown--content">
<div class="tls-dropdown-list">
<div class="tls-dropdown-list--slot"><a class="tls-dropdown-text">My dropdown text</a></div>
<div class="tls-dropdown-list--slot">
<div class="tls-dropdown-text">A longer text to see the difference</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="tls-navbar--slot">
<div class="tls-dropdown"><a class="tls-link-dropdown">
<div class="tls-link-dropdown--text">Closed</div>
<div class="tls-link-dropdown--icon"><i class="fa fa-chevron-down"></i></div></a>
<div class="tls-dropdown--content hidden">
<div class="tls-dropdown--content hidden">Hidden content.</div>
</div>
</div>
</div>
<div class="tls-navbar--slot"><a class="tls-link-uppercase">My Uppercase Link</a></div>
<div class="tls-navbar--slot"><a class="tls-button-link">Button link</a></div>
</div>
<div class="tls-navbar--language">
<div class="tls-navbar--slot"><a class="tls-link-dropdown"><img class="tls-link-dropdown--flag" src="./flag-en.png"/>
<div class="tls-link-dropdown--text">Link</div>
<div class="tls-link-dropdown--icon"><i class="fa fa-chevron-down"></i></div></a></div>
</div>
<div class="tls-navbar--hamburger">
<div class="tls-hamburger -state-closed">
<div class="tls-hamburger--top-line"></div>
<div class="tls-hamburger--middle-line"></div>
<div class="tls-hamburger--bottom-line"></div>
</div>
</div>
</div>
</div>
<header class="tls-simple-banner">
<div class="tls-home-text-group">
<div class="tls-simple-text -color-white -size-22">Simple text<img class="tls-image" src="/atom/image/image.png"/>
</div>
<h1 class="tls-heading-1">Heading level 1</h1>
</div>
</header>
<div class="tls-legal-mentions-content">
<div class="tls-large-card-info">
<div class="tls-card-lg">
<div class="tls-simple-text -size-16">
<p>lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur felis magna, lacinia ornare congue ornare, pharetra a leo. Suspendisse fermentum ut mi vel pulvinar. Maecenas gravida varius mauris, sed tempus risus pulvinar sed. In varius placerat erat in porttitor. Sed mollis est ligula, sit amet iaculis nulla rhoncus sed. Morbi quis felis et quam posuere sodales eget quis est. Integer congue faucibus nunc, rhoncus hendrerit massa lobortis sit amet. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
</div>
<div class="tls-simple-text -size-16">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur felis magna, lacinia ornare congue ornare, pharetra a leo. Suspendisse fermentum ut mi vel pulvinar. Maecenas gravida varius mauris, sed tempus risus pulvinar sed. In varius placerat erat in porttitor. Sed mollis est ligula, sit amet iaculis nulla rhoncus sed. Morbi quis felis et quam posuere sodales eget quis est. Integer congue faucibus nunc, rhoncus hendrerit massa lobortis sit amet. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
</div>
</div>
<div class="tls-large-card-info--decoration">
<div class="tls-decoration-vertical-lines -blue">
<div class="tls-line1"></div>
<div class="tls-line2"></div>
</div>
</div>
</div>
<div class="tls-legal-mentions-action">
<div class="tls-legal-mentions-action--slot">
<h2 class="tls-heading-2">Heading level 2</h2>
</div>
<div class="tls-legal-mentions-action--slot">
<button class="tls-button-primary">Button
</button>
</div>
<div class="tls-legal-mentions-action--slot">
<h2 class="tls-heading-2">Heading level 2</h2>
</div>
<div class="tls-legal-mentions-action--slot">
<div class="tls-legal-mentions-action-text">
<ul class="tls-link-list">
<li class="tls-link-list--slot"><a class="tls-link">My Link</a></li>
<li class="tls-link-list--slot"><a class="tls-link">My Link</a></li>
</ul>
</div>
</div>
</div>
<div class="tls-legal-mentions-info">
<h2 class="tls-heading-2">Tab title example</h2>
<div class="tls-simple-text -size-16">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur felis magna, lacinia ornare congue ornare, pharetra a leo. Suspendisse fermentum ut mi vel pulvinar. Maecenas gravida varius mauris, sed tempus risus pulvinar sed. In varius placerat erat in porttitor. Sed mollis est ligula, sit amet iaculis nulla rhoncus sed. Morbi quis felis et quam posuere sodales eget quis est. Integer congue faucibus nunc, rhoncus hendrerit massa lobortis sit amet. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
</div>
<div class="tls-tab-content-paragraph"><a class="tls-link">A link</a></div>
</div>
</div>
<div class="tls-footer">
<div class="tls-footer-links">
<div class="tls-footer-links--slot">
<div class="tls-footer-links--title">
<div class="tls-simple-text -color-white -weight-bold">Tls links
</div>
</div>
<div class="tls-footer-links--list">
<ul class="tls-link-list">
<li class="tls-link-list--slot"><a class="tls-link">My Link</a></li>
<li class="tls-link-list--slot"><a class="tls-link">My Link</a></li>
</ul>
</div>
</div>
<div class="tls-footer-links--slot">
<div class="tls-footer-links--title">
<div class="tls-simple-text -color-white -weight-bold">Tls links
</div>
</div>
<div class="tls-footer-links--list">
<ul class="tls-link-list">
<li class="tls-link-list--slot"><a class="tls-link">My Link</a></li>
<li class="tls-link-list--slot"><a class="tls-link">My Link</a></li>
</ul>
</div>
</div>
<div class="tls-footer-links--slot">
<div class="tls-footer-links--title">
<div class="tls-simple-text -color-white -weight-bold">Tls links
</div>
</div>
<div class="tls-footer-links--list">
<ul class="tls-link-list">
<li class="tls-link-list--slot"><a class="tls-link">My Link</a></li>
<li class="tls-link-list--slot"><a class="tls-link">My Link</a></li>
</ul>
</div>
</div>
<div class="tls-footer-links--slot">
<div class="tls-footer-links--title">
<div class="tls-simple-text -color-white -weight-bold">Tls links
</div>
</div>
<div class="tls-footer-links--list">
<ul class="tls-link-list">
<li class="tls-link-list--slot"><a class="tls-link">My Link</a></li>
<li class="tls-link-list--slot"><a class="tls-link">My Link</a></li>
</ul>
</div>
</div>
</div>
<div class="tls-footer-line"></div>
<div class="tls-footer-content">
<div class="tls-footer--slot"><a class="tls-logo" href="#"><img class="tls-logo--img" src="/atom/logo/logo/logo.svg"/></a></div>
<div class="tls-footer--slot tls-sm-visible">
<div class="tls-simple-text -color-white -size-12">© 2019 TLScontact. Tous droits réservés.
</div>
</div>
<div class="tls-footer--slot tls-sm-visible">
<div class="tls-social-logo-group">
<div class="tls-social-logo-group--slot"><a class="tls-social-logo" href="#"><i class="fab fa-linkedin-in tls-social-logo--icon"></i></a></div>
<div class="tls-social-logo-group--slot"><a class="tls-social-logo" href="#"><i class="fab fa-linkedin-in tls-social-logo--icon"></i></a></div>
</div>
</div>
<div class="tls-footer--slot"><a class="tls-logo" href="#"><img class="tls-logo--img" src="/atom/logo/logo/logo.svg"/></a></div>
</div>
</div>
</div>.tls-legal-mentions
.tls-navbar
.tls-navbar--content
.tls-navbar--logo
a.tls-logo(href='#')
img.tls-logo--img(src='/atom/logo/logo/logo.svg')
.tls-navbar--links.-opened
.tls-navbar--slot
.tls-dropdown
a.tls-link-dropdown
.tls-link-dropdown--text Opened
.tls-link-dropdown--icon
i.fa.fa-chevron-up
.tls-dropdown--content
.tls-dropdown--content
.tls-dropdown-list
.tls-dropdown-list--slot
a.tls-dropdown-text My dropdown text
.tls-dropdown-list--slot
.tls-dropdown-text A longer text to see the difference
.tls-navbar--slot
.tls-dropdown
a.tls-link-dropdown
.tls-link-dropdown--text Closed
.tls-link-dropdown--icon
i.fa.fa-chevron-down
.tls-dropdown--content.hidden
.tls-dropdown--content.hidden Hidden content.
.tls-navbar--slot
a.tls-link-uppercase My Uppercase Link
.tls-navbar--slot
a.tls-button-link Button link
.tls-navbar--language
.tls-navbar--slot
a.tls-link-dropdown
img.tls-link-dropdown--flag(src='./flag-en.png')
.tls-link-dropdown--text Link
.tls-link-dropdown--icon
i.fa.fa-chevron-down
.tls-navbar--hamburger
.tls-hamburger.-state-closed
.tls-hamburger--top-line
.tls-hamburger--middle-line
.tls-hamburger--bottom-line
header.tls-simple-banner
.tls-home-text-group
.tls-simple-text.-color-white.-size-22
| Simple text
img.tls-image(src='/atom/image/image.png')
h1.tls-heading-1 Heading level 1
.tls-legal-mentions-content
.tls-large-card-info
.tls-card-lg
.tls-simple-text.-size-16
p lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur felis magna, lacinia ornare congue ornare, pharetra a leo. Suspendisse fermentum ut mi vel pulvinar. Maecenas gravida varius mauris, sed tempus risus pulvinar sed. In varius placerat erat in porttitor. Sed mollis est ligula, sit amet iaculis nulla rhoncus sed. Morbi quis felis et quam posuere sodales eget quis est. Integer congue faucibus nunc, rhoncus hendrerit massa lobortis sit amet. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
.tls-simple-text.-size-16
p Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur felis magna, lacinia ornare congue ornare, pharetra a leo. Suspendisse fermentum ut mi vel pulvinar. Maecenas gravida varius mauris, sed tempus risus pulvinar sed. In varius placerat erat in porttitor. Sed mollis est ligula, sit amet iaculis nulla rhoncus sed. Morbi quis felis et quam posuere sodales eget quis est. Integer congue faucibus nunc, rhoncus hendrerit massa lobortis sit amet. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
.tls-large-card-info--decoration
.tls-decoration-vertical-lines.-blue
.tls-line1
.tls-line2
.tls-legal-mentions-action
.tls-legal-mentions-action--slot
h2.tls-heading-2 Heading level 2
.tls-legal-mentions-action--slot
button.tls-button-primary.
Button
.tls-legal-mentions-action--slot
h2.tls-heading-2 Heading level 2
.tls-legal-mentions-action--slot
.tls-legal-mentions-action-text
ul.tls-link-list
li.tls-link-list--slot
a.tls-link My Link
li.tls-link-list--slot
a.tls-link My Link
.tls-legal-mentions-info
h2.tls-heading-2 Tab title example
.tls-simple-text.-size-16.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur felis magna, lacinia ornare congue ornare, pharetra a leo. Suspendisse fermentum ut mi vel pulvinar. Maecenas gravida varius mauris, sed tempus risus pulvinar sed. In varius placerat erat in porttitor. Sed mollis est ligula, sit amet iaculis nulla rhoncus sed. Morbi quis felis et quam posuere sodales eget quis est. Integer congue faucibus nunc, rhoncus hendrerit massa lobortis sit amet. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
.tls-tab-content-paragraph
a.tls-link A link
.tls-footer
.tls-footer-links
.tls-footer-links--slot
.tls-footer-links--title
.tls-simple-text.-color-white.-weight-bold.
Tls links
.tls-footer-links--list
ul.tls-link-list
li.tls-link-list--slot
a.tls-link My Link
li.tls-link-list--slot
a.tls-link My Link
.tls-footer-links--slot
.tls-footer-links--title
.tls-simple-text.-color-white.-weight-bold.
Tls links
.tls-footer-links--list
ul.tls-link-list
li.tls-link-list--slot
a.tls-link My Link
li.tls-link-list--slot
a.tls-link My Link
.tls-footer-links--slot
.tls-footer-links--title
.tls-simple-text.-color-white.-weight-bold.
Tls links
.tls-footer-links--list
ul.tls-link-list
li.tls-link-list--slot
a.tls-link My Link
li.tls-link-list--slot
a.tls-link My Link
.tls-footer-links--slot
.tls-footer-links--title
.tls-simple-text.-color-white.-weight-bold.
Tls links
.tls-footer-links--list
ul.tls-link-list
li.tls-link-list--slot
a.tls-link My Link
li.tls-link-list--slot
a.tls-link My Link
.tls-footer-line
.tls-footer-content
.tls-footer--slot
a.tls-logo(href='#')
img.tls-logo--img(src='/atom/logo/logo/logo.svg')
.tls-footer--slot.tls-sm-visible
.tls-simple-text.-color-white.-size-12.
© 2019 TLScontact. Tous droits réservés.
.tls-footer--slot.tls-sm-visible
.tls-social-logo-group
.tls-social-logo-group--slot
a.tls-social-logo(href='#')
i.fab.fa-linkedin-in.tls-social-logo--icon
.tls-social-logo-group--slot
a.tls-social-logo(href='#')
i.fab.fa-linkedin-in.tls-social-logo--icon
.tls-footer--slot
a.tls-logo(href='#')
img.tls-logo--img(src='/atom/logo/logo/logo.svg')Legal terms website
<div class="tls-legal-terms-website">
<div class="tls-navbar">
<div class="tls-navbar--content">
<div class="tls-navbar--logo"><a class="tls-logo" href="#"><img class="tls-logo--img" src="/atom/logo/logo/logo.svg"/></a></div>
<div class="tls-navbar--links -opened">
<div class="tls-navbar--slot">
<div class="tls-dropdown"><a class="tls-link-dropdown">
<div class="tls-link-dropdown--text">Opened</div>
<div class="tls-link-dropdown--icon"><i class="fa fa-chevron-up"></i></div></a>
<div class="tls-dropdown--content">
<div class="tls-dropdown--content">
<div class="tls-dropdown-list">
<div class="tls-dropdown-list--slot"><a class="tls-dropdown-text">My dropdown text</a></div>
<div class="tls-dropdown-list--slot">
<div class="tls-dropdown-text">A longer text to see the difference</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="tls-navbar--slot">
<div class="tls-dropdown"><a class="tls-link-dropdown">
<div class="tls-link-dropdown--text">Closed</div>
<div class="tls-link-dropdown--icon"><i class="fa fa-chevron-down"></i></div></a>
<div class="tls-dropdown--content hidden">
<div class="tls-dropdown--content hidden">Hidden content.</div>
</div>
</div>
</div>
<div class="tls-navbar--slot"><a class="tls-link-uppercase">My Uppercase Link</a></div>
<div class="tls-navbar--slot"><a class="tls-button-link">Button link</a></div>
</div>
<div class="tls-navbar--language">
<div class="tls-navbar--slot"><a class="tls-link-dropdown"><img class="tls-link-dropdown--flag" src="./flag-en.png"/>
<div class="tls-link-dropdown--text">Link</div>
<div class="tls-link-dropdown--icon"><i class="fa fa-chevron-down"></i></div></a></div>
</div>
<div class="tls-navbar--hamburger">
<div class="tls-hamburger -state-closed">
<div class="tls-hamburger--top-line"></div>
<div class="tls-hamburger--middle-line"></div>
<div class="tls-hamburger--bottom-line"></div>
</div>
</div>
</div>
</div>
<header class="tls-simple-banner">
<div class="tls-home-text-group">
<div class="tls-simple-text -color-white -size-22">Simple text<img class="tls-image" src="/atom/image/image.png"/>
</div>
<h1 class="tls-heading-1">Heading level 1</h1>
</div>
</header>
<div class="tls-legal-terms-website-content">
<div class="tls-large-card-info">
<div class="tls-card-lg">
<div class="tls-simple-text -size-16">
<p>lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur felis magna, lacinia ornare congue ornare, pharetra a leo. Suspendisse fermentum ut mi vel pulvinar. Maecenas gravida varius mauris, sed tempus risus pulvinar sed. In varius placerat erat in porttitor. Sed mollis est ligula, sit amet iaculis nulla rhoncus sed. Morbi quis felis et quam posuere sodales eget quis est. Integer congue faucibus nunc, rhoncus hendrerit massa lobortis sit amet. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
</div>
<div class="tls-simple-text -size-16">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur felis magna, lacinia ornare congue ornare, pharetra a leo. Suspendisse fermentum ut mi vel pulvinar. Maecenas gravida varius mauris, sed tempus risus pulvinar sed. In varius placerat erat in porttitor. Sed mollis est ligula, sit amet iaculis nulla rhoncus sed. Morbi quis felis et quam posuere sodales eget quis est. Integer congue faucibus nunc, rhoncus hendrerit massa lobortis sit amet. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
</div>
</div>
<div class="tls-large-card-info--decoration">
<div class="tls-decoration-vertical-lines -blue">
<div class="tls-line1"></div>
<div class="tls-line2"></div>
</div>
</div>
</div>
<div class="tls-legal-terms-website-action">
<div class="tls-legal-terms-website-action--heading">
<div class="tls-legal-terms-website-action--slot">
<h2 class="tls-heading-2">Heading level 2</h2>
</div>
<div class="tls-legal-terms-website-action--slot">
<button class="tls-button-primary">Button
</button>
</div>
</div>
<div class="tls-legal-terms-website-action--title">
<div class="tls-simple-text -size-16">Upgrade your visa application expirience
</div>
</div>
<div class="tls-legal-terms-website-action--slot">
<h2 class="tls-heading-2">Heading level 2</h2>
</div>
<div class="tls-legal-terms-website-action--slot">
<div class="tls-legal-terms-website-action-text">
<ul class="tls-link-list">
<li class="tls-link-list--slot"><a class="tls-link">My Link</a></li>
<li class="tls-link-list--slot"><a class="tls-link">My Link</a></li>
</ul>
<div class="tls-simple-text -size-16">TLScontact and its worldwide companies (hereinafter “TLScontact”, “we”, “us”, “our”) is committed to protecting the privacy of the customers who visit TLScontact websites (hereinafter “Customers”, “you”, “your”). The purpose of this cookies policy (hereinafter the “Cookies Policy”) is to explain how and why we use cookies to ensure you remain informed and in control of your information.
</div>
</div>
</div>
</div>
<div class="tls-legal-terms-website-info">
<div class="tls-simple-text -size-16">TLScontact Visa Application Centre is a service provided by Unitary Enterprise Providing Services "TLSContact" (hereunder referred to as “TLScontact”, “we”, “us”, “our”) with company registration number 192205546, registered office at office 60, h. 40, 220004, Nemiga str., Minsk, Belarus.
</div>
<h2 class="tls-heading-2">Tab title example</h2>
<div class="tls-simple-text -size-16">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur felis magna, lacinia ornare congue ornare, pharetra a leo. Suspendisse fermentum ut mi vel pulvinar. Maecenas gravida varius mauris, sed tempus risus pulvinar sed. In varius placerat erat in porttitor. Sed mollis est ligula, sit amet iaculis nulla rhoncus sed. Morbi quis felis et quam posuere sodales eget quis est. Integer congue faucibus nunc, rhoncus hendrerit massa lobortis sit amet. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
</div>
<div class="tls-tab-content-paragraph"><a class="tls-link">A link</a></div>
<h2 class="tls-heading-2">Which cookies do third parties set on our websites?</h2>
<div class="tls-simple-text -size-16">TLScontact allows some third parties to set and access their own cookies on your device.
</div>
<div class="tls-simple-text -size-16">Third parties place the following cookie on TLScontact websites.
</div>
<div class="tls-legal-terms-website-table">
<h3 class="tls-heading-3">Analytics and Performance Cookies</h3>
<div class="tls-table-card-info">
<div class="tls-card-lg">
<table>
<thead>
<th></th>
<th class="tls-table-head">Simple Text
</th>
<th class="tls-table-head">Simple Text
</th>
<th class="tls-table-head">Simple Text
</th>
</thead>
<tbody>
<tr>
<th class="tls-table-head">City
</th>
<td class="tls-table-cell">Simple Text
</td>
<td class="tls-table-cell">Simple Text
</td>
<td class="tls-table-cell">Simple Text
</td>
</tr>
<tr>
<th class="tls-table-head">City
</th>
<td class="tls-table-cell">Simple Text
</td>
<td class="tls-table-cell">Simple Text
</td>
<td class="tls-table-cell">Simple Text
</td>
</tr>
<tr>
<th class="tls-table-head">City
</th>
<td class="tls-table-cell">Simple Text
</td>
<td class="tls-table-cell">Simple Text
</td>
<td class="tls-table-cell">Simple Text
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<div class="tls-simple-text -size-16">For example, Google Analytics is used to identify your visit to the site. Google Analytics help TLScontact to understand how visitors engage with their sites or apps. When Google Analytics is used, the web browser automatically sends certain information to Google. For further information, please visit https://support.google.com/analytics/answer/6004245?hl=en-GB
</div>
<div class="tls-simple-text -size-16">To learn more about third party cookies, please refer to third party websites.
</div>
<div class="tls-tab-content-paragraph"><i class="fa fa-chevron-up"></i><a class="tls-link">A link</a></div>
</div>
</div>
<div class="tls-footer">
<div class="tls-footer-links">
<div class="tls-footer-links--slot">
<div class="tls-footer-links--title">
<div class="tls-simple-text -color-white -weight-bold">Tls links
</div>
</div>
<div class="tls-footer-links--list">
<ul class="tls-link-list">
<li class="tls-link-list--slot"><a class="tls-link">My Link</a></li>
<li class="tls-link-list--slot"><a class="tls-link">My Link</a></li>
</ul>
</div>
</div>
<div class="tls-footer-links--slot">
<div class="tls-footer-links--title">
<div class="tls-simple-text -color-white -weight-bold">Tls links
</div>
</div>
<div class="tls-footer-links--list">
<ul class="tls-link-list">
<li class="tls-link-list--slot"><a class="tls-link">My Link</a></li>
<li class="tls-link-list--slot"><a class="tls-link">My Link</a></li>
</ul>
</div>
</div>
<div class="tls-footer-links--slot">
<div class="tls-footer-links--title">
<div class="tls-simple-text -color-white -weight-bold">Tls links
</div>
</div>
<div class="tls-footer-links--list">
<ul class="tls-link-list">
<li class="tls-link-list--slot"><a class="tls-link">My Link</a></li>
<li class="tls-link-list--slot"><a class="tls-link">My Link</a></li>
</ul>
</div>
</div>
<div class="tls-footer-links--slot">
<div class="tls-footer-links--title">
<div class="tls-simple-text -color-white -weight-bold">Tls links
</div>
</div>
<div class="tls-footer-links--list">
<ul class="tls-link-list">
<li class="tls-link-list--slot"><a class="tls-link">My Link</a></li>
<li class="tls-link-list--slot"><a class="tls-link">My Link</a></li>
</ul>
</div>
</div>
</div>
<div class="tls-footer-line"></div>
<div class="tls-footer-content">
<div class="tls-footer--slot"><a class="tls-logo" href="#"><img class="tls-logo--img" src="/atom/logo/logo/logo.svg"/></a></div>
<div class="tls-footer--slot tls-sm-visible">
<div class="tls-simple-text -color-white -size-12">© 2019 TLScontact. Tous droits réservés.
</div>
</div>
<div class="tls-footer--slot tls-sm-visible">
<div class="tls-social-logo-group">
<div class="tls-social-logo-group--slot"><a class="tls-social-logo" href="#"><i class="fab fa-linkedin-in tls-social-logo--icon"></i></a></div>
<div class="tls-social-logo-group--slot"><a class="tls-social-logo" href="#"><i class="fab fa-linkedin-in tls-social-logo--icon"></i></a></div>
</div>
</div>
<div class="tls-footer--slot"><a class="tls-logo" href="#"><img class="tls-logo--img" src="/atom/logo/logo/logo.svg"/></a></div>
</div>
</div>
</div>.tls-legal-terms-website
.tls-navbar
.tls-navbar--content
.tls-navbar--logo
a.tls-logo(href='#')
img.tls-logo--img(src='/atom/logo/logo/logo.svg')
.tls-navbar--links.-opened
.tls-navbar--slot
.tls-dropdown
a.tls-link-dropdown
.tls-link-dropdown--text Opened
.tls-link-dropdown--icon
i.fa.fa-chevron-up
.tls-dropdown--content
.tls-dropdown--content
.tls-dropdown-list
.tls-dropdown-list--slot
a.tls-dropdown-text My dropdown text
.tls-dropdown-list--slot
.tls-dropdown-text A longer text to see the difference
.tls-navbar--slot
.tls-dropdown
a.tls-link-dropdown
.tls-link-dropdown--text Closed
.tls-link-dropdown--icon
i.fa.fa-chevron-down
.tls-dropdown--content.hidden
.tls-dropdown--content.hidden Hidden content.
.tls-navbar--slot
a.tls-link-uppercase My Uppercase Link
.tls-navbar--slot
a.tls-button-link Button link
.tls-navbar--language
.tls-navbar--slot
a.tls-link-dropdown
img.tls-link-dropdown--flag(src='./flag-en.png')
.tls-link-dropdown--text Link
.tls-link-dropdown--icon
i.fa.fa-chevron-down
.tls-navbar--hamburger
.tls-hamburger.-state-closed
.tls-hamburger--top-line
.tls-hamburger--middle-line
.tls-hamburger--bottom-line
header.tls-simple-banner
.tls-home-text-group
.tls-simple-text.-color-white.-size-22
| Simple text
img.tls-image(src='/atom/image/image.png')
h1.tls-heading-1 Heading level 1
.tls-legal-terms-website-content
.tls-large-card-info
.tls-card-lg
.tls-simple-text.-size-16
p lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur felis magna, lacinia ornare congue ornare, pharetra a leo. Suspendisse fermentum ut mi vel pulvinar. Maecenas gravida varius mauris, sed tempus risus pulvinar sed. In varius placerat erat in porttitor. Sed mollis est ligula, sit amet iaculis nulla rhoncus sed. Morbi quis felis et quam posuere sodales eget quis est. Integer congue faucibus nunc, rhoncus hendrerit massa lobortis sit amet. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
.tls-simple-text.-size-16
p Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur felis magna, lacinia ornare congue ornare, pharetra a leo. Suspendisse fermentum ut mi vel pulvinar. Maecenas gravida varius mauris, sed tempus risus pulvinar sed. In varius placerat erat in porttitor. Sed mollis est ligula, sit amet iaculis nulla rhoncus sed. Morbi quis felis et quam posuere sodales eget quis est. Integer congue faucibus nunc, rhoncus hendrerit massa lobortis sit amet. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
.tls-large-card-info--decoration
.tls-decoration-vertical-lines.-blue
.tls-line1
.tls-line2
.tls-legal-terms-website-action
.tls-legal-terms-website-action--heading
.tls-legal-terms-website-action--slot
h2.tls-heading-2 Heading level 2
.tls-legal-terms-website-action--slot
button.tls-button-primary.
Button
.tls-legal-terms-website-action--title
.tls-simple-text.-size-16.
Upgrade your visa application expirience
.tls-legal-terms-website-action--slot
h2.tls-heading-2 Heading level 2
.tls-legal-terms-website-action--slot
.tls-legal-terms-website-action-text
ul.tls-link-list
li.tls-link-list--slot
a.tls-link My Link
li.tls-link-list--slot
a.tls-link My Link
.tls-simple-text.-size-16.
TLScontact and its worldwide companies (hereinafter “TLScontact”, “we”, “us”, “our”) is committed to protecting the privacy of the customers who visit TLScontact websites (hereinafter “Customers”, “you”, “your”). The purpose of this cookies policy (hereinafter the “Cookies Policy”) is to explain how and why we use cookies to ensure you remain informed and in control of your information.
.tls-legal-terms-website-info
.tls-simple-text.-size-16.
TLScontact Visa Application Centre is a service provided by Unitary Enterprise Providing Services "TLSContact" (hereunder referred to as “TLScontact”, “we”, “us”, “our”) with company registration number 192205546, registered office at office 60, h. 40, 220004, Nemiga str., Minsk, Belarus.
h2.tls-heading-2 Tab title example
.tls-simple-text.-size-16.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur felis magna, lacinia ornare congue ornare, pharetra a leo. Suspendisse fermentum ut mi vel pulvinar. Maecenas gravida varius mauris, sed tempus risus pulvinar sed. In varius placerat erat in porttitor. Sed mollis est ligula, sit amet iaculis nulla rhoncus sed. Morbi quis felis et quam posuere sodales eget quis est. Integer congue faucibus nunc, rhoncus hendrerit massa lobortis sit amet. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
.tls-tab-content-paragraph
a.tls-link A link
h2.tls-heading-2 Which cookies do third parties set on our websites?
.tls-simple-text.-size-16.
TLScontact allows some third parties to set and access their own cookies on your device.
.tls-simple-text.-size-16.
Third parties place the following cookie on TLScontact websites.
.tls-legal-terms-website-table
h3.tls-heading-3 Analytics and Performance Cookies
.tls-table-card-info
.tls-card-lg
table
thead
tr
th
th.tls-table-head.
Simple Text
th.tls-table-head.
Simple Text
th.tls-table-head.
Simple Text
tbody
tr
th.tls-table-head.
City
td.tls-table-cell.
Simple Text
td.tls-table-cell.
Simple Text
td.tls-table-cell.
Simple Text
tr
th.tls-table-head.
City
td.tls-table-cell.
Simple Text
td.tls-table-cell.
Simple Text
td.tls-table-cell.
Simple Text
tr
th.tls-table-head.
City
td.tls-table-cell.
Simple Text
td.tls-table-cell.
Simple Text
td.tls-table-cell.
Simple Text
.tls-simple-text.-size-16.
For example, Google Analytics is used to identify your visit to the site. Google Analytics help TLScontact to understand how visitors engage with their sites or apps. When Google Analytics is used, the web browser automatically sends certain information to Google. For further information, please visit https://support.google.com/analytics/answer/6004245?hl=en-GB
.tls-simple-text.-size-16.
To learn more about third party cookies, please refer to third party websites.
.tls-tab-content-paragraph
i.fa.fa-chevron-up
a.tls-link A link
.tls-footer
.tls-footer-links
.tls-footer-links--slot
.tls-footer-links--title
.tls-simple-text.-color-white.-weight-bold.
Tls links
.tls-footer-links--list
ul.tls-link-list
li.tls-link-list--slot
a.tls-link My Link
li.tls-link-list--slot
a.tls-link My Link
.tls-footer-links--slot
.tls-footer-links--title
.tls-simple-text.-color-white.-weight-bold.
Tls links
.tls-footer-links--list
ul.tls-link-list
li.tls-link-list--slot
a.tls-link My Link
li.tls-link-list--slot
a.tls-link My Link
.tls-footer-links--slot
.tls-footer-links--title
.tls-simple-text.-color-white.-weight-bold.
Tls links
.tls-footer-links--list
ul.tls-link-list
li.tls-link-list--slot
a.tls-link My Link
li.tls-link-list--slot
a.tls-link My Link
.tls-footer-links--slot
.tls-footer-links--title
.tls-simple-text.-color-white.-weight-bold.
Tls links
.tls-footer-links--list
ul.tls-link-list
li.tls-link-list--slot
a.tls-link My Link
li.tls-link-list--slot
a.tls-link My Link
.tls-footer-line
.tls-footer-content
.tls-footer--slot
a.tls-logo(href='#')
img.tls-logo--img(src='/atom/logo/logo/logo.svg')
.tls-footer--slot.tls-sm-visible
.tls-simple-text.-color-white.-size-12.
© 2019 TLScontact. Tous droits réservés.
.tls-footer--slot.tls-sm-visible
.tls-social-logo-group
.tls-social-logo-group--slot
a.tls-social-logo(href='#')
i.fab.fa-linkedin-in.tls-social-logo--icon
.tls-social-logo-group--slot
a.tls-social-logo(href='#')
i.fab.fa-linkedin-in.tls-social-logo--icon
.tls-footer--slot
a.tls-logo(href='#')
img.tls-logo--img(src='/atom/logo/logo/logo.svg')The PDF download links.
<div class="tls-links-downloads">
<div class="tls-navbar">
<div class="tls-navbar--content">
<div class="tls-navbar--logo"><a class="tls-logo" href="#"><img class="tls-logo--img" src="/atom/logo/logo/logo.svg"/></a></div>
<div class="tls-navbar--links -opened">
<div class="tls-navbar--slot">
<div class="tls-dropdown"><a class="tls-link-dropdown">
<div class="tls-link-dropdown--text">Opened</div>
<div class="tls-link-dropdown--icon"><i class="fa fa-chevron-up"></i></div></a>
<div class="tls-dropdown--content">
<div class="tls-dropdown--content">
<div class="tls-dropdown-list">
<div class="tls-dropdown-list--slot"><a class="tls-dropdown-text">My dropdown text</a></div>
<div class="tls-dropdown-list--slot">
<div class="tls-dropdown-text">A longer text to see the difference</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="tls-navbar--slot">
<div class="tls-dropdown"><a class="tls-link-dropdown">
<div class="tls-link-dropdown--text">Closed</div>
<div class="tls-link-dropdown--icon"><i class="fa fa-chevron-down"></i></div></a>
<div class="tls-dropdown--content hidden">
<div class="tls-dropdown--content hidden">Hidden content.</div>
</div>
</div>
</div>
<div class="tls-navbar--slot"><a class="tls-link-uppercase">My Uppercase Link</a></div>
<div class="tls-navbar--slot"><a class="tls-button-link">Button link</a></div>
</div>
<div class="tls-navbar--language">
<div class="tls-navbar--slot"><a class="tls-link-dropdown"><img class="tls-link-dropdown--flag" src="./flag-en.png"/>
<div class="tls-link-dropdown--text">Link</div>
<div class="tls-link-dropdown--icon"><i class="fa fa-chevron-down"></i></div></a></div>
</div>
<div class="tls-navbar--hamburger">
<div class="tls-hamburger -state-closed">
<div class="tls-hamburger--top-line"></div>
<div class="tls-hamburger--middle-line"></div>
<div class="tls-hamburger--bottom-line"></div>
</div>
</div>
</div>
</div>
<header class="tls-simple-banner">
<div class="tls-home-text-group">
<div class="tls-simple-text -color-white -size-22">Simple text<img class="tls-image" src="/atom/image/image.png"/>
</div>
<h1 class="tls-heading-1">Heading level 1</h1>
</div>
</header>
<div class="tls-links-downloads-content">
<div class="tls-large-card-notice">
<div class="tls-card-lg">
<div class="tls-card-body">
<div class="tls-simple-text -size-16">
<p>lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur felis magna, lacinia ornare congue ornare, pharetra a leo. Suspendisse fermentum ut mi vel pulvinar. Maecenas gravida varius mauris, sed tempus risus pulvinar sed. In varius placerat erat in porttitor. Sed mollis est ligula, sit amet iaculis nulla rhoncus sed. Morbi quis felis et quam posuere sodales eget quis est. Integer congue faucibus nunc, rhoncus hendrerit massa lobortis sit amet. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
</div>
<div class="tls-simple-text -weight-bold -size-16">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur felis magna, lacinia ornare congue ornare, pharetra a leo. Suspendisse fermentum ut mi vel pulvinar. Maecenas gravida varius mauris, sed tempus risus pulvinar sed. In varius placerat erat in porttitor. Sed mollis est ligula, sit amet iaculis nulla rhoncus sed. Morbi quis felis et quam posuere sodales eget quis est. Integer congue faucibus nunc, rhoncus hendrerit massa lobortis sit amet. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
</div>
</div>
<div class="tls-card-notice">
<div class="tls-card-notice--title">
<div class="tls-simple-text -weight-bold -size-16">
<p class="font-md warning">Notice</p>
</div>
</div>
<div class="tls-card-notice--content">
<div class="tls-simple-text -weight-bold -size-16">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur felis magna, lacinia ornare congue ornare, pharetra a leo. Suspendisse fermentum ut mi vel pulvinar. Maecenas gravida varius mauris, sed tempus risus pulvinar sed. In varius placerat erat in porttitor. Sed mollis est ligula, sit amet iaculis nulla rhoncus sed. Morbi quis felis et quam posuere sodales eget quis est. Integer congue faucibus nunc, rhoncus hendrerit massa lobortis sit amet. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
</div>
</div>
</div>
</div>
<div class="tls-large-card-notice--decoration">
<div class="tls-decoration-vertical-lines -blue">
<div class="tls-line1"></div>
<div class="tls-line2"></div>
</div>
</div>
</div>
<div class="tls-links-downloads-forms">
<div class="tls-links-item">
<div class="tls-links-downloads-forms--title">
<h2 class="tls-heading-2">Heading level 2</h2>
</div>
<div class="tls-links-downloads-forms--content">
<div class="tls-simple-text -size-16">
<p>lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur felis magna, lacinia ornare congue ornare, pharetra a leo. Suspendisse fermentum ut mi vel pulvinar. Maecenas gravida varius mauris, sed tempus risus pulvinar sed. In varius placerat erat in porttitor. Sed mollis est ligula, sit amet iaculis nulla rhoncus sed. Morbi quis felis et quam posuere sodales eget quis est. Integer congue faucibus nunc, rhoncus hendrerit massa lobortis sit amet. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
</div>
</div>
</div>
</div>
</div>
<div class="tls-footer">
<div class="tls-footer-links">
<div class="tls-footer-links--slot">
<div class="tls-footer-links--title">
<div class="tls-simple-text -color-white -weight-bold">Tls links
</div>
</div>
<div class="tls-footer-links--list">
<ul class="tls-link-list">
<li class="tls-link-list--slot"><a class="tls-link">My Link</a></li>
<li class="tls-link-list--slot"><a class="tls-link">My Link</a></li>
</ul>
</div>
</div>
<div class="tls-footer-links--slot">
<div class="tls-footer-links--title">
<div class="tls-simple-text -color-white -weight-bold">Tls links
</div>
</div>
<div class="tls-footer-links--list">
<ul class="tls-link-list">
<li class="tls-link-list--slot"><a class="tls-link">My Link</a></li>
<li class="tls-link-list--slot"><a class="tls-link">My Link</a></li>
</ul>
</div>
</div>
<div class="tls-footer-links--slot">
<div class="tls-footer-links--title">
<div class="tls-simple-text -color-white -weight-bold">Tls links
</div>
</div>
<div class="tls-footer-links--list">
<ul class="tls-link-list">
<li class="tls-link-list--slot"><a class="tls-link">My Link</a></li>
<li class="tls-link-list--slot"><a class="tls-link">My Link</a></li>
</ul>
</div>
</div>
<div class="tls-footer-links--slot">
<div class="tls-footer-links--title">
<div class="tls-simple-text -color-white -weight-bold">Tls links
</div>
</div>
<div class="tls-footer-links--list">
<ul class="tls-link-list">
<li class="tls-link-list--slot"><a class="tls-link">My Link</a></li>
<li class="tls-link-list--slot"><a class="tls-link">My Link</a></li>
</ul>
</div>
</div>
</div>
<div class="tls-footer-line"></div>
<div class="tls-footer-content">
<div class="tls-footer--slot"><a class="tls-logo" href="#"><img class="tls-logo--img" src="/atom/logo/logo/logo.svg"/></a></div>
<div class="tls-footer--slot tls-sm-visible">
<div class="tls-simple-text -color-white -size-12">© 2019 TLScontact. Tous droits réservés.
</div>
</div>
<div class="tls-footer--slot tls-sm-visible">
<div class="tls-social-logo-group">
<div class="tls-social-logo-group--slot"><a class="tls-social-logo" href="#"><i class="fab fa-linkedin-in tls-social-logo--icon"></i></a></div>
<div class="tls-social-logo-group--slot"><a class="tls-social-logo" href="#"><i class="fab fa-linkedin-in tls-social-logo--icon"></i></a></div>
</div>
</div>
<div class="tls-footer--slot"><a class="tls-logo" href="#"><img class="tls-logo--img" src="/atom/logo/logo/logo.svg"/></a></div>
</div>
</div>
</div>.tls-links-downloads
.tls-navbar
.tls-navbar--content
.tls-navbar--logo
a.tls-logo(href='#')
img.tls-logo--img(src='/atom/logo/logo/logo.svg')
.tls-navbar--links.-opened
.tls-navbar--slot
.tls-dropdown
a.tls-link-dropdown
.tls-link-dropdown--text Opened
.tls-link-dropdown--icon
i.fa.fa-chevron-up
.tls-dropdown--content
.tls-dropdown--content
.tls-dropdown-list
.tls-dropdown-list--slot
a.tls-dropdown-text My dropdown text
.tls-dropdown-list--slot
.tls-dropdown-text A longer text to see the difference
.tls-navbar--slot
.tls-dropdown
a.tls-link-dropdown
.tls-link-dropdown--text Closed
.tls-link-dropdown--icon
i.fa.fa-chevron-down
.tls-dropdown--content.hidden
.tls-dropdown--content.hidden Hidden content.
.tls-navbar--slot
a.tls-link-uppercase My Uppercase Link
.tls-navbar--slot
a.tls-button-link Button link
.tls-navbar--language
.tls-navbar--slot
a.tls-link-dropdown
img.tls-link-dropdown--flag(src='./flag-en.png')
.tls-link-dropdown--text Link
.tls-link-dropdown--icon
i.fa.fa-chevron-down
.tls-navbar--hamburger
.tls-hamburger.-state-closed
.tls-hamburger--top-line
.tls-hamburger--middle-line
.tls-hamburger--bottom-line
header.tls-simple-banner
.tls-home-text-group
.tls-simple-text.-color-white.-size-22
| Simple text
img.tls-image(src='/atom/image/image.png')
h1.tls-heading-1 Heading level 1
.tls-links-downloads-content
.tls-large-card-notice
.tls-card-lg
.tls-card-body
.tls-simple-text.-size-16
p lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur felis magna, lacinia ornare congue ornare, pharetra a leo. Suspendisse fermentum ut mi vel pulvinar. Maecenas gravida varius mauris, sed tempus risus pulvinar sed. In varius placerat erat in porttitor. Sed mollis est ligula, sit amet iaculis nulla rhoncus sed. Morbi quis felis et quam posuere sodales eget quis est. Integer congue faucibus nunc, rhoncus hendrerit massa lobortis sit amet. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
.tls-simple-text.-weight-bold.-size-16
p Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur felis magna, lacinia ornare congue ornare, pharetra a leo. Suspendisse fermentum ut mi vel pulvinar. Maecenas gravida varius mauris, sed tempus risus pulvinar sed. In varius placerat erat in porttitor. Sed mollis est ligula, sit amet iaculis nulla rhoncus sed. Morbi quis felis et quam posuere sodales eget quis est. Integer congue faucibus nunc, rhoncus hendrerit massa lobortis sit amet. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
.tls-card-notice
.tls-card-notice--title
.tls-simple-text.-weight-bold.-size-16
p.font-md.warning Notice
.tls-card-notice--content
.tls-simple-text.-weight-bold.-size-16
p Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur felis magna, lacinia ornare congue ornare, pharetra a leo. Suspendisse fermentum ut mi vel pulvinar. Maecenas gravida varius mauris, sed tempus risus pulvinar sed. In varius placerat erat in porttitor. Sed mollis est ligula, sit amet iaculis nulla rhoncus sed. Morbi quis felis et quam posuere sodales eget quis est. Integer congue faucibus nunc, rhoncus hendrerit massa lobortis sit amet. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
.tls-large-card-notice--decoration
.tls-decoration-vertical-lines.-blue
.tls-line1
.tls-line2
.tls-links-downloads-forms
.tls-links-item
.tls-links-downloads-forms--title
h2.tls-heading-2 Heading level 2
.tls-links-downloads-forms--content
.tls-simple-text.-size-16
p lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur felis magna, lacinia ornare congue ornare, pharetra a leo. Suspendisse fermentum ut mi vel pulvinar. Maecenas gravida varius mauris, sed tempus risus pulvinar sed. In varius placerat erat in porttitor. Sed mollis est ligula, sit amet iaculis nulla rhoncus sed. Morbi quis felis et quam posuere sodales eget quis est. Integer congue faucibus nunc, rhoncus hendrerit massa lobortis sit amet. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
.tls-footer
.tls-footer-links
.tls-footer-links--slot
.tls-footer-links--title
.tls-simple-text.-color-white.-weight-bold.
Tls links
.tls-footer-links--list
ul.tls-link-list
li.tls-link-list--slot
a.tls-link My Link
li.tls-link-list--slot
a.tls-link My Link
.tls-footer-links--slot
.tls-footer-links--title
.tls-simple-text.-color-white.-weight-bold.
Tls links
.tls-footer-links--list
ul.tls-link-list
li.tls-link-list--slot
a.tls-link My Link
li.tls-link-list--slot
a.tls-link My Link
.tls-footer-links--slot
.tls-footer-links--title
.tls-simple-text.-color-white.-weight-bold.
Tls links
.tls-footer-links--list
ul.tls-link-list
li.tls-link-list--slot
a.tls-link My Link
li.tls-link-list--slot
a.tls-link My Link
.tls-footer-links--slot
.tls-footer-links--title
.tls-simple-text.-color-white.-weight-bold.
Tls links
.tls-footer-links--list
ul.tls-link-list
li.tls-link-list--slot
a.tls-link My Link
li.tls-link-list--slot
a.tls-link My Link
.tls-footer-line
.tls-footer-content
.tls-footer--slot
a.tls-logo(href='#')
img.tls-logo--img(src='/atom/logo/logo/logo.svg')
.tls-footer--slot.tls-sm-visible
.tls-simple-text.-color-white.-size-12.
© 2019 TLScontact. Tous droits réservés.
.tls-footer--slot.tls-sm-visible
.tls-social-logo-group
.tls-social-logo-group--slot
a.tls-social-logo(href='#')
i.fab.fa-linkedin-in.tls-social-logo--icon
.tls-social-logo-group--slot
a.tls-social-logo(href='#')
i.fab.fa-linkedin-in.tls-social-logo--icon
.tls-footer--slot
a.tls-logo(href='#')
img.tls-logo--img(src='/atom/logo/logo/logo.svg')General information
<div class="tls-news">
<div class="tls-navbar">
<div class="tls-navbar--content">
<div class="tls-navbar--logo"><a class="tls-logo" href="#"><img class="tls-logo--img" src="/atom/logo/logo/logo.svg"/></a></div>
<div class="tls-navbar--links -opened">
<div class="tls-navbar--slot">
<div class="tls-dropdown"><a class="tls-link-dropdown">
<div class="tls-link-dropdown--text">Opened</div>
<div class="tls-link-dropdown--icon"><i class="fa fa-chevron-up"></i></div></a>
<div class="tls-dropdown--content">
<div class="tls-dropdown--content">
<div class="tls-dropdown-list">
<div class="tls-dropdown-list--slot"><a class="tls-dropdown-text">My dropdown text</a></div>
<div class="tls-dropdown-list--slot">
<div class="tls-dropdown-text">A longer text to see the difference</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="tls-navbar--slot">
<div class="tls-dropdown"><a class="tls-link-dropdown">
<div class="tls-link-dropdown--text">Closed</div>
<div class="tls-link-dropdown--icon"><i class="fa fa-chevron-down"></i></div></a>
<div class="tls-dropdown--content hidden">
<div class="tls-dropdown--content hidden">Hidden content.</div>
</div>
</div>
</div>
<div class="tls-navbar--slot"><a class="tls-link-uppercase">My Uppercase Link</a></div>
<div class="tls-navbar--slot"><a class="tls-button-link">Button link</a></div>
</div>
<div class="tls-navbar--language">
<div class="tls-navbar--slot"><a class="tls-link-dropdown"><img class="tls-link-dropdown--flag" src="./flag-en.png"/>
<div class="tls-link-dropdown--text">Link</div>
<div class="tls-link-dropdown--icon"><i class="fa fa-chevron-down"></i></div></a></div>
</div>
<div class="tls-navbar--hamburger">
<div class="tls-hamburger -state-closed">
<div class="tls-hamburger--top-line"></div>
<div class="tls-hamburger--middle-line"></div>
<div class="tls-hamburger--bottom-line"></div>
</div>
</div>
</div>
</div>
<header class="tls-simple-banner">
<div class="tls-home-text-group">
<div class="tls-simple-text -color-white -size-22">Simple text<img class="tls-image" src="/atom/image/image.png"/>
</div>
<h1 class="tls-heading-1">Heading level 1</h1>
</div>
</header>
<div class="tls-news-content">
<div class="tls-large-card-info">
<div class="tls-card-lg">
<div class="tls-simple-text -size-16">
<p>lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur felis magna, lacinia ornare congue ornare, pharetra a leo. Suspendisse fermentum ut mi vel pulvinar. Maecenas gravida varius mauris, sed tempus risus pulvinar sed. In varius placerat erat in porttitor. Sed mollis est ligula, sit amet iaculis nulla rhoncus sed. Morbi quis felis et quam posuere sodales eget quis est. Integer congue faucibus nunc, rhoncus hendrerit massa lobortis sit amet. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
</div>
<div class="tls-simple-text -size-16">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur felis magna, lacinia ornare congue ornare, pharetra a leo. Suspendisse fermentum ut mi vel pulvinar. Maecenas gravida varius mauris, sed tempus risus pulvinar sed. In varius placerat erat in porttitor. Sed mollis est ligula, sit amet iaculis nulla rhoncus sed. Morbi quis felis et quam posuere sodales eget quis est. Integer congue faucibus nunc, rhoncus hendrerit massa lobortis sit amet. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
</div>
</div>
<div class="tls-large-card-info--decoration">
<div class="tls-decoration-vertical-lines -blue">
<div class="tls-line1"></div>
<div class="tls-line2"></div>
</div>
</div>
</div>
<div class="tls-news-action">
<div class="tls-news-action--slot">
<h2 class="tls-heading-2">Heading level 2</h2>
</div>
<div class="tls-news-action--slot">
<button class="tls-button-primary">Button
</button>
</div>
</div>
<div class="tls-news-info">
<div class="tls-heading">
<h2 class="tls-title">Changing of the visa fee for a Schengen visa</h2>
<div class="tls-simple-text -size-16">From February 2, 2020, after the entry into force of the new EU Visa Code, Schengen visa fee will increase from 60 to 80 euros.
</div>
<div class="tls-simple-text -size-16">The Schengen visa fee increase for Belarusian citizens will be temporary and will last until the entry into force of the Agreement between the EU and Belarus on visa facilitation, signed in Brussels on January 8.
</div>
<div class="tls-simple-text -size-16">According to this Agreement, the fee for a Schengen visa will be automatically reduced from 80 to 35 euros.
</div>
<div class="tls-simple-text -size-16">The new Agreement will come into effect upon ratification by the National Assembly of Belarus and the European Parliament.
</div>
</div>
<div class="tls-heading">
<h2 class="tls-title">Prime Time Appointment</h2>
<div class="tls-simple-text -size-16">Please be informed that choosing the appointment for 17:00 - 17:30 you will select one additional service called Prime Time Service that we are happy to offer to you. This Service requires you to pay EUR 30.00 in addition to the normal fees.
</div>
<div class="tls-simple-text -size-16">Please do not select Prime Time Appointments if you don’t agree to use the service.
</div>
<div class="tls-simple-text -size-16">Thank you for understanding!
</div>
</div>
<div class="tls-heading">
<h2 class="tls-title">Tarifs</h2>
<div class="tls-simple-text -size-16">Depuis le 2 février 2020, les tarifs des visas de court séjour pour les Etats membres de l’espace Schengen ont changé :
</div>
<div class="tls-table-card-info">
<div class="tls-card-lg">
<table>
<thead>
<th></th>
<th class="tls-table-head">Simple Text
</th>
<th class="tls-table-head">Simple Text
</th>
<th class="tls-table-head">Simple Text
</th>
</thead>
<tbody>
<tr>
<th class="tls-table-head">City
</th>
<td class="tls-table-cell">Simple Text
</td>
<td class="tls-table-cell">Simple Text
</td>
<td class="tls-table-cell">Simple Text
</td>
</tr>
<tr>
<th class="tls-table-head">City
</th>
<td class="tls-table-cell">Simple Text
</td>
<td class="tls-table-cell">Simple Text
</td>
<td class="tls-table-cell">Simple Text
</td>
</tr>
<tr>
<th class="tls-table-head">City
</th>
<td class="tls-table-cell">Simple Text
</td>
<td class="tls-table-cell">Simple Text
</td>
<td class="tls-table-cell">Simple Text
</td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="tls-tips">* Ces frais doivent être acquittés uniquement en DZD et peuvent fluctuer selon le taux de chancellerie en vigueur.</div>
</div>
</div>
</div>
<div class="tls-footer">
<div class="tls-footer-links">
<div class="tls-footer-links--slot">
<div class="tls-footer-links--title">
<div class="tls-simple-text -color-white -weight-bold">Tls links
</div>
</div>
<div class="tls-footer-links--list">
<ul class="tls-link-list">
<li class="tls-link-list--slot"><a class="tls-link">My Link</a></li>
<li class="tls-link-list--slot"><a class="tls-link">My Link</a></li>
</ul>
</div>
</div>
<div class="tls-footer-links--slot">
<div class="tls-footer-links--title">
<div class="tls-simple-text -color-white -weight-bold">Tls links
</div>
</div>
<div class="tls-footer-links--list">
<ul class="tls-link-list">
<li class="tls-link-list--slot"><a class="tls-link">My Link</a></li>
<li class="tls-link-list--slot"><a class="tls-link">My Link</a></li>
</ul>
</div>
</div>
<div class="tls-footer-links--slot">
<div class="tls-footer-links--title">
<div class="tls-simple-text -color-white -weight-bold">Tls links
</div>
</div>
<div class="tls-footer-links--list">
<ul class="tls-link-list">
<li class="tls-link-list--slot"><a class="tls-link">My Link</a></li>
<li class="tls-link-list--slot"><a class="tls-link">My Link</a></li>
</ul>
</div>
</div>
<div class="tls-footer-links--slot">
<div class="tls-footer-links--title">
<div class="tls-simple-text -color-white -weight-bold">Tls links
</div>
</div>
<div class="tls-footer-links--list">
<ul class="tls-link-list">
<li class="tls-link-list--slot"><a class="tls-link">My Link</a></li>
<li class="tls-link-list--slot"><a class="tls-link">My Link</a></li>
</ul>
</div>
</div>
</div>
<div class="tls-footer-line"></div>
<div class="tls-footer-content">
<div class="tls-footer--slot"><a class="tls-logo" href="#"><img class="tls-logo--img" src="/atom/logo/logo/logo.svg"/></a></div>
<div class="tls-footer--slot tls-sm-visible">
<div class="tls-simple-text -color-white -size-12">© 2019 TLScontact. Tous droits réservés.
</div>
</div>
<div class="tls-footer--slot tls-sm-visible">
<div class="tls-social-logo-group">
<div class="tls-social-logo-group--slot"><a class="tls-social-logo" href="#"><i class="fab fa-linkedin-in tls-social-logo--icon"></i></a></div>
<div class="tls-social-logo-group--slot"><a class="tls-social-logo" href="#"><i class="fab fa-linkedin-in tls-social-logo--icon"></i></a></div>
</div>
</div>
<div class="tls-footer--slot"><a class="tls-logo" href="#"><img class="tls-logo--img" src="/atom/logo/logo/logo.svg"/></a></div>
</div>
</div>
</div>.tls-news
.tls-navbar
.tls-navbar--content
.tls-navbar--logo
a.tls-logo(href='#')
img.tls-logo--img(src='/atom/logo/logo/logo.svg')
.tls-navbar--links.-opened
.tls-navbar--slot
.tls-dropdown
a.tls-link-dropdown
.tls-link-dropdown--text Opened
.tls-link-dropdown--icon
i.fa.fa-chevron-up
.tls-dropdown--content
.tls-dropdown--content
.tls-dropdown-list
.tls-dropdown-list--slot
a.tls-dropdown-text My dropdown text
.tls-dropdown-list--slot
.tls-dropdown-text A longer text to see the difference
.tls-navbar--slot
.tls-dropdown
a.tls-link-dropdown
.tls-link-dropdown--text Closed
.tls-link-dropdown--icon
i.fa.fa-chevron-down
.tls-dropdown--content.hidden
.tls-dropdown--content.hidden Hidden content.
.tls-navbar--slot
a.tls-link-uppercase My Uppercase Link
.tls-navbar--slot
a.tls-button-link Button link
.tls-navbar--language
.tls-navbar--slot
a.tls-link-dropdown
img.tls-link-dropdown--flag(src='./flag-en.png')
.tls-link-dropdown--text Link
.tls-link-dropdown--icon
i.fa.fa-chevron-down
.tls-navbar--hamburger
.tls-hamburger.-state-closed
.tls-hamburger--top-line
.tls-hamburger--middle-line
.tls-hamburger--bottom-line
header.tls-simple-banner
.tls-home-text-group
.tls-simple-text.-color-white.-size-22
| Simple text
img.tls-image(src='/atom/image/image.png')
h1.tls-heading-1 Heading level 1
.tls-news-content
.tls-large-card-info
.tls-card-lg
.tls-simple-text.-size-16
p lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur felis magna, lacinia ornare congue ornare, pharetra a leo. Suspendisse fermentum ut mi vel pulvinar. Maecenas gravida varius mauris, sed tempus risus pulvinar sed. In varius placerat erat in porttitor. Sed mollis est ligula, sit amet iaculis nulla rhoncus sed. Morbi quis felis et quam posuere sodales eget quis est. Integer congue faucibus nunc, rhoncus hendrerit massa lobortis sit amet. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
.tls-simple-text.-size-16
p Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur felis magna, lacinia ornare congue ornare, pharetra a leo. Suspendisse fermentum ut mi vel pulvinar. Maecenas gravida varius mauris, sed tempus risus pulvinar sed. In varius placerat erat in porttitor. Sed mollis est ligula, sit amet iaculis nulla rhoncus sed. Morbi quis felis et quam posuere sodales eget quis est. Integer congue faucibus nunc, rhoncus hendrerit massa lobortis sit amet. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
.tls-large-card-info--decoration
.tls-decoration-vertical-lines.-blue
.tls-line1
.tls-line2
.tls-news-action
.tls-news-action--slot
h2.tls-heading-2 Heading level 2
.tls-news-action--slot
button.tls-button-primary.
Button
.tls-news-info
.tls-heading
h2.tls-title Changing of the visa fee for a Schengen visa
.tls-simple-text.-size-16.
From February 2, 2020, after the entry into force of the new EU Visa Code, Schengen visa fee will increase from 60 to 80 euros.
.tls-simple-text.-size-16.
The Schengen visa fee increase for Belarusian citizens will be temporary and will last until the entry into force of the Agreement between the EU and Belarus on visa facilitation, signed in Brussels on January 8.
.tls-simple-text.-size-16.
According to this Agreement, the fee for a Schengen visa will be automatically reduced from 80 to 35 euros.
.tls-simple-text.-size-16.
The new Agreement will come into effect upon ratification by the National Assembly of Belarus and the European Parliament.
.tls-heading
h2.tls-title Prime Time Appointment
.tls-simple-text.-size-16.
Please be informed that choosing the appointment for 17:00 - 17:30 you will select one additional service called Prime Time Service that we are happy to offer to you. This Service requires you to pay EUR 30.00 in addition to the normal fees.
.tls-simple-text.-size-16.
Please do not select Prime Time Appointments if you don’t agree to use the service.
.tls-simple-text.-size-16.
Thank you for understanding!
.tls-heading
h2.tls-title Tarifs
.tls-simple-text.-size-16.
Depuis le 2 février 2020, les tarifs des visas de court séjour pour les Etats membres de l’espace Schengen ont changé :
.tls-table-card-info
.tls-card-lg
table
thead
tr
th
th.tls-table-head.
Simple Text
th.tls-table-head.
Simple Text
th.tls-table-head.
Simple Text
tbody
tr
th.tls-table-head.
City
td.tls-table-cell.
Simple Text
td.tls-table-cell.
Simple Text
td.tls-table-cell.
Simple Text
tr
th.tls-table-head.
City
td.tls-table-cell.
Simple Text
td.tls-table-cell.
Simple Text
td.tls-table-cell.
Simple Text
tr
th.tls-table-head.
City
td.tls-table-cell.
Simple Text
td.tls-table-cell.
Simple Text
td.tls-table-cell.
Simple Text
.tls-tips * Ces frais doivent être acquittés uniquement en DZD et peuvent fluctuer selon le taux de chancellerie en vigueur.
.tls-footer
.tls-footer-links
.tls-footer-links--slot
.tls-footer-links--title
.tls-simple-text.-color-white.-weight-bold.
Tls links
.tls-footer-links--list
ul.tls-link-list
li.tls-link-list--slot
a.tls-link My Link
li.tls-link-list--slot
a.tls-link My Link
.tls-footer-links--slot
.tls-footer-links--title
.tls-simple-text.-color-white.-weight-bold.
Tls links
.tls-footer-links--list
ul.tls-link-list
li.tls-link-list--slot
a.tls-link My Link
li.tls-link-list--slot
a.tls-link My Link
.tls-footer-links--slot
.tls-footer-links--title
.tls-simple-text.-color-white.-weight-bold.
Tls links
.tls-footer-links--list
ul.tls-link-list
li.tls-link-list--slot
a.tls-link My Link
li.tls-link-list--slot
a.tls-link My Link
.tls-footer-links--slot
.tls-footer-links--title
.tls-simple-text.-color-white.-weight-bold.
Tls links
.tls-footer-links--list
ul.tls-link-list
li.tls-link-list--slot
a.tls-link My Link
li.tls-link-list--slot
a.tls-link My Link
.tls-footer-line
.tls-footer-content
.tls-footer--slot
a.tls-logo(href='#')
img.tls-logo--img(src='/atom/logo/logo/logo.svg')
.tls-footer--slot.tls-sm-visible
.tls-simple-text.-color-white.-size-12.
© 2019 TLScontact. Tous droits réservés.
.tls-footer--slot.tls-sm-visible
.tls-social-logo-group
.tls-social-logo-group--slot
a.tls-social-logo(href='#')
i.fab.fa-linkedin-in.tls-social-logo--icon
.tls-social-logo-group--slot
a.tls-social-logo(href='#')
i.fab.fa-linkedin-in.tls-social-logo--icon
.tls-footer--slot
a.tls-logo(href='#')
img.tls-logo--img(src='/atom/logo/logo/logo.svg')Map and opening hours for vac center
<div class="tls-opening-hours">
<div class="tls-navbar">
<div class="tls-navbar--content">
<div class="tls-navbar--logo"><a class="tls-logo" href="#"><img class="tls-logo--img" src="/atom/logo/logo/logo.svg"/></a></div>
<div class="tls-navbar--links -opened">
<div class="tls-navbar--slot">
<div class="tls-dropdown"><a class="tls-link-dropdown">
<div class="tls-link-dropdown--text">Opened</div>
<div class="tls-link-dropdown--icon"><i class="fa fa-chevron-up"></i></div></a>
<div class="tls-dropdown--content">
<div class="tls-dropdown--content">
<div class="tls-dropdown-list">
<div class="tls-dropdown-list--slot"><a class="tls-dropdown-text">My dropdown text</a></div>
<div class="tls-dropdown-list--slot">
<div class="tls-dropdown-text">A longer text to see the difference</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="tls-navbar--slot">
<div class="tls-dropdown"><a class="tls-link-dropdown">
<div class="tls-link-dropdown--text">Closed</div>
<div class="tls-link-dropdown--icon"><i class="fa fa-chevron-down"></i></div></a>
<div class="tls-dropdown--content hidden">
<div class="tls-dropdown--content hidden">Hidden content.</div>
</div>
</div>
</div>
<div class="tls-navbar--slot"><a class="tls-link-uppercase">My Uppercase Link</a></div>
<div class="tls-navbar--slot"><a class="tls-button-link">Button link</a></div>
</div>
<div class="tls-navbar--language">
<div class="tls-navbar--slot"><a class="tls-link-dropdown"><img class="tls-link-dropdown--flag" src="./flag-en.png"/>
<div class="tls-link-dropdown--text">Link</div>
<div class="tls-link-dropdown--icon"><i class="fa fa-chevron-down"></i></div></a></div>
</div>
<div class="tls-navbar--hamburger">
<div class="tls-hamburger -state-closed">
<div class="tls-hamburger--top-line"></div>
<div class="tls-hamburger--middle-line"></div>
<div class="tls-hamburger--bottom-line"></div>
</div>
</div>
</div>
</div>
<header class="tls-simple-banner">
<div class="tls-home-text-group">
<div class="tls-simple-text -color-white -size-22">Simple text<img class="tls-image" src="/atom/image/image.png"/>
</div>
<h1 class="tls-heading-1">Heading level 1</h1>
</div>
</header>
<div class="tls-opening-hours-map">
<div class="tls-large-card-map">
<div class="tls-card-lg">
<div class="tls-large-card-body">
<div class="tls-large-card-map--description">
<div class="tls-address">
<div class="tls-address-icon"><img class="tls-address-icon-img" src="/molecule/address/return-to-the-centre.png"/></div>
<div class="tls-address-desc">
<div class="tls-address-title">
<h2 class="tls-heading-2">Heading level 2</h2>
</div>
<div class="tls-address-description-bold">
<div class="tls-simple-text -color-main -weight-bold -size-16">Address desc first line
</div>
</div>
<div class="tls-address-description-italic">
<div class="tls-simple-text -color-main -size-16 -style-italic">address desc rest line
</div>
</div>
</div>
</div>
</div>
<div class="tls-large-card-map--map">
<div class="tls-google-map">
<iframe class="tls-google-map-iframe" src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3212.8176904014567!2d6.639447615032586!3d36.36519458004049!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x12f176eb4e52720f%3A0x840973aeb1fc132a!2sTLScontact%20Visa%20Application%20Center%20Constantine!5e0!3m2!1sen!2stn!4v1566901882835!5m2!1sen!2stn"></iframe>
</div>
</div>
</div>
</div>
<div class="tls-large-card-map--decoration">
<div class="tls-decoration-vertical-lines -blue">
<div class="tls-line1"></div>
<div class="tls-line2"></div>
</div>
</div>
</div>
</div>
<div class="tls-opening-hours-content">
<div class="tls-opening-hours-avs">
<div class="tls-opening-hours-avs--title">
<h2 class="tls-heading-2">Heading level 2</h2>
</div>
<div class="tls-opening-hours-avs--content">
<div class="tls-avs">
<div class="tls-avs-icon-ribbon"><img class="tls-avs-icon-img" src="/organism/card-avs/icon-ribbon.png"/></div>
<div class="tls-card-info">
<div class="tls-card-info--content">
<div class="tls-card-info--content-paragraph">
<div class="tls-simple-text -size-16">A very long Simple text on multiple lines
</div>
</div>
<div class="tls-card-info--content-price">
<div class="tls-simple-text -color-main -weight-bold -size-19">Simple text
</div>
</div>
<div class="tls-card-info--content-button">
<div class="tls-button-dynamic">
<div class="tls-button-dynamic--text">
<div class="tls-simple-text -color-primary -size-19">Simple Text
</div>
</div>
<div class="tls-button-dynamic--decoration">
<div class="tls-line1"></div>
<div class="tls-line2"></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="tls-opening-hours-time">
<div class="tls-opening-hours-time--title">
<h2 class="tls-heading-2">Heading level 2</h2>
</div>
<div class="tls-opening-hours-time--content">
<div class="tls-table">
<div class="tls-card-lg">
<table>
<tr>
<th class="tls-table-head">City
</th>
<td class="tls-table-cell">Simple Text
</td>
</tr>
<tr>
<th class="tls-table-head">City
</th>
<td class="tls-table-cell">Simple Text
</td>
</tr>
<tr>
<th class="tls-table-head">City
</th>
<td class="tls-table-cell">Simple Text
</td>
</tr>
</table>
</div>
</div>
</div>
</div>
<div class="tls-opening-hours-closed">
<div class="tls-opening-hours-closed--title">
<h2 class="tls-heading-2">Heading level 2</h2>
</div>
<div class="tls-opening-hours-closed--content">
<div class="tls-table">
<div class="tls-card-lg">
<table>
<tr>
<th class="tls-table-head">City
</th>
<td class="tls-table-cell">Simple Text
</td>
</tr>
<tr>
<th class="tls-table-head">City
</th>
<td class="tls-table-cell">Simple Text
</td>
</tr>
<tr>
<th class="tls-table-head">City
</th>
<td class="tls-table-cell">Simple Text
</td>
</tr>
</table>
</div>
</div>
</div>
</div>
</div>
<div class="tls-footer">
<div class="tls-footer-links">
<div class="tls-footer-links--slot">
<div class="tls-footer-links--title">
<div class="tls-simple-text -color-white -weight-bold">Tls links
</div>
</div>
<div class="tls-footer-links--list">
<ul class="tls-link-list">
<li class="tls-link-list--slot"><a class="tls-link">My Link</a></li>
<li class="tls-link-list--slot"><a class="tls-link">My Link</a></li>
</ul>
</div>
</div>
<div class="tls-footer-links--slot">
<div class="tls-footer-links--title">
<div class="tls-simple-text -color-white -weight-bold">Tls links
</div>
</div>
<div class="tls-footer-links--list">
<ul class="tls-link-list">
<li class="tls-link-list--slot"><a class="tls-link">My Link</a></li>
<li class="tls-link-list--slot"><a class="tls-link">My Link</a></li>
</ul>
</div>
</div>
<div class="tls-footer-links--slot">
<div class="tls-footer-links--title">
<div class="tls-simple-text -color-white -weight-bold">Tls links
</div>
</div>
<div class="tls-footer-links--list">
<ul class="tls-link-list">
<li class="tls-link-list--slot"><a class="tls-link">My Link</a></li>
<li class="tls-link-list--slot"><a class="tls-link">My Link</a></li>
</ul>
</div>
</div>
<div class="tls-footer-links--slot">
<div class="tls-footer-links--title">
<div class="tls-simple-text -color-white -weight-bold">Tls links
</div>
</div>
<div class="tls-footer-links--list">
<ul class="tls-link-list">
<li class="tls-link-list--slot"><a class="tls-link">My Link</a></li>
<li class="tls-link-list--slot"><a class="tls-link">My Link</a></li>
</ul>
</div>
</div>
</div>
<div class="tls-footer-line"></div>
<div class="tls-footer-content">
<div class="tls-footer--slot"><a class="tls-logo" href="#"><img class="tls-logo--img" src="/atom/logo/logo/logo.svg"/></a></div>
<div class="tls-footer--slot tls-sm-visible">
<div class="tls-simple-text -color-white -size-12">© 2019 TLScontact. Tous droits réservés.
</div>
</div>
<div class="tls-footer--slot tls-sm-visible">
<div class="tls-social-logo-group">
<div class="tls-social-logo-group--slot"><a class="tls-social-logo" href="#"><i class="fab fa-linkedin-in tls-social-logo--icon"></i></a></div>
<div class="tls-social-logo-group--slot"><a class="tls-social-logo" href="#"><i class="fab fa-linkedin-in tls-social-logo--icon"></i></a></div>
</div>
</div>
<div class="tls-footer--slot"><a class="tls-logo" href="#"><img class="tls-logo--img" src="/atom/logo/logo/logo.svg"/></a></div>
</div>
</div>
</div>.tls-opening-hours
.tls-navbar
.tls-navbar--content
.tls-navbar--logo
a.tls-logo(href='#')
img.tls-logo--img(src='/atom/logo/logo/logo.svg')
.tls-navbar--links.-opened
.tls-navbar--slot
.tls-dropdown
a.tls-link-dropdown
.tls-link-dropdown--text Opened
.tls-link-dropdown--icon
i.fa.fa-chevron-up
.tls-dropdown--content
.tls-dropdown--content
.tls-dropdown-list
.tls-dropdown-list--slot
a.tls-dropdown-text My dropdown text
.tls-dropdown-list--slot
.tls-dropdown-text A longer text to see the difference
.tls-navbar--slot
.tls-dropdown
a.tls-link-dropdown
.tls-link-dropdown--text Closed
.tls-link-dropdown--icon
i.fa.fa-chevron-down
.tls-dropdown--content.hidden
.tls-dropdown--content.hidden Hidden content.
.tls-navbar--slot
a.tls-link-uppercase My Uppercase Link
.tls-navbar--slot
a.tls-button-link Button link
.tls-navbar--language
.tls-navbar--slot
a.tls-link-dropdown
img.tls-link-dropdown--flag(src='./flag-en.png')
.tls-link-dropdown--text Link
.tls-link-dropdown--icon
i.fa.fa-chevron-down
.tls-navbar--hamburger
.tls-hamburger.-state-closed
.tls-hamburger--top-line
.tls-hamburger--middle-line
.tls-hamburger--bottom-line
header.tls-simple-banner
.tls-home-text-group
.tls-simple-text.-color-white.-size-22
| Simple text
img.tls-image(src='/atom/image/image.png')
h1.tls-heading-1 Heading level 1
.tls-opening-hours-map
.tls-large-card-map
.tls-card-lg
.tls-large-card-body
.tls-large-card-map--description
.tls-address
.tls-address-icon
img.tls-address-icon-img(src='/molecule/address/return-to-the-centre.png')
.tls-address-desc
.tls-address-title
h2.tls-heading-2 Heading level 2
.tls-address-description-bold
.tls-simple-text.-color-main.-weight-bold.-size-16.
Address desc first line
.tls-address-description-italic
.tls-simple-text.-color-main.-size-16.-style-italic.
address desc rest line
.tls-large-card-map--map
.tls-google-map
iframe.tls-google-map-iframe(src='https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3212.8176904014567!2d6.639447615032586!3d36.36519458004049!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x12f176eb4e52720f%3A0x840973aeb1fc132a!2sTLScontact%20Visa%20Application%20Center%20Constantine!5e0!3m2!1sen!2stn!4v1566901882835!5m2!1sen!2stn')
.tls-large-card-map--decoration
.tls-decoration-vertical-lines.-blue
.tls-line1
.tls-line2
.tls-opening-hours-content
.tls-opening-hours-avs
.tls-opening-hours-avs--title
h2.tls-heading-2 Heading level 2
.tls-opening-hours-avs--content
.tls-avs
.tls-avs-icon-ribbon
img.tls-avs-icon-img(src='/organism/card-avs/icon-ribbon.png')
.tls-card-info
.tls-card-info--content
.tls-card-info--content-paragraph
.tls-simple-text.-size-16.
A very long Simple text on multiple lines
.tls-card-info--content-price
.tls-simple-text.-color-main.-weight-bold.-size-19.
Simple text
.tls-card-info--content-button
.tls-button-dynamic
.tls-button-dynamic--text
.tls-simple-text.-color-primary.-size-19.
Simple Text
.tls-button-dynamic--decoration
.tls-line1
.tls-line2
.tls-opening-hours-time
.tls-opening-hours-time--title
h2.tls-heading-2 Heading level 2
.tls-opening-hours-time--content
.tls-table
.tls-card-lg
table
tbody
tr
th.tls-table-head.
City
td.tls-table-cell.
Simple Text
tr
th.tls-table-head.
City
td.tls-table-cell.
Simple Text
tr
th.tls-table-head.
City
td.tls-table-cell.
Simple Text
.tls-opening-hours-closed
.tls-opening-hours-closed--title
h2.tls-heading-2 Heading level 2
.tls-opening-hours-closed--content
.tls-table
.tls-card-lg
table
tbody
tr
th.tls-table-head.
City
td.tls-table-cell.
Simple Text
tr
th.tls-table-head.
City
td.tls-table-cell.
Simple Text
tr
th.tls-table-head.
City
td.tls-table-cell.
Simple Text
.tls-footer
.tls-footer-links
.tls-footer-links--slot
.tls-footer-links--title
.tls-simple-text.-color-white.-weight-bold.
Tls links
.tls-footer-links--list
ul.tls-link-list
li.tls-link-list--slot
a.tls-link My Link
li.tls-link-list--slot
a.tls-link My Link
.tls-footer-links--slot
.tls-footer-links--title
.tls-simple-text.-color-white.-weight-bold.
Tls links
.tls-footer-links--list
ul.tls-link-list
li.tls-link-list--slot
a.tls-link My Link
li.tls-link-list--slot
a.tls-link My Link
.tls-footer-links--slot
.tls-footer-links--title
.tls-simple-text.-color-white.-weight-bold.
Tls links
.tls-footer-links--list
ul.tls-link-list
li.tls-link-list--slot
a.tls-link My Link
li.tls-link-list--slot
a.tls-link My Link
.tls-footer-links--slot
.tls-footer-links--title
.tls-simple-text.-color-white.-weight-bold.
Tls links
.tls-footer-links--list
ul.tls-link-list
li.tls-link-list--slot
a.tls-link My Link
li.tls-link-list--slot
a.tls-link My Link
.tls-footer-line
.tls-footer-content
.tls-footer--slot
a.tls-logo(href='#')
img.tls-logo--img(src='/atom/logo/logo/logo.svg')
.tls-footer--slot.tls-sm-visible
.tls-simple-text.-color-white.-size-12.
© 2019 TLScontact. Tous droits réservés.
.tls-footer--slot.tls-sm-visible
.tls-social-logo-group
.tls-social-logo-group--slot
a.tls-social-logo(href='#')
i.fab.fa-linkedin-in.tls-social-logo--icon
.tls-social-logo-group--slot
a.tls-social-logo(href='#')
i.fab.fa-linkedin-in.tls-social-logo--icon
.tls-footer--slot
a.tls-logo(href='#')
img.tls-logo--img(src='/atom/logo/logo/logo.svg')Popup display.
<div class="tls-popup-display">
<div class="tls-popup-display--shadow-layer"></div>
<div class="tls-popup-display--container">
<div class="tls-popup-display--content">
<div class="tls-popup">
<div class="tls-popup--header">
<div class="tls-popup-header">
<div class="tls-popup-header--logo"><a class="tls-logo" href="#"><img class="tls-logo--img" src="/atom/logo/logo/logo.svg"/></a></div>
<div class="tls-popup-header--action">
<button class="tls-button-icon">×</button>
</div>
</div>
</div>
<div class="tls-popup--body">
<div class="tls-popup--body-slot tls-popup-title">
<h2 class="tls-heading-2">This is the popup title</h2>
</div>
<div class="tls-popup--body-slot">
<div class="tls-simple-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
</div>
<div class="tls-popup--body-slot">
<div class="tls-popup-action">
<button class="tls-button-danger -uppercase">Uppercase Button
</button>
<button class="tls-button-primary -uppercase">Uppercase Button
</button>
</div>
</div>
<div class="appointment-premium-remind"></div>
</div>
</div>
</div>
</div>
</div>.tls-popup-display
.tls-popup-display--shadow-layer
.tls-popup-display--container
.tls-popup-display--content
.tls-popup
.tls-popup--header
.tls-popup-header
.tls-popup-header--logo
a.tls-logo(href='#')
img.tls-logo--img(src='/atom/logo/logo/logo.svg')
.tls-popup-header--action
button.tls-button-icon ×
.tls-popup--body
.tls-popup--body-slot.tls-popup-title
h2.tls-heading-2 This is the popup title
.tls-popup--body-slot
.tls-simple-text.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
.tls-popup--body-slot
.tls-popup-action
button.tls-button-danger.-uppercase.
Uppercase Button
button.tls-button-primary.-uppercase.
Uppercase Button
.appointment-premium-remindThe procedure about how to apply visa
<div class="tls-visa-procedure">
<div class="tls-navbar">
<div class="tls-navbar--content">
<div class="tls-navbar--logo"><a class="tls-logo" href="#"><img class="tls-logo--img" src="/atom/logo/logo/logo.svg"/></a></div>
<div class="tls-navbar--links -opened">
<div class="tls-navbar--slot">
<div class="tls-dropdown"><a class="tls-link-dropdown">
<div class="tls-link-dropdown--text">Opened</div>
<div class="tls-link-dropdown--icon"><i class="fa fa-chevron-up"></i></div></a>
<div class="tls-dropdown--content">
<div class="tls-dropdown--content">
<div class="tls-dropdown-list">
<div class="tls-dropdown-list--slot"><a class="tls-dropdown-text">My dropdown text</a></div>
<div class="tls-dropdown-list--slot">
<div class="tls-dropdown-text">A longer text to see the difference</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="tls-navbar--slot">
<div class="tls-dropdown"><a class="tls-link-dropdown">
<div class="tls-link-dropdown--text">Closed</div>
<div class="tls-link-dropdown--icon"><i class="fa fa-chevron-down"></i></div></a>
<div class="tls-dropdown--content hidden">
<div class="tls-dropdown--content hidden">Hidden content.</div>
</div>
</div>
</div>
<div class="tls-navbar--slot"><a class="tls-link-uppercase">My Uppercase Link</a></div>
<div class="tls-navbar--slot"><a class="tls-button-link">Button link</a></div>
</div>
<div class="tls-navbar--language">
<div class="tls-navbar--slot"><a class="tls-link-dropdown"><img class="tls-link-dropdown--flag" src="./flag-en.png"/>
<div class="tls-link-dropdown--text">Link</div>
<div class="tls-link-dropdown--icon"><i class="fa fa-chevron-down"></i></div></a></div>
</div>
<div class="tls-navbar--hamburger">
<div class="tls-hamburger -state-closed">
<div class="tls-hamburger--top-line"></div>
<div class="tls-hamburger--middle-line"></div>
<div class="tls-hamburger--bottom-line"></div>
</div>
</div>
</div>
</div>
<header class="tls-simple-banner">
<div class="tls-home-text-group">
<div class="tls-simple-text -color-white -size-22">Simple text<img class="tls-image" src="/atom/image/image.png"/>
</div>
<h1 class="tls-heading-1">Heading level 1</h1>
</div>
</header>
<div class="tls-visa-procedure-content">
<div class="tls-procedure-card-info">
<div class="tls-card-lg">
<div class="tls-simple-text -size-16">
<div class="tls-simple-text -size-16">Please follow these steps in order to apply for a visa.
</div>
</div>
<div class="tls-simple-text -size-16">
<div class="tls-simple-text -weight-bold -size-16">France must be your main travel destination.
</div>
</div>
</div>
<div class="tls-procedure-card-info--decoration">
<div class="tls-decoration-vertical-lines -blue">
<div class="tls-line1"></div>
<div class="tls-line2"></div>
</div>
</div>
</div>
<div class="tls-visa-procedure-action">
<div class="tls-visa-procedure-action--slot">
<h2 class="tls-heading-2">Heading level 2</h2>
</div>
<div class="tls-visa-procedure-action--slot">
<button class="tls-button-primary">Button
</button>
</div>
<div class="tls-visa-procedure-instruction-title">
<div class="tls-simple-text -size-16">Read the different steps below
</div>
<div class="tls-simple-text -size-16">to correctly submit your visa application at the TLScontact Visa Application Centre.
</div>
</div>
</div>
<div class="tls-visa-procedure-info">
<div class="tls-visa-procedure-info--item">
<div class="tls-img-title-desc">
<div class="tls-img-title-desc-heading"><img class="tls-img-title-desc-img" src="/molecule/image-title-desc/step1.png"/>
<h2 class="tls-heading-2">Heading level 2</h2>
</div>
<div class="tls-img-title-desc-desc">
<div class="tls-simple-text -size-16">Read the <a href="page.php?pid=travel_purpose" target="_blank">list of documents</a> which need to be submitted with your visa application based on your travel purpose and prepare the documents carefully. Please always choose the correct travel purpose. <ul><li>list item</li></ul>
</div>
</div>
</div>
</div>
<div class="tls-visa-procedure-info--item">
<div class="tls-img-title-desc">
<div class="tls-img-title-desc-heading"><img class="tls-img-title-desc-img" src="/molecule/image-title-desc/step1.png"/>
<h2 class="tls-heading-2">Heading level 2</h2>
</div>
<div class="tls-img-title-desc-desc">
<div class="tls-simple-text -size-16">Read the <a href="page.php?pid=travel_purpose" target="_blank">list of documents</a> which need to be submitted with your visa application based on your travel purpose and prepare the documents carefully. Please always choose the correct travel purpose. <ul><li>list item</li></ul>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="tls-footer">
<div class="tls-footer-links">
<div class="tls-footer-links--slot">
<div class="tls-footer-links--title">
<div class="tls-simple-text -color-white -weight-bold">Tls links
</div>
</div>
<div class="tls-footer-links--list">
<ul class="tls-link-list">
<li class="tls-link-list--slot"><a class="tls-link">My Link</a></li>
<li class="tls-link-list--slot"><a class="tls-link">My Link</a></li>
</ul>
</div>
</div>
<div class="tls-footer-links--slot">
<div class="tls-footer-links--title">
<div class="tls-simple-text -color-white -weight-bold">Tls links
</div>
</div>
<div class="tls-footer-links--list">
<ul class="tls-link-list">
<li class="tls-link-list--slot"><a class="tls-link">My Link</a></li>
<li class="tls-link-list--slot"><a class="tls-link">My Link</a></li>
</ul>
</div>
</div>
<div class="tls-footer-links--slot">
<div class="tls-footer-links--title">
<div class="tls-simple-text -color-white -weight-bold">Tls links
</div>
</div>
<div class="tls-footer-links--list">
<ul class="tls-link-list">
<li class="tls-link-list--slot"><a class="tls-link">My Link</a></li>
<li class="tls-link-list--slot"><a class="tls-link">My Link</a></li>
</ul>
</div>
</div>
<div class="tls-footer-links--slot">
<div class="tls-footer-links--title">
<div class="tls-simple-text -color-white -weight-bold">Tls links
</div>
</div>
<div class="tls-footer-links--list">
<ul class="tls-link-list">
<li class="tls-link-list--slot"><a class="tls-link">My Link</a></li>
<li class="tls-link-list--slot"><a class="tls-link">My Link</a></li>
</ul>
</div>
</div>
</div>
<div class="tls-footer-line"></div>
<div class="tls-footer-content">
<div class="tls-footer--slot"><a class="tls-logo" href="#"><img class="tls-logo--img" src="/atom/logo/logo/logo.svg"/></a></div>
<div class="tls-footer--slot tls-sm-visible">
<div class="tls-simple-text -color-white -size-12">© 2019 TLScontact. Tous droits réservés.
</div>
</div>
<div class="tls-footer--slot tls-sm-visible">
<div class="tls-social-logo-group">
<div class="tls-social-logo-group--slot"><a class="tls-social-logo" href="#"><i class="fab fa-linkedin-in tls-social-logo--icon"></i></a></div>
<div class="tls-social-logo-group--slot"><a class="tls-social-logo" href="#"><i class="fab fa-linkedin-in tls-social-logo--icon"></i></a></div>
</div>
</div>
<div class="tls-footer--slot"><a class="tls-logo" href="#"><img class="tls-logo--img" src="/atom/logo/logo/logo.svg"/></a></div>
</div>
</div>
</div>.tls-visa-procedure
.tls-navbar
.tls-navbar--content
.tls-navbar--logo
a.tls-logo(href='#')
img.tls-logo--img(src='/atom/logo/logo/logo.svg')
.tls-navbar--links.-opened
.tls-navbar--slot
.tls-dropdown
a.tls-link-dropdown
.tls-link-dropdown--text Opened
.tls-link-dropdown--icon
i.fa.fa-chevron-up
.tls-dropdown--content
.tls-dropdown--content
.tls-dropdown-list
.tls-dropdown-list--slot
a.tls-dropdown-text My dropdown text
.tls-dropdown-list--slot
.tls-dropdown-text A longer text to see the difference
.tls-navbar--slot
.tls-dropdown
a.tls-link-dropdown
.tls-link-dropdown--text Closed
.tls-link-dropdown--icon
i.fa.fa-chevron-down
.tls-dropdown--content.hidden
.tls-dropdown--content.hidden Hidden content.
.tls-navbar--slot
a.tls-link-uppercase My Uppercase Link
.tls-navbar--slot
a.tls-button-link Button link
.tls-navbar--language
.tls-navbar--slot
a.tls-link-dropdown
img.tls-link-dropdown--flag(src='./flag-en.png')
.tls-link-dropdown--text Link
.tls-link-dropdown--icon
i.fa.fa-chevron-down
.tls-navbar--hamburger
.tls-hamburger.-state-closed
.tls-hamburger--top-line
.tls-hamburger--middle-line
.tls-hamburger--bottom-line
header.tls-simple-banner
.tls-home-text-group
.tls-simple-text.-color-white.-size-22
| Simple text
img.tls-image(src='/atom/image/image.png')
h1.tls-heading-1 Heading level 1
.tls-visa-procedure-content
.tls-procedure-card-info
.tls-card-lg
.tls-simple-text.-size-16
.tls-simple-text.-size-16.
Please follow these steps in order to apply for a visa.
.tls-simple-text.-size-16
.tls-simple-text.-weight-bold.-size-16.
France must be your main travel destination.
.tls-procedure-card-info--decoration
.tls-decoration-vertical-lines.-blue
.tls-line1
.tls-line2
.tls-visa-procedure-action
.tls-visa-procedure-action--slot
h2.tls-heading-2 Heading level 2
.tls-visa-procedure-action--slot
button.tls-button-primary.
Button
.tls-visa-procedure-instruction-title
.tls-simple-text.-size-16.
Read the different steps below
.tls-simple-text.-size-16.
to correctly submit your visa application at the TLScontact Visa Application Centre.
.tls-visa-procedure-info
.tls-visa-procedure-info--item
.tls-img-title-desc
.tls-img-title-desc-heading
img.tls-img-title-desc-img(src='/molecule/image-title-desc/step1.png')
h2.tls-heading-2 Heading level 2
.tls-img-title-desc-desc
.tls-simple-text.-size-16
| Read the
a(href='page.php?pid=travel_purpose', target='_blank') list of documents
| which need to be submitted with your visa application based on your travel purpose and prepare the documents carefully. Please always choose the correct travel purpose.
ul
li list item
.tls-visa-procedure-info--item
.tls-img-title-desc
.tls-img-title-desc-heading
img.tls-img-title-desc-img(src='/molecule/image-title-desc/step1.png')
h2.tls-heading-2 Heading level 2
.tls-img-title-desc-desc
.tls-simple-text.-size-16
| Read the
a(href='page.php?pid=travel_purpose', target='_blank') list of documents
| which need to be submitted with your visa application based on your travel purpose and prepare the documents carefully. Please always choose the correct travel purpose.
ul
li list item
.tls-footer
.tls-footer-links
.tls-footer-links--slot
.tls-footer-links--title
.tls-simple-text.-color-white.-weight-bold.
Tls links
.tls-footer-links--list
ul.tls-link-list
li.tls-link-list--slot
a.tls-link My Link
li.tls-link-list--slot
a.tls-link My Link
.tls-footer-links--slot
.tls-footer-links--title
.tls-simple-text.-color-white.-weight-bold.
Tls links
.tls-footer-links--list
ul.tls-link-list
li.tls-link-list--slot
a.tls-link My Link
li.tls-link-list--slot
a.tls-link My Link
.tls-footer-links--slot
.tls-footer-links--title
.tls-simple-text.-color-white.-weight-bold.
Tls links
.tls-footer-links--list
ul.tls-link-list
li.tls-link-list--slot
a.tls-link My Link
li.tls-link-list--slot
a.tls-link My Link
.tls-footer-links--slot
.tls-footer-links--title
.tls-simple-text.-color-white.-weight-bold.
Tls links
.tls-footer-links--list
ul.tls-link-list
li.tls-link-list--slot
a.tls-link My Link
li.tls-link-list--slot
a.tls-link My Link
.tls-footer-line
.tls-footer-content
.tls-footer--slot
a.tls-logo(href='#')
img.tls-logo--img(src='/atom/logo/logo/logo.svg')
.tls-footer--slot.tls-sm-visible
.tls-simple-text.-color-white.-size-12.
© 2019 TLScontact. Tous droits réservés.
.tls-footer--slot.tls-sm-visible
.tls-social-logo-group
.tls-social-logo-group--slot
a.tls-social-logo(href='#')
i.fab.fa-linkedin-in.tls-social-logo--icon
.tls-social-logo-group--slot
a.tls-social-logo(href='#')
i.fab.fa-linkedin-in.tls-social-logo--icon
.tls-footer--slot
a.tls-logo(href='#')
img.tls-logo--img(src='/atom/logo/logo/logo.svg')TLS Application Procedure-Embassy page.
<div class="tls-visa-procedure-embassy">
<div class="tls-navbar">
<div class="tls-navbar--content">
<div class="tls-navbar--logo"><a class="tls-logo" href="#"><img class="tls-logo--img" src="/atom/logo/logo/logo.svg"/></a></div>
<div class="tls-navbar--links -opened">
<div class="tls-navbar--slot">
<div class="tls-dropdown"><a class="tls-link-dropdown">
<div class="tls-link-dropdown--text">Opened</div>
<div class="tls-link-dropdown--icon"><i class="fa fa-chevron-up"></i></div></a>
<div class="tls-dropdown--content">
<div class="tls-dropdown--content">
<div class="tls-dropdown-list">
<div class="tls-dropdown-list--slot"><a class="tls-dropdown-text">My dropdown text</a></div>
<div class="tls-dropdown-list--slot">
<div class="tls-dropdown-text">A longer text to see the difference</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="tls-navbar--slot">
<div class="tls-dropdown"><a class="tls-link-dropdown">
<div class="tls-link-dropdown--text">Closed</div>
<div class="tls-link-dropdown--icon"><i class="fa fa-chevron-down"></i></div></a>
<div class="tls-dropdown--content hidden">
<div class="tls-dropdown--content hidden">Hidden content.</div>
</div>
</div>
</div>
<div class="tls-navbar--slot"><a class="tls-link-uppercase">My Uppercase Link</a></div>
<div class="tls-navbar--slot"><a class="tls-button-link">Button link</a></div>
</div>
<div class="tls-navbar--language">
<div class="tls-navbar--slot"><a class="tls-link-dropdown"><img class="tls-link-dropdown--flag" src="./flag-en.png"/>
<div class="tls-link-dropdown--text">Link</div>
<div class="tls-link-dropdown--icon"><i class="fa fa-chevron-down"></i></div></a></div>
</div>
<div class="tls-navbar--hamburger">
<div class="tls-hamburger -state-closed">
<div class="tls-hamburger--top-line"></div>
<div class="tls-hamburger--middle-line"></div>
<div class="tls-hamburger--bottom-line"></div>
</div>
</div>
</div>
</div>
<header class="tls-simple-banner">
<div class="tls-home-text-group">
<div class="tls-simple-text -color-white -size-22">Simple text<img class="tls-image" src="/atom/image/image.png"/>
</div>
<h1 class="tls-heading-1">Heading level 1</h1>
</div>
</header>
<div class="tls-visa-procedure-embassy-content">
<div class="tls-procedure-card-info">
<div class="tls-card-lg">
<div class="tls-simple-text -size-16">
<div class="tls-simple-text -size-16">Please follow these steps in order to apply for a visa.
</div>
</div>
<div class="tls-simple-text -size-16">
<div class="tls-simple-text -weight-bold -size-16">France must be your main travel destination.
</div>
</div>
</div>
<div class="tls-procedure-card-info--decoration">
<div class="tls-decoration-vertical-lines -blue">
<div class="tls-line1"></div>
<div class="tls-line2"></div>
</div>
</div>
</div>
<div class="tls-visa-procedure-embassy-action">
<div class="tls-visa-procedure-embassy-action--slot">
<h2 class="tls-heading-2">Heading level 2</h2>
</div>
<div class="tls-visa-procedure-embassy-action--slot">
<button class="tls-button-primary">Button
</button>
</div>
<div class="tls-visa-procedure-embassy-instruction-title">
<div class="tls-simple-text -size-16">Read the different steps below
</div>
<div class="tls-simple-text -size-16">to correctly submit your visa application at the TLScontact Visa Application Centre.
</div>
</div>
</div>
<div class="tls-visa-procedure-embassy-info">
<div class="tls-visa-procedure-embassy-info--item">
<div class="tls-img-title-desc">
<div class="tls-img-title-desc-heading"><img class="tls-img-title-desc-img" src="/molecule/image-title-desc/step1.png"/>
<h2 class="tls-heading-2">Heading level 2</h2>
</div>
<div class="tls-img-title-desc-desc">
<div class="tls-simple-text -size-16">Read the <a href="page.php?pid=travel_purpose" target="_blank">list of documents</a> which need to be submitted with your visa application based on your travel purpose and prepare the documents carefully. Please always choose the correct travel purpose. <ul><li>list item</li></ul>
</div>
</div>
</div>
</div>
<div class="tls-visa-procedure-embassy-info--item">
<div class="tls-img-title-desc">
<div class="tls-img-title-desc-heading"><img class="tls-img-title-desc-img" src="/molecule/image-title-desc/step1.png"/>
<h2 class="tls-heading-2">Heading level 2</h2>
</div>
<div class="tls-img-title-desc-desc">
<div class="tls-simple-text -size-16">Read the <a href="page.php?pid=travel_purpose" target="_blank">list of documents</a> which need to be submitted with your visa application based on your travel purpose and prepare the documents carefully. Please always choose the correct travel purpose. <ul><li>list item</li></ul>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="tls-footer">
<div class="tls-footer-links">
<div class="tls-footer-links--slot">
<div class="tls-footer-links--title">
<div class="tls-simple-text -color-white -weight-bold">Tls links
</div>
</div>
<div class="tls-footer-links--list">
<ul class="tls-link-list">
<li class="tls-link-list--slot"><a class="tls-link">My Link</a></li>
<li class="tls-link-list--slot"><a class="tls-link">My Link</a></li>
</ul>
</div>
</div>
<div class="tls-footer-links--slot">
<div class="tls-footer-links--title">
<div class="tls-simple-text -color-white -weight-bold">Tls links
</div>
</div>
<div class="tls-footer-links--list">
<ul class="tls-link-list">
<li class="tls-link-list--slot"><a class="tls-link">My Link</a></li>
<li class="tls-link-list--slot"><a class="tls-link">My Link</a></li>
</ul>
</div>
</div>
<div class="tls-footer-links--slot">
<div class="tls-footer-links--title">
<div class="tls-simple-text -color-white -weight-bold">Tls links
</div>
</div>
<div class="tls-footer-links--list">
<ul class="tls-link-list">
<li class="tls-link-list--slot"><a class="tls-link">My Link</a></li>
<li class="tls-link-list--slot"><a class="tls-link">My Link</a></li>
</ul>
</div>
</div>
<div class="tls-footer-links--slot">
<div class="tls-footer-links--title">
<div class="tls-simple-text -color-white -weight-bold">Tls links
</div>
</div>
<div class="tls-footer-links--list">
<ul class="tls-link-list">
<li class="tls-link-list--slot"><a class="tls-link">My Link</a></li>
<li class="tls-link-list--slot"><a class="tls-link">My Link</a></li>
</ul>
</div>
</div>
</div>
<div class="tls-footer-line"></div>
<div class="tls-footer-content">
<div class="tls-footer--slot"><a class="tls-logo" href="#"><img class="tls-logo--img" src="/atom/logo/logo/logo.svg"/></a></div>
<div class="tls-footer--slot tls-sm-visible">
<div class="tls-simple-text -color-white -size-12">© 2019 TLScontact. Tous droits réservés.
</div>
</div>
<div class="tls-footer--slot tls-sm-visible">
<div class="tls-social-logo-group">
<div class="tls-social-logo-group--slot"><a class="tls-social-logo" href="#"><i class="fab fa-linkedin-in tls-social-logo--icon"></i></a></div>
<div class="tls-social-logo-group--slot"><a class="tls-social-logo" href="#"><i class="fab fa-linkedin-in tls-social-logo--icon"></i></a></div>
</div>
</div>
<div class="tls-footer--slot"><a class="tls-logo" href="#"><img class="tls-logo--img" src="/atom/logo/logo/logo.svg"/></a></div>
</div>
</div>
</div>.tls-visa-procedure-embassy
.tls-navbar
.tls-navbar--content
.tls-navbar--logo
a.tls-logo(href='#')
img.tls-logo--img(src='/atom/logo/logo/logo.svg')
.tls-navbar--links.-opened
.tls-navbar--slot
.tls-dropdown
a.tls-link-dropdown
.tls-link-dropdown--text Opened
.tls-link-dropdown--icon
i.fa.fa-chevron-up
.tls-dropdown--content
.tls-dropdown--content
.tls-dropdown-list
.tls-dropdown-list--slot
a.tls-dropdown-text My dropdown text
.tls-dropdown-list--slot
.tls-dropdown-text A longer text to see the difference
.tls-navbar--slot
.tls-dropdown
a.tls-link-dropdown
.tls-link-dropdown--text Closed
.tls-link-dropdown--icon
i.fa.fa-chevron-down
.tls-dropdown--content.hidden
.tls-dropdown--content.hidden Hidden content.
.tls-navbar--slot
a.tls-link-uppercase My Uppercase Link
.tls-navbar--slot
a.tls-button-link Button link
.tls-navbar--language
.tls-navbar--slot
a.tls-link-dropdown
img.tls-link-dropdown--flag(src='./flag-en.png')
.tls-link-dropdown--text Link
.tls-link-dropdown--icon
i.fa.fa-chevron-down
.tls-navbar--hamburger
.tls-hamburger.-state-closed
.tls-hamburger--top-line
.tls-hamburger--middle-line
.tls-hamburger--bottom-line
header.tls-simple-banner
.tls-home-text-group
.tls-simple-text.-color-white.-size-22
| Simple text
img.tls-image(src='/atom/image/image.png')
h1.tls-heading-1 Heading level 1
.tls-visa-procedure-embassy-content
.tls-procedure-card-info
.tls-card-lg
.tls-simple-text.-size-16
.tls-simple-text.-size-16.
Please follow these steps in order to apply for a visa.
.tls-simple-text.-size-16
.tls-simple-text.-weight-bold.-size-16.
France must be your main travel destination.
.tls-procedure-card-info--decoration
.tls-decoration-vertical-lines.-blue
.tls-line1
.tls-line2
.tls-visa-procedure-embassy-action
.tls-visa-procedure-embassy-action--slot
h2.tls-heading-2 Heading level 2
.tls-visa-procedure-embassy-action--slot
button.tls-button-primary.
Button
.tls-visa-procedure-embassy-instruction-title
.tls-simple-text.-size-16.
Read the different steps below
.tls-simple-text.-size-16.
to correctly submit your visa application at the TLScontact Visa Application Centre.
.tls-visa-procedure-embassy-info
.tls-visa-procedure-embassy-info--item
.tls-img-title-desc
.tls-img-title-desc-heading
img.tls-img-title-desc-img(src='/molecule/image-title-desc/step1.png')
h2.tls-heading-2 Heading level 2
.tls-img-title-desc-desc
.tls-simple-text.-size-16
| Read the
a(href='page.php?pid=travel_purpose', target='_blank') list of documents
| which need to be submitted with your visa application based on your travel purpose and prepare the documents carefully. Please always choose the correct travel purpose.
ul
li list item
.tls-visa-procedure-embassy-info--item
.tls-img-title-desc
.tls-img-title-desc-heading
img.tls-img-title-desc-img(src='/molecule/image-title-desc/step1.png')
h2.tls-heading-2 Heading level 2
.tls-img-title-desc-desc
.tls-simple-text.-size-16
| Read the
a(href='page.php?pid=travel_purpose', target='_blank') list of documents
| which need to be submitted with your visa application based on your travel purpose and prepare the documents carefully. Please always choose the correct travel purpose.
ul
li list item
.tls-footer
.tls-footer-links
.tls-footer-links--slot
.tls-footer-links--title
.tls-simple-text.-color-white.-weight-bold.
Tls links
.tls-footer-links--list
ul.tls-link-list
li.tls-link-list--slot
a.tls-link My Link
li.tls-link-list--slot
a.tls-link My Link
.tls-footer-links--slot
.tls-footer-links--title
.tls-simple-text.-color-white.-weight-bold.
Tls links
.tls-footer-links--list
ul.tls-link-list
li.tls-link-list--slot
a.tls-link My Link
li.tls-link-list--slot
a.tls-link My Link
.tls-footer-links--slot
.tls-footer-links--title
.tls-simple-text.-color-white.-weight-bold.
Tls links
.tls-footer-links--list
ul.tls-link-list
li.tls-link-list--slot
a.tls-link My Link
li.tls-link-list--slot
a.tls-link My Link
.tls-footer-links--slot
.tls-footer-links--title
.tls-simple-text.-color-white.-weight-bold.
Tls links
.tls-footer-links--list
ul.tls-link-list
li.tls-link-list--slot
a.tls-link My Link
li.tls-link-list--slot
a.tls-link My Link
.tls-footer-line
.tls-footer-content
.tls-footer--slot
a.tls-logo(href='#')
img.tls-logo--img(src='/atom/logo/logo/logo.svg')
.tls-footer--slot.tls-sm-visible
.tls-simple-text.-color-white.-size-12.
© 2019 TLScontact. Tous droits réservés.
.tls-footer--slot.tls-sm-visible
.tls-social-logo-group
.tls-social-logo-group--slot
a.tls-social-logo(href='#')
i.fab.fa-linkedin-in.tls-social-logo--icon
.tls-social-logo-group--slot
a.tls-social-logo(href='#')
i.fab.fa-linkedin-in.tls-social-logo--icon
.tls-footer--slot
a.tls-logo(href='#')
img.tls-logo--img(src='/atom/logo/logo/logo.svg')Register page.
<div class="tls-register">
<div class="tls-navbar">
<div class="tls-navbar--content">
<div class="tls-navbar--logo"><a class="tls-logo" href="#"><img class="tls-logo--img" src="/atom/logo/logo/logo.svg"/></a></div>
<div class="tls-navbar--links -opened">
<div class="tls-navbar--slot">
<div class="tls-dropdown"><a class="tls-link-dropdown">
<div class="tls-link-dropdown--text">Opened</div>
<div class="tls-link-dropdown--icon"><i class="fa fa-chevron-up"></i></div></a>
<div class="tls-dropdown--content">
<div class="tls-dropdown--content">
<div class="tls-dropdown-list">
<div class="tls-dropdown-list--slot"><a class="tls-dropdown-text">My dropdown text</a></div>
<div class="tls-dropdown-list--slot">
<div class="tls-dropdown-text">A longer text to see the difference</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="tls-navbar--slot">
<div class="tls-dropdown"><a class="tls-link-dropdown">
<div class="tls-link-dropdown--text">Closed</div>
<div class="tls-link-dropdown--icon"><i class="fa fa-chevron-down"></i></div></a>
<div class="tls-dropdown--content hidden">
<div class="tls-dropdown--content hidden">Hidden content.</div>
</div>
</div>
</div>
<div class="tls-navbar--slot"><a class="tls-link-uppercase">My Uppercase Link</a></div>
<div class="tls-navbar--slot"><a class="tls-button-link">Button link</a></div>
</div>
<div class="tls-navbar--language">
<div class="tls-navbar--slot"><a class="tls-link-dropdown"><img class="tls-link-dropdown--flag" src="./flag-en.png"/>
<div class="tls-link-dropdown--text">Link</div>
<div class="tls-link-dropdown--icon"><i class="fa fa-chevron-down"></i></div></a></div>
</div>
<div class="tls-navbar--hamburger">
<div class="tls-hamburger -state-closed">
<div class="tls-hamburger--top-line"></div>
<div class="tls-hamburger--middle-line"></div>
<div class="tls-hamburger--bottom-line"></div>
</div>
</div>
</div>
</div>
<header class="tls-simple-banner">
<div class="tls-home-text-group">
<div class="tls-simple-text -color-white -size-22">Simple text<img class="tls-image" src="/atom/image/image.png"/>
</div>
<h1 class="tls-heading-1">Heading level 1</h1>
</div>
</header>
<div class="tls-register-content">
<div class="tls-large-card-info">
<div class="tls-card-lg">
<div class="tls-simple-text -size-16">
<p>lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur felis magna, lacinia ornare congue ornare, pharetra a leo. Suspendisse fermentum ut mi vel pulvinar. Maecenas gravida varius mauris, sed tempus risus pulvinar sed. In varius placerat erat in porttitor. Sed mollis est ligula, sit amet iaculis nulla rhoncus sed. Morbi quis felis et quam posuere sodales eget quis est. Integer congue faucibus nunc, rhoncus hendrerit massa lobortis sit amet. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
</div>
<div class="tls-simple-text -size-16">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur felis magna, lacinia ornare congue ornare, pharetra a leo. Suspendisse fermentum ut mi vel pulvinar. Maecenas gravida varius mauris, sed tempus risus pulvinar sed. In varius placerat erat in porttitor. Sed mollis est ligula, sit amet iaculis nulla rhoncus sed. Morbi quis felis et quam posuere sodales eget quis est. Integer congue faucibus nunc, rhoncus hendrerit massa lobortis sit amet. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
</div>
</div>
<div class="tls-large-card-info--decoration">
<div class="tls-decoration-vertical-lines -blue">
<div class="tls-line1"></div>
<div class="tls-line2"></div>
</div>
</div>
</div>
<div class="tls-register-content--slot">
<div class="tls-error-info">
<div class="tls-error-info--content">
<div class="tls-simple-text -size-16">Simple Text
</div>
</div>
</div>
</div>
<div class="tls-register-content--slot">
<div class="tls-form">
<div class="tls-complex-form--slot">
<div class="tls-simple-text -color-danger -weight-bold -size-16">Simple Text with danger message</div>
</div>
<div class="tls-complex-form--slot">
<h2 class="tls-heading-2">Heading level 2</h2>
</div>
<div class="tls-form--slot">
<div class="tls-field">
<div class="tls-field--label">
<label class="tls-label">Label</label>
</div>
<div class="tls-field--area">
<input class="tls-input-text valid" type="text"/>
</div>
</div>
</div>
<div class="tls-form--slot">
<div class="tls-field">
<div class="tls-field--label">
<label class="tls-label">Label</label>
</div>
<div class="tls-field--area">
<input class="tls-input-text valid" type="text"/>
</div>
</div>
<div class="tls-simple-text -size-16">Simple Text
</div>
</div>
<div class="tls-form--slot">
<div class="tls-field">
<div class="tls-field--label">
<label class="tls-label">Label</label>
</div>
<div class="tls-field--area">
<input class="tls-input-text valid" type="text"/>
</div>
</div>
</div>
<div class="tls-form--slot">
<div class="tls-field inline">
<div class="tls-field--label-group">
<label class="tls-label">Label</label>
</div>
<div class="tls-field--area">
<div class="tls-input-check-group">
<input class="tls-input-check" id="val1" type="checkbox"/>
<label class="tls-input-check--label" for="val1">Value 1</label>
</div>
<div class="tls-input-check-group">
<input class="tls-input-check" id="val2" type="checkbox"/>
<label class="tls-input-check--label" for="val2">Value 2</label>
</div>
<div class="tls-input-check-group">
<input class="tls-input-check" id="val3" type="checkbox"/>
<label class="tls-input-check--label" for="val3">Value 3</label>
</div>
</div>
</div>
</div>
<div class="tls-form--slot">
<div class="tls-form--group-button">
<div class="tls-form-button">
<button class="tls-button-primary -small">Submit
</button>
</div>
<div class="tls-form-button">
<button class="tls-button-primary -small">Submit
</button>
</div>
</div>
</div>
<div class="tls-complex-form--slot">
<h2 class="tls-heading-2">Heading level 2</h2>
</div>
<div class="tls-form--slot">
<div class="tls-field">
<div class="tls-field--label">
<label class="tls-label">Label</label><span class="tls-mandatory-indicator tls-simple-text -color-danger -weight-bold -size-16">*</span>
</div>
<div class="tls-field--area">
<input class="tls-input-text valid" type="text"/>
</div>
</div>
</div>
<div class="tls-form--slot">
<div class="tls-form-button">
<button class="tls-button-primary -small">Submit
</button>
</div>
</div>
</div>
</div>
</div>
<div class="tls-footer">
<div class="tls-footer-links">
<div class="tls-footer-links--slot">
<div class="tls-footer-links--title">
<div class="tls-simple-text -color-white -weight-bold">Tls links
</div>
</div>
<div class="tls-footer-links--list">
<ul class="tls-link-list">
<li class="tls-link-list--slot"><a class="tls-link">My Link</a></li>
<li class="tls-link-list--slot"><a class="tls-link">My Link</a></li>
</ul>
</div>
</div>
<div class="tls-footer-links--slot">
<div class="tls-footer-links--title">
<div class="tls-simple-text -color-white -weight-bold">Tls links
</div>
</div>
<div class="tls-footer-links--list">
<ul class="tls-link-list">
<li class="tls-link-list--slot"><a class="tls-link">My Link</a></li>
<li class="tls-link-list--slot"><a class="tls-link">My Link</a></li>
</ul>
</div>
</div>
<div class="tls-footer-links--slot">
<div class="tls-footer-links--title">
<div class="tls-simple-text -color-white -weight-bold">Tls links
</div>
</div>
<div class="tls-footer-links--list">
<ul class="tls-link-list">
<li class="tls-link-list--slot"><a class="tls-link">My Link</a></li>
<li class="tls-link-list--slot"><a class="tls-link">My Link</a></li>
</ul>
</div>
</div>
<div class="tls-footer-links--slot">
<div class="tls-footer-links--title">
<div class="tls-simple-text -color-white -weight-bold">Tls links
</div>
</div>
<div class="tls-footer-links--list">
<ul class="tls-link-list">
<li class="tls-link-list--slot"><a class="tls-link">My Link</a></li>
<li class="tls-link-list--slot"><a class="tls-link">My Link</a></li>
</ul>
</div>
</div>
</div>
<div class="tls-footer-line"></div>
<div class="tls-footer-content">
<div class="tls-footer--slot"><a class="tls-logo" href="#"><img class="tls-logo--img" src="/atom/logo/logo/logo.svg"/></a></div>
<div class="tls-footer--slot tls-sm-visible">
<div class="tls-simple-text -color-white -size-12">© 2019 TLScontact. Tous droits réservés.
</div>
</div>
<div class="tls-footer--slot tls-sm-visible">
<div class="tls-social-logo-group">
<div class="tls-social-logo-group--slot"><a class="tls-social-logo" href="#"><i class="fab fa-linkedin-in tls-social-logo--icon"></i></a></div>
<div class="tls-social-logo-group--slot"><a class="tls-social-logo" href="#"><i class="fab fa-linkedin-in tls-social-logo--icon"></i></a></div>
</div>
</div>
<div class="tls-footer--slot"><a class="tls-logo" href="#"><img class="tls-logo--img" src="/atom/logo/logo/logo.svg"/></a></div>
</div>
</div>
</div>.tls-register
.tls-navbar
.tls-navbar--content
.tls-navbar--logo
a.tls-logo(href='#')
img.tls-logo--img(src='/atom/logo/logo/logo.svg')
.tls-navbar--links.-opened
.tls-navbar--slot
.tls-dropdown
a.tls-link-dropdown
.tls-link-dropdown--text Opened
.tls-link-dropdown--icon
i.fa.fa-chevron-up
.tls-dropdown--content
.tls-dropdown--content
.tls-dropdown-list
.tls-dropdown-list--slot
a.tls-dropdown-text My dropdown text
.tls-dropdown-list--slot
.tls-dropdown-text A longer text to see the difference
.tls-navbar--slot
.tls-dropdown
a.tls-link-dropdown
.tls-link-dropdown--text Closed
.tls-link-dropdown--icon
i.fa.fa-chevron-down
.tls-dropdown--content.hidden
.tls-dropdown--content.hidden Hidden content.
.tls-navbar--slot
a.tls-link-uppercase My Uppercase Link
.tls-navbar--slot
a.tls-button-link Button link
.tls-navbar--language
.tls-navbar--slot
a.tls-link-dropdown
img.tls-link-dropdown--flag(src='./flag-en.png')
.tls-link-dropdown--text Link
.tls-link-dropdown--icon
i.fa.fa-chevron-down
.tls-navbar--hamburger
.tls-hamburger.-state-closed
.tls-hamburger--top-line
.tls-hamburger--middle-line
.tls-hamburger--bottom-line
header.tls-simple-banner
.tls-home-text-group
.tls-simple-text.-color-white.-size-22
| Simple text
img.tls-image(src='/atom/image/image.png')
h1.tls-heading-1 Heading level 1
.tls-register-content
.tls-large-card-info
.tls-card-lg
.tls-simple-text.-size-16
p lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur felis magna, lacinia ornare congue ornare, pharetra a leo. Suspendisse fermentum ut mi vel pulvinar. Maecenas gravida varius mauris, sed tempus risus pulvinar sed. In varius placerat erat in porttitor. Sed mollis est ligula, sit amet iaculis nulla rhoncus sed. Morbi quis felis et quam posuere sodales eget quis est. Integer congue faucibus nunc, rhoncus hendrerit massa lobortis sit amet. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
.tls-simple-text.-size-16
p Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur felis magna, lacinia ornare congue ornare, pharetra a leo. Suspendisse fermentum ut mi vel pulvinar. Maecenas gravida varius mauris, sed tempus risus pulvinar sed. In varius placerat erat in porttitor. Sed mollis est ligula, sit amet iaculis nulla rhoncus sed. Morbi quis felis et quam posuere sodales eget quis est. Integer congue faucibus nunc, rhoncus hendrerit massa lobortis sit amet. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
.tls-large-card-info--decoration
.tls-decoration-vertical-lines.-blue
.tls-line1
.tls-line2
.tls-register-content--slot
.tls-error-info
.tls-error-info--content
.tls-simple-text.-size-16.
Simple Text
.tls-register-content--slot
.tls-form
.tls-complex-form--slot
.tls-simple-text.-color-danger.-weight-bold.-size-16 Simple Text with danger message
.tls-complex-form--slot
h2.tls-heading-2 Heading level 2
.tls-form--slot
.tls-field
.tls-field--label
label.tls-label Label
.tls-field--area
input.tls-input-text.valid(type='text')
.tls-form--slot
.tls-field
.tls-field--label
label.tls-label Label
.tls-field--area
input.tls-input-text.valid(type='text')
.tls-simple-text.-size-16.
Simple Text
.tls-form--slot
.tls-field
.tls-field--label
label.tls-label Label
.tls-field--area
input.tls-input-text.valid(type='text')
.tls-form--slot
.tls-field.inline
.tls-field--label-group
label.tls-label Label
.tls-field--area
.tls-input-check-group
input.tls-input-check#val1(type='checkbox')
label.tls-input-check--label(for='val1') Value 1
.tls-input-check-group
input.tls-input-check#val2(type='checkbox')
label.tls-input-check--label(for='val2') Value 2
.tls-input-check-group
input.tls-input-check#val3(type='checkbox')
label.tls-input-check--label(for='val3') Value 3
.tls-form--slot
.tls-form--group-button
.tls-form-button
button.tls-button-primary.-small.
Submit
.tls-form-button
button.tls-button-primary.-small.
Submit
.tls-complex-form--slot
h2.tls-heading-2 Heading level 2
.tls-form--slot
.tls-field
.tls-field--label
label.tls-label Label
span.tls-mandatory-indicator.tls-simple-text.-color-danger.-weight-bold.-size-16 *
.tls-field--area
input.tls-input-text.valid(type='text')
.tls-form--slot
.tls-form-button
button.tls-button-primary.-small.
Submit
.tls-footer
.tls-footer-links
.tls-footer-links--slot
.tls-footer-links--title
.tls-simple-text.-color-white.-weight-bold.
Tls links
.tls-footer-links--list
ul.tls-link-list
li.tls-link-list--slot
a.tls-link My Link
li.tls-link-list--slot
a.tls-link My Link
.tls-footer-links--slot
.tls-footer-links--title
.tls-simple-text.-color-white.-weight-bold.
Tls links
.tls-footer-links--list
ul.tls-link-list
li.tls-link-list--slot
a.tls-link My Link
li.tls-link-list--slot
a.tls-link My Link
.tls-footer-links--slot
.tls-footer-links--title
.tls-simple-text.-color-white.-weight-bold.
Tls links
.tls-footer-links--list
ul.tls-link-list
li.tls-link-list--slot
a.tls-link My Link
li.tls-link-list--slot
a.tls-link My Link
.tls-footer-links--slot
.tls-footer-links--title
.tls-simple-text.-color-white.-weight-bold.
Tls links
.tls-footer-links--list
ul.tls-link-list
li.tls-link-list--slot
a.tls-link My Link
li.tls-link-list--slot
a.tls-link My Link
.tls-footer-line
.tls-footer-content
.tls-footer--slot
a.tls-logo(href='#')
img.tls-logo--img(src='/atom/logo/logo/logo.svg')
.tls-footer--slot.tls-sm-visible
.tls-simple-text.-color-white.-size-12.
© 2019 TLScontact. Tous droits réservés.
.tls-footer--slot.tls-sm-visible
.tls-social-logo-group
.tls-social-logo-group--slot
a.tls-social-logo(href='#')
i.fab.fa-linkedin-in.tls-social-logo--icon
.tls-social-logo-group--slot
a.tls-social-logo(href='#')
i.fab.fa-linkedin-in.tls-social-logo--icon
.tls-footer--slot
a.tls-logo(href='#')
img.tls-logo--img(src='/atom/logo/logo/logo.svg')Schengen form.
<div class="tls-schengen-form">
<div class="tls-navbar">
<div class="tls-navbar--content">
<div class="tls-navbar--logo"><a class="tls-logo" href="#"><img class="tls-logo--img" src="/atom/logo/logo/logo.svg"/></a></div>
<div class="tls-navbar--links -opened">
<div class="tls-navbar--slot">
<div class="tls-dropdown"><a class="tls-link-dropdown">
<div class="tls-link-dropdown--text">Opened</div>
<div class="tls-link-dropdown--icon"><i class="fa fa-chevron-up"></i></div></a>
<div class="tls-dropdown--content">
<div class="tls-dropdown--content">
<div class="tls-dropdown-list">
<div class="tls-dropdown-list--slot"><a class="tls-dropdown-text">My dropdown text</a></div>
<div class="tls-dropdown-list--slot">
<div class="tls-dropdown-text">A longer text to see the difference</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="tls-navbar--slot">
<div class="tls-dropdown"><a class="tls-link-dropdown">
<div class="tls-link-dropdown--text">Closed</div>
<div class="tls-link-dropdown--icon"><i class="fa fa-chevron-down"></i></div></a>
<div class="tls-dropdown--content hidden">
<div class="tls-dropdown--content hidden">Hidden content.</div>
</div>
</div>
</div>
<div class="tls-navbar--slot"><a class="tls-link-uppercase">My Uppercase Link</a></div>
<div class="tls-navbar--slot"><a class="tls-button-link">Button link</a></div>
</div>
<div class="tls-navbar--language">
<div class="tls-navbar--slot"><a class="tls-link-dropdown"><img class="tls-link-dropdown--flag" src="./flag-en.png"/>
<div class="tls-link-dropdown--text">Link</div>
<div class="tls-link-dropdown--icon"><i class="fa fa-chevron-down"></i></div></a></div>
</div>
<div class="tls-navbar--hamburger">
<div class="tls-hamburger -state-closed">
<div class="tls-hamburger--top-line"></div>
<div class="tls-hamburger--middle-line"></div>
<div class="tls-hamburger--bottom-line"></div>
</div>
</div>
</div>
</div>
<header class="tls-simple-banner">
<div class="tls-home-text-group">
<div class="tls-simple-text -color-white -size-22">Simple text<img class="tls-image" src="/atom/image/image.png"/>
</div>
<h1 class="tls-heading-1">Heading level 1</h1>
</div>
</header>
<div class="tls-schengen-form-content">
<div class="tls-large-card-info">
<div class="tls-card-lg">
<div class="tls-simple-text -size-16">
<p>lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur felis magna, lacinia ornare congue ornare, pharetra a leo. Suspendisse fermentum ut mi vel pulvinar. Maecenas gravida varius mauris, sed tempus risus pulvinar sed. In varius placerat erat in porttitor. Sed mollis est ligula, sit amet iaculis nulla rhoncus sed. Morbi quis felis et quam posuere sodales eget quis est. Integer congue faucibus nunc, rhoncus hendrerit massa lobortis sit amet. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
</div>
<div class="tls-simple-text -size-16">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur felis magna, lacinia ornare congue ornare, pharetra a leo. Suspendisse fermentum ut mi vel pulvinar. Maecenas gravida varius mauris, sed tempus risus pulvinar sed. In varius placerat erat in porttitor. Sed mollis est ligula, sit amet iaculis nulla rhoncus sed. Morbi quis felis et quam posuere sodales eget quis est. Integer congue faucibus nunc, rhoncus hendrerit massa lobortis sit amet. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
</div>
</div>
<div class="tls-large-card-info--decoration">
<div class="tls-decoration-vertical-lines -blue">
<div class="tls-line1"></div>
<div class="tls-line2"></div>
</div>
</div>
</div>
<div class="tls-schengen-form-content--slot">
<div class="tls-error-info">
<div class="tls-error-info--content">
<div class="tls-simple-text -size-16">Simple Text
</div>
</div>
</div>
</div>
<div class="tls-schengen-form-content--slot">
<div class="tls-form">
<div class="tls-complex-form--slot">
<div class="tls-simple-text -color-danger -weight-bold -size-16">Simple Text with danger message</div>
</div>
<div class="tls-complex-form--slot">
<h2 class="tls-heading-2">Heading level 2</h2>
</div>
<div class="tls-form--slot">
<div class="tls-field">
<div class="tls-field--label">
<label class="tls-label">Label</label>
</div>
<div class="tls-field--area">
<input class="tls-input-text valid" type="text"/>
</div>
</div>
</div>
<div class="tls-form--slot">
<div class="tls-field">
<div class="tls-field--label">
<label class="tls-label">Label</label>
</div>
<div class="tls-field--area">
<input class="tls-input-text valid" type="text"/>
</div>
</div>
<div class="tls-simple-text -size-16">Simple Text
</div>
</div>
<div class="tls-form--slot">
<div class="tls-field">
<div class="tls-field--label">
<label class="tls-label">Label</label>
</div>
<div class="tls-field--area">
<input class="tls-input-text valid" type="text"/>
</div>
</div>
</div>
<div class="tls-form--slot">
<div class="tls-field inline">
<div class="tls-field--label-group">
<label class="tls-label">Label</label>
</div>
<div class="tls-field--area">
<div class="tls-input-check-group">
<input class="tls-input-check" id="val1" type="checkbox"/>
<label class="tls-input-check--label" for="val1">Value 1</label>
</div>
<div class="tls-input-check-group">
<input class="tls-input-check" id="val2" type="checkbox"/>
<label class="tls-input-check--label" for="val2">Value 2</label>
</div>
<div class="tls-input-check-group">
<input class="tls-input-check" id="val3" type="checkbox"/>
<label class="tls-input-check--label" for="val3">Value 3</label>
</div>
</div>
</div>
</div>
<div class="tls-form--slot">
<div class="tls-form--group-button">
<div class="tls-form-button">
<button class="tls-button-primary -small">Submit
</button>
</div>
<div class="tls-form-button">
<button class="tls-button-primary -small">Submit
</button>
</div>
</div>
</div>
<div class="tls-complex-form--slot">
<h2 class="tls-heading-2">Heading level 2</h2>
</div>
<div class="tls-form--slot">
<div class="tls-field">
<div class="tls-field--label">
<label class="tls-label">Label</label><span class="tls-mandatory-indicator tls-simple-text -color-danger -weight-bold -size-16">*</span>
</div>
<div class="tls-field--area">
<input class="tls-input-text valid" type="text"/>
</div>
</div>
</div>
<div class="tls-form--slot">
<div class="tls-form-button">
<button class="tls-button-primary -small">Submit
</button>
</div>
</div>
</div>
</div>
</div>
<div class="tls-footer">
<div class="tls-footer-links">
<div class="tls-footer-links--slot">
<div class="tls-footer-links--title">
<div class="tls-simple-text -color-white -weight-bold">Tls links
</div>
</div>
<div class="tls-footer-links--list">
<ul class="tls-link-list">
<li class="tls-link-list--slot"><a class="tls-link">My Link</a></li>
<li class="tls-link-list--slot"><a class="tls-link">My Link</a></li>
</ul>
</div>
</div>
<div class="tls-footer-links--slot">
<div class="tls-footer-links--title">
<div class="tls-simple-text -color-white -weight-bold">Tls links
</div>
</div>
<div class="tls-footer-links--list">
<ul class="tls-link-list">
<li class="tls-link-list--slot"><a class="tls-link">My Link</a></li>
<li class="tls-link-list--slot"><a class="tls-link">My Link</a></li>
</ul>
</div>
</div>
<div class="tls-footer-links--slot">
<div class="tls-footer-links--title">
<div class="tls-simple-text -color-white -weight-bold">Tls links
</div>
</div>
<div class="tls-footer-links--list">
<ul class="tls-link-list">
<li class="tls-link-list--slot"><a class="tls-link">My Link</a></li>
<li class="tls-link-list--slot"><a class="tls-link">My Link</a></li>
</ul>
</div>
</div>
<div class="tls-footer-links--slot">
<div class="tls-footer-links--title">
<div class="tls-simple-text -color-white -weight-bold">Tls links
</div>
</div>
<div class="tls-footer-links--list">
<ul class="tls-link-list">
<li class="tls-link-list--slot"><a class="tls-link">My Link</a></li>
<li class="tls-link-list--slot"><a class="tls-link">My Link</a></li>
</ul>
</div>
</div>
</div>
<div class="tls-footer-line"></div>
<div class="tls-footer-content">
<div class="tls-footer--slot"><a class="tls-logo" href="#"><img class="tls-logo--img" src="/atom/logo/logo/logo.svg"/></a></div>
<div class="tls-footer--slot tls-sm-visible">
<div class="tls-simple-text -color-white -size-12">© 2019 TLScontact. Tous droits réservés.
</div>
</div>
<div class="tls-footer--slot tls-sm-visible">
<div class="tls-social-logo-group">
<div class="tls-social-logo-group--slot"><a class="tls-social-logo" href="#"><i class="fab fa-linkedin-in tls-social-logo--icon"></i></a></div>
<div class="tls-social-logo-group--slot"><a class="tls-social-logo" href="#"><i class="fab fa-linkedin-in tls-social-logo--icon"></i></a></div>
</div>
</div>
<div class="tls-footer--slot"><a class="tls-logo" href="#"><img class="tls-logo--img" src="/atom/logo/logo/logo.svg"/></a></div>
</div>
</div>
</div>.tls-schengen-form
.tls-navbar
.tls-navbar--content
.tls-navbar--logo
a.tls-logo(href='#')
img.tls-logo--img(src='/atom/logo/logo/logo.svg')
.tls-navbar--links.-opened
.tls-navbar--slot
.tls-dropdown
a.tls-link-dropdown
.tls-link-dropdown--text Opened
.tls-link-dropdown--icon
i.fa.fa-chevron-up
.tls-dropdown--content
.tls-dropdown--content
.tls-dropdown-list
.tls-dropdown-list--slot
a.tls-dropdown-text My dropdown text
.tls-dropdown-list--slot
.tls-dropdown-text A longer text to see the difference
.tls-navbar--slot
.tls-dropdown
a.tls-link-dropdown
.tls-link-dropdown--text Closed
.tls-link-dropdown--icon
i.fa.fa-chevron-down
.tls-dropdown--content.hidden
.tls-dropdown--content.hidden Hidden content.
.tls-navbar--slot
a.tls-link-uppercase My Uppercase Link
.tls-navbar--slot
a.tls-button-link Button link
.tls-navbar--language
.tls-navbar--slot
a.tls-link-dropdown
img.tls-link-dropdown--flag(src='./flag-en.png')
.tls-link-dropdown--text Link
.tls-link-dropdown--icon
i.fa.fa-chevron-down
.tls-navbar--hamburger
.tls-hamburger.-state-closed
.tls-hamburger--top-line
.tls-hamburger--middle-line
.tls-hamburger--bottom-line
header.tls-simple-banner
.tls-home-text-group
.tls-simple-text.-color-white.-size-22
| Simple text
img.tls-image(src='/atom/image/image.png')
h1.tls-heading-1 Heading level 1
.tls-schengen-form-content
.tls-large-card-info
.tls-card-lg
.tls-simple-text.-size-16
p lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur felis magna, lacinia ornare congue ornare, pharetra a leo. Suspendisse fermentum ut mi vel pulvinar. Maecenas gravida varius mauris, sed tempus risus pulvinar sed. In varius placerat erat in porttitor. Sed mollis est ligula, sit amet iaculis nulla rhoncus sed. Morbi quis felis et quam posuere sodales eget quis est. Integer congue faucibus nunc, rhoncus hendrerit massa lobortis sit amet. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
.tls-simple-text.-size-16
p Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur felis magna, lacinia ornare congue ornare, pharetra a leo. Suspendisse fermentum ut mi vel pulvinar. Maecenas gravida varius mauris, sed tempus risus pulvinar sed. In varius placerat erat in porttitor. Sed mollis est ligula, sit amet iaculis nulla rhoncus sed. Morbi quis felis et quam posuere sodales eget quis est. Integer congue faucibus nunc, rhoncus hendrerit massa lobortis sit amet. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
.tls-large-card-info--decoration
.tls-decoration-vertical-lines.-blue
.tls-line1
.tls-line2
.tls-schengen-form-content--slot
.tls-error-info
.tls-error-info--content
.tls-simple-text.-size-16.
Simple Text
.tls-schengen-form-content--slot
.tls-form
.tls-complex-form--slot
.tls-simple-text.-color-danger.-weight-bold.-size-16 Simple Text with danger message
.tls-complex-form--slot
h2.tls-heading-2 Heading level 2
.tls-form--slot
.tls-field
.tls-field--label
label.tls-label Label
.tls-field--area
input.tls-input-text.valid(type='text')
.tls-form--slot
.tls-field
.tls-field--label
label.tls-label Label
.tls-field--area
input.tls-input-text.valid(type='text')
.tls-simple-text.-size-16.
Simple Text
.tls-form--slot
.tls-field
.tls-field--label
label.tls-label Label
.tls-field--area
input.tls-input-text.valid(type='text')
.tls-form--slot
.tls-field.inline
.tls-field--label-group
label.tls-label Label
.tls-field--area
.tls-input-check-group
input.tls-input-check#val1(type='checkbox')
label.tls-input-check--label(for='val1') Value 1
.tls-input-check-group
input.tls-input-check#val2(type='checkbox')
label.tls-input-check--label(for='val2') Value 2
.tls-input-check-group
input.tls-input-check#val3(type='checkbox')
label.tls-input-check--label(for='val3') Value 3
.tls-form--slot
.tls-form--group-button
.tls-form-button
button.tls-button-primary.-small.
Submit
.tls-form-button
button.tls-button-primary.-small.
Submit
.tls-complex-form--slot
h2.tls-heading-2 Heading level 2
.tls-form--slot
.tls-field
.tls-field--label
label.tls-label Label
span.tls-mandatory-indicator.tls-simple-text.-color-danger.-weight-bold.-size-16 *
.tls-field--area
input.tls-input-text.valid(type='text')
.tls-form--slot
.tls-form-button
button.tls-button-primary.-small.
Submit
.tls-footer
.tls-footer-links
.tls-footer-links--slot
.tls-footer-links--title
.tls-simple-text.-color-white.-weight-bold.
Tls links
.tls-footer-links--list
ul.tls-link-list
li.tls-link-list--slot
a.tls-link My Link
li.tls-link-list--slot
a.tls-link My Link
.tls-footer-links--slot
.tls-footer-links--title
.tls-simple-text.-color-white.-weight-bold.
Tls links
.tls-footer-links--list
ul.tls-link-list
li.tls-link-list--slot
a.tls-link My Link
li.tls-link-list--slot
a.tls-link My Link
.tls-footer-links--slot
.tls-footer-links--title
.tls-simple-text.-color-white.-weight-bold.
Tls links
.tls-footer-links--list
ul.tls-link-list
li.tls-link-list--slot
a.tls-link My Link
li.tls-link-list--slot
a.tls-link My Link
.tls-footer-links--slot
.tls-footer-links--title
.tls-simple-text.-color-white.-weight-bold.
Tls links
.tls-footer-links--list
ul.tls-link-list
li.tls-link-list--slot
a.tls-link My Link
li.tls-link-list--slot
a.tls-link My Link
.tls-footer-line
.tls-footer-content
.tls-footer--slot
a.tls-logo(href='#')
img.tls-logo--img(src='/atom/logo/logo/logo.svg')
.tls-footer--slot.tls-sm-visible
.tls-simple-text.-color-white.-size-12.
© 2019 TLScontact. Tous droits réservés.
.tls-footer--slot.tls-sm-visible
.tls-social-logo-group
.tls-social-logo-group--slot
a.tls-social-logo(href='#')
i.fab.fa-linkedin-in.tls-social-logo--icon
.tls-social-logo-group--slot
a.tls-social-logo(href='#')
i.fab.fa-linkedin-in.tls-social-logo--icon
.tls-footer--slot
a.tls-logo(href='#')
img.tls-logo--img(src='/atom/logo/logo/logo.svg')Security notice
<div class="tls-security-notice">
<div class="tls-navbar">
<div class="tls-navbar--content">
<div class="tls-navbar--logo"><a class="tls-logo" href="#"><img class="tls-logo--img" src="/atom/logo/logo/logo.svg"/></a></div>
<div class="tls-navbar--links -opened">
<div class="tls-navbar--slot">
<div class="tls-dropdown"><a class="tls-link-dropdown">
<div class="tls-link-dropdown--text">Opened</div>
<div class="tls-link-dropdown--icon"><i class="fa fa-chevron-up"></i></div></a>
<div class="tls-dropdown--content">
<div class="tls-dropdown--content">
<div class="tls-dropdown-list">
<div class="tls-dropdown-list--slot"><a class="tls-dropdown-text">My dropdown text</a></div>
<div class="tls-dropdown-list--slot">
<div class="tls-dropdown-text">A longer text to see the difference</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="tls-navbar--slot">
<div class="tls-dropdown"><a class="tls-link-dropdown">
<div class="tls-link-dropdown--text">Closed</div>
<div class="tls-link-dropdown--icon"><i class="fa fa-chevron-down"></i></div></a>
<div class="tls-dropdown--content hidden">
<div class="tls-dropdown--content hidden">Hidden content.</div>
</div>
</div>
</div>
<div class="tls-navbar--slot"><a class="tls-link-uppercase">My Uppercase Link</a></div>
<div class="tls-navbar--slot"><a class="tls-button-link">Button link</a></div>
</div>
<div class="tls-navbar--language">
<div class="tls-navbar--slot"><a class="tls-link-dropdown"><img class="tls-link-dropdown--flag" src="./flag-en.png"/>
<div class="tls-link-dropdown--text">Link</div>
<div class="tls-link-dropdown--icon"><i class="fa fa-chevron-down"></i></div></a></div>
</div>
<div class="tls-navbar--hamburger">
<div class="tls-hamburger -state-closed">
<div class="tls-hamburger--top-line"></div>
<div class="tls-hamburger--middle-line"></div>
<div class="tls-hamburger--bottom-line"></div>
</div>
</div>
</div>
</div>
<header class="tls-simple-banner">
<div class="tls-home-text-group">
<div class="tls-simple-text -color-white -size-22">Simple text<img class="tls-image" src="/atom/image/image.png"/>
</div>
<h1 class="tls-heading-1">Heading level 1</h1>
</div>
</header>
<div class="tls-security-notice-info">
<div class="tls-security-notice-card-info">
<div class="tls-card-lg">
<div class="tls-simple-text -size-16"><b>Simple Text</b>
</div>
</div>
<div class="tls-security-notice-card-info--decoration">
<div class="tls-decoration-vertical-lines -blue">
<div class="tls-line1"></div>
<div class="tls-line2"></div>
</div>
</div>
</div>
</div>
<div class="tls-security-notice-content">
<div class="tls-security-notice-content--area">
<div class="tls-simple-text"><p><strong>1. </strong> For security reasons, Visa Applicants are not permitted to bring any object deemed to be a security risk for the Visa Application Centre such as:</p>
<ul>
<li>Any sharp objects</li>
<li>Weapon or weapon-like objects</li>
</ul>
<p><strong>2. </strong> The use of mobile phones, cameras and other video recording devices is strictly forbidden. Visa Applicants will be asked to switch off their electronic devices at the entrance of the Visa Application Centre. It is at TLScontact’s discretion to ask the Visa Applicants to place their devices in a dedicated cabinet.</p>
<p><strong>3. </strong> Suitcases are not permitted in the Visa Application Centre. Backpacks and purses may be subject to search at the entrance of the Visa Application Centre. Anyone found carrying a dangerous item will be refused access to the centre.</p>
<p><strong>4. </strong> Only Visa Applicants, authorised representatives and authorised accompanying parties (such as those providing assistance to the mobility-impaired or those requiring translation) will be allowed access to the Visa Application Centre at the security checkpoint.</p>
</div>
</div>
</div>
<div class="tls-footer">
<div class="tls-footer-links">
<div class="tls-footer-links--slot">
<div class="tls-footer-links--title">
<div class="tls-simple-text -color-white -weight-bold">Tls links
</div>
</div>
<div class="tls-footer-links--list">
<ul class="tls-link-list">
<li class="tls-link-list--slot"><a class="tls-link">My Link</a></li>
<li class="tls-link-list--slot"><a class="tls-link">My Link</a></li>
</ul>
</div>
</div>
<div class="tls-footer-links--slot">
<div class="tls-footer-links--title">
<div class="tls-simple-text -color-white -weight-bold">Tls links
</div>
</div>
<div class="tls-footer-links--list">
<ul class="tls-link-list">
<li class="tls-link-list--slot"><a class="tls-link">My Link</a></li>
<li class="tls-link-list--slot"><a class="tls-link">My Link</a></li>
</ul>
</div>
</div>
<div class="tls-footer-links--slot">
<div class="tls-footer-links--title">
<div class="tls-simple-text -color-white -weight-bold">Tls links
</div>
</div>
<div class="tls-footer-links--list">
<ul class="tls-link-list">
<li class="tls-link-list--slot"><a class="tls-link">My Link</a></li>
<li class="tls-link-list--slot"><a class="tls-link">My Link</a></li>
</ul>
</div>
</div>
<div class="tls-footer-links--slot">
<div class="tls-footer-links--title">
<div class="tls-simple-text -color-white -weight-bold">Tls links
</div>
</div>
<div class="tls-footer-links--list">
<ul class="tls-link-list">
<li class="tls-link-list--slot"><a class="tls-link">My Link</a></li>
<li class="tls-link-list--slot"><a class="tls-link">My Link</a></li>
</ul>
</div>
</div>
</div>
<div class="tls-footer-line"></div>
<div class="tls-footer-content">
<div class="tls-footer--slot"><a class="tls-logo" href="#"><img class="tls-logo--img" src="/atom/logo/logo/logo.svg"/></a></div>
<div class="tls-footer--slot tls-sm-visible">
<div class="tls-simple-text -color-white -size-12">© 2019 TLScontact. Tous droits réservés.
</div>
</div>
<div class="tls-footer--slot tls-sm-visible">
<div class="tls-social-logo-group">
<div class="tls-social-logo-group--slot"><a class="tls-social-logo" href="#"><i class="fab fa-linkedin-in tls-social-logo--icon"></i></a></div>
<div class="tls-social-logo-group--slot"><a class="tls-social-logo" href="#"><i class="fab fa-linkedin-in tls-social-logo--icon"></i></a></div>
</div>
</div>
<div class="tls-footer--slot"><a class="tls-logo" href="#"><img class="tls-logo--img" src="/atom/logo/logo/logo.svg"/></a></div>
</div>
</div>
</div>.tls-security-notice
.tls-navbar
.tls-navbar--content
.tls-navbar--logo
a.tls-logo(href='#')
img.tls-logo--img(src='/atom/logo/logo/logo.svg')
.tls-navbar--links.-opened
.tls-navbar--slot
.tls-dropdown
a.tls-link-dropdown
.tls-link-dropdown--text Opened
.tls-link-dropdown--icon
i.fa.fa-chevron-up
.tls-dropdown--content
.tls-dropdown--content
.tls-dropdown-list
.tls-dropdown-list--slot
a.tls-dropdown-text My dropdown text
.tls-dropdown-list--slot
.tls-dropdown-text A longer text to see the difference
.tls-navbar--slot
.tls-dropdown
a.tls-link-dropdown
.tls-link-dropdown--text Closed
.tls-link-dropdown--icon
i.fa.fa-chevron-down
.tls-dropdown--content.hidden
.tls-dropdown--content.hidden Hidden content.
.tls-navbar--slot
a.tls-link-uppercase My Uppercase Link
.tls-navbar--slot
a.tls-button-link Button link
.tls-navbar--language
.tls-navbar--slot
a.tls-link-dropdown
img.tls-link-dropdown--flag(src='./flag-en.png')
.tls-link-dropdown--text Link
.tls-link-dropdown--icon
i.fa.fa-chevron-down
.tls-navbar--hamburger
.tls-hamburger.-state-closed
.tls-hamburger--top-line
.tls-hamburger--middle-line
.tls-hamburger--bottom-line
header.tls-simple-banner
.tls-home-text-group
.tls-simple-text.-color-white.-size-22
| Simple text
img.tls-image(src='/atom/image/image.png')
h1.tls-heading-1 Heading level 1
.tls-security-notice-info
.tls-security-notice-card-info
.tls-card-lg
.tls-simple-text.-size-16
b Simple Text
.tls-security-notice-card-info--decoration
.tls-decoration-vertical-lines.-blue
.tls-line1
.tls-line2
.tls-security-notice-content
.tls-security-notice-content--area
.tls-simple-text
p
strong 1.
| For security reasons, Visa Applicants are not permitted to bring any object deemed to be a security risk for the Visa Application Centre such as:
ul
li Any sharp objects
li Weapon or weapon-like objects
p
strong 2.
| The use of mobile phones, cameras and other video recording devices is strictly forbidden. Visa Applicants will be asked to switch off their electronic devices at the entrance of the Visa Application Centre. It is at TLScontact’s discretion to ask the Visa Applicants to place their devices in a dedicated cabinet.
p
strong 3.
| Suitcases are not permitted in the Visa Application Centre. Backpacks and purses may be subject to search at the entrance of the Visa Application Centre. Anyone found carrying a dangerous item will be refused access to the centre.
p
strong 4.
| Only Visa Applicants, authorised representatives and authorised accompanying parties (such as those providing assistance to the mobility-impaired or those requiring translation) will be allowed access to the Visa Application Centre at the security checkpoint.
.tls-footer
.tls-footer-links
.tls-footer-links--slot
.tls-footer-links--title
.tls-simple-text.-color-white.-weight-bold.
Tls links
.tls-footer-links--list
ul.tls-link-list
li.tls-link-list--slot
a.tls-link My Link
li.tls-link-list--slot
a.tls-link My Link
.tls-footer-links--slot
.tls-footer-links--title
.tls-simple-text.-color-white.-weight-bold.
Tls links
.tls-footer-links--list
ul.tls-link-list
li.tls-link-list--slot
a.tls-link My Link
li.tls-link-list--slot
a.tls-link My Link
.tls-footer-links--slot
.tls-footer-links--title
.tls-simple-text.-color-white.-weight-bold.
Tls links
.tls-footer-links--list
ul.tls-link-list
li.tls-link-list--slot
a.tls-link My Link
li.tls-link-list--slot
a.tls-link My Link
.tls-footer-links--slot
.tls-footer-links--title
.tls-simple-text.-color-white.-weight-bold.
Tls links
.tls-footer-links--list
ul.tls-link-list
li.tls-link-list--slot
a.tls-link My Link
li.tls-link-list--slot
a.tls-link My Link
.tls-footer-line
.tls-footer-content
.tls-footer--slot
a.tls-logo(href='#')
img.tls-logo--img(src='/atom/logo/logo/logo.svg')
.tls-footer--slot.tls-sm-visible
.tls-simple-text.-color-white.-size-12.
© 2019 TLScontact. Tous droits réservés.
.tls-footer--slot.tls-sm-visible
.tls-social-logo-group
.tls-social-logo-group--slot
a.tls-social-logo(href='#')
i.fab.fa-linkedin-in.tls-social-logo--icon
.tls-social-logo-group--slot
a.tls-social-logo(href='#')
i.fab.fa-linkedin-in.tls-social-logo--icon
.tls-footer--slot
a.tls-logo(href='#')
img.tls-logo--img(src='/atom/logo/logo/logo.svg')Static Added Value Services
<div class="tls-static-added-value-services">
<div class="tls-navbar">
<div class="tls-navbar--content">
<div class="tls-navbar--logo"><a class="tls-logo" href="#"><img class="tls-logo--img" src="/atom/logo/logo/logo.svg"/></a></div>
<div class="tls-navbar--links -opened">
<div class="tls-navbar--slot">
<div class="tls-dropdown"><a class="tls-link-dropdown">
<div class="tls-link-dropdown--text">Opened</div>
<div class="tls-link-dropdown--icon"><i class="fa fa-chevron-up"></i></div></a>
<div class="tls-dropdown--content">
<div class="tls-dropdown--content">
<div class="tls-dropdown-list">
<div class="tls-dropdown-list--slot"><a class="tls-dropdown-text">My dropdown text</a></div>
<div class="tls-dropdown-list--slot">
<div class="tls-dropdown-text">A longer text to see the difference</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="tls-navbar--slot">
<div class="tls-dropdown"><a class="tls-link-dropdown">
<div class="tls-link-dropdown--text">Closed</div>
<div class="tls-link-dropdown--icon"><i class="fa fa-chevron-down"></i></div></a>
<div class="tls-dropdown--content hidden">
<div class="tls-dropdown--content hidden">Hidden content.</div>
</div>
</div>
</div>
<div class="tls-navbar--slot"><a class="tls-link-uppercase">My Uppercase Link</a></div>
<div class="tls-navbar--slot"><a class="tls-button-link">Button link</a></div>
</div>
<div class="tls-navbar--language">
<div class="tls-navbar--slot"><a class="tls-link-dropdown"><img class="tls-link-dropdown--flag" src="./flag-en.png"/>
<div class="tls-link-dropdown--text">Link</div>
<div class="tls-link-dropdown--icon"><i class="fa fa-chevron-down"></i></div></a></div>
</div>
<div class="tls-navbar--hamburger">
<div class="tls-hamburger -state-closed">
<div class="tls-hamburger--top-line"></div>
<div class="tls-hamburger--middle-line"></div>
<div class="tls-hamburger--bottom-line"></div>
</div>
</div>
</div>
</div>
<header class="tls-simple-banner">
<div class="tls-home-text-group">
<div class="tls-simple-text -color-white -size-22">Simple text<img class="tls-image" src="/atom/image/image.png"/>
</div>
<h1 class="tls-heading-1">Heading level 1</h1>
</div>
</header>
<div class="tls-static-added-value-services-content">
<div class="tls-large-card-info">
<div class="tls-card-lg">
<div class="tls-simple-text -size-16">
<p>lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur felis magna, lacinia ornare congue ornare, pharetra a leo. Suspendisse fermentum ut mi vel pulvinar. Maecenas gravida varius mauris, sed tempus risus pulvinar sed. In varius placerat erat in porttitor. Sed mollis est ligula, sit amet iaculis nulla rhoncus sed. Morbi quis felis et quam posuere sodales eget quis est. Integer congue faucibus nunc, rhoncus hendrerit massa lobortis sit amet. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
</div>
<div class="tls-simple-text -size-16">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur felis magna, lacinia ornare congue ornare, pharetra a leo. Suspendisse fermentum ut mi vel pulvinar. Maecenas gravida varius mauris, sed tempus risus pulvinar sed. In varius placerat erat in porttitor. Sed mollis est ligula, sit amet iaculis nulla rhoncus sed. Morbi quis felis et quam posuere sodales eget quis est. Integer congue faucibus nunc, rhoncus hendrerit massa lobortis sit amet. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
</div>
</div>
<div class="tls-large-card-info--decoration">
<div class="tls-decoration-vertical-lines -blue">
<div class="tls-line1"></div>
<div class="tls-line2"></div>
</div>
</div>
</div>
<div class="tls-static-added-value-services-action">
<div class="tls-static-added-value-services-action--slot">
<h2 class="tls-heading-2">Heading level 2</h2>
</div>
<div class="tls-static-added-value-services-action--content">
<div class="tls-card-info-list">
<div class="tls-card-info-list--item">
<div class="tls-card-info">
<div class="tls-card-info--img"><img class="tls-card-info--icon" src="/molecule/card/card-info/icon-sample.svg"/></div>
<div class="tls-card-info--content">
<div class="tls-simple-text -color-main -weight-bold -size-16">Simple text
</div>
<div class="tls-simple-text -weight-bold -size-16">Simple text
</div>
<div class="tls-card-info--content-paragraph">
<div class="tls-simple-text -size-16">A very long Simple text on multiple lines
</div>
</div>
<div class="tls-card-info--content-button">
<div class="tls-button-dynamic">
<div class="tls-button-dynamic--text">
<div class="tls-simple-text -color-primary -size-19">Simple Text
</div>
</div>
<div class="tls-button-dynamic--decoration">
<div class="tls-line1"></div>
<div class="tls-line2"></div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="tls-card-info-list--item">
<div class="tls-card-info">
<div class="tls-card-info--img"><img class="tls-card-info--icon" src="/molecule/card/card-info/icon-sample.svg"/></div>
<div class="tls-card-info--content">
<div class="tls-simple-text -color-main -weight-bold -size-16">Simple text
</div>
<div class="tls-simple-text -weight-bold -size-16">Simple text
</div>
<div class="tls-card-info--content-paragraph">
<div class="tls-simple-text -size-16">A very long Simple text on multiple lines
</div>
</div>
<div class="tls-card-info--content-button">
<div class="tls-button-dynamic">
<div class="tls-button-dynamic--text">
<div class="tls-simple-text -color-primary -size-19">Simple Text
</div>
</div>
<div class="tls-button-dynamic--decoration">
<div class="tls-line1"></div>
<div class="tls-line2"></div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="tls-card-info-list--item">
<div class="tls-card-info">
<div class="tls-card-info--img"><img class="tls-card-info--icon" src="/molecule/card/card-info/icon-sample.svg"/></div>
<div class="tls-card-info--content">
<div class="tls-simple-text -color-main -weight-bold -size-16">Simple text
</div>
<div class="tls-simple-text -weight-bold -size-16">Simple text
</div>
<div class="tls-card-info--content-paragraph">
<div class="tls-simple-text -size-16">A very long Simple text on multiple lines
</div>
</div>
<div class="tls-card-info--content-button">
<div class="tls-button-dynamic">
<div class="tls-button-dynamic--text">
<div class="tls-simple-text -color-primary -size-19">Simple Text
</div>
</div>
<div class="tls-button-dynamic--decoration">
<div class="tls-line1"></div>
<div class="tls-line2"></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="tls-static-added-value-services-experience">
<div class="tls-static-added-value-services-experience--slot">
<h2 class="tls-heading-2">Heading level 2</h2>
</div>
<div class="tls-static-added-value-services-experience--content">
<div class="tls-avs-table">
<div class="tls-card-lg">
<table>
<tr>
<th class="tls-table-head">Image
</th>
<td class="tls-table-cell">Simple Text
</td>
<td class="tls-table-cell">Simple Text
</td>
</tr>
<tr>
<th class="tls-table-head">Image
</th>
<td class="tls-table-cell">Simple Text
</td>
<td class="tls-table-cell">Simple Text
</td>
</tr>
<tr>
<th class="tls-table-head">Image
</th>
<td class="tls-table-cell">Simple Text
</td>
<td class="tls-table-cell">Simple Text
</td>
</tr>
</table>
</div>
</div>
</div>
<div class="tls-static-added-value-services-experience--tips">* Service payments are charged in the equal amount in BYN / EUR set by the Embassy of Italy in Minsk.</div>
</div>
<div class="tls-static-added-value-services-other">
<div class="tls-static-added-value-services-other--slot">
<h2 class="tls-heading-2">Heading level 2</h2>
</div>
<div class="tls-static-added-value-services-other--content">
<div class="tls-avs-table">
<div class="tls-card-lg">
<table>
<tr>
<th class="tls-table-head">Image
</th>
<td class="tls-table-cell">Simple Text
</td>
<td class="tls-table-cell">Simple Text
</td>
</tr>
<tr>
<th class="tls-table-head">Image
</th>
<td class="tls-table-cell">Simple Text
</td>
<td class="tls-table-cell">Simple Text
</td>
</tr>
<tr>
<th class="tls-table-head">Image
</th>
<td class="tls-table-cell">Simple Text
</td>
<td class="tls-table-cell">Simple Text
</td>
</tr>
</table>
</div>
</div>
</div>
<div class="tls-static-added-value-services-other--tips">* Service payments are charged in the equal amount in BYN / EUR set by the Embassy of Italy in Minsk.</div>
</div>
</div>
<div class="tls-footer">
<div class="tls-footer-links">
<div class="tls-footer-links--slot">
<div class="tls-footer-links--title">
<div class="tls-simple-text -color-white -weight-bold">Tls links
</div>
</div>
<div class="tls-footer-links--list">
<ul class="tls-link-list">
<li class="tls-link-list--slot"><a class="tls-link">My Link</a></li>
<li class="tls-link-list--slot"><a class="tls-link">My Link</a></li>
</ul>
</div>
</div>
<div class="tls-footer-links--slot">
<div class="tls-footer-links--title">
<div class="tls-simple-text -color-white -weight-bold">Tls links
</div>
</div>
<div class="tls-footer-links--list">
<ul class="tls-link-list">
<li class="tls-link-list--slot"><a class="tls-link">My Link</a></li>
<li class="tls-link-list--slot"><a class="tls-link">My Link</a></li>
</ul>
</div>
</div>
<div class="tls-footer-links--slot">
<div class="tls-footer-links--title">
<div class="tls-simple-text -color-white -weight-bold">Tls links
</div>
</div>
<div class="tls-footer-links--list">
<ul class="tls-link-list">
<li class="tls-link-list--slot"><a class="tls-link">My Link</a></li>
<li class="tls-link-list--slot"><a class="tls-link">My Link</a></li>
</ul>
</div>
</div>
<div class="tls-footer-links--slot">
<div class="tls-footer-links--title">
<div class="tls-simple-text -color-white -weight-bold">Tls links
</div>
</div>
<div class="tls-footer-links--list">
<ul class="tls-link-list">
<li class="tls-link-list--slot"><a class="tls-link">My Link</a></li>
<li class="tls-link-list--slot"><a class="tls-link">My Link</a></li>
</ul>
</div>
</div>
</div>
<div class="tls-footer-line"></div>
<div class="tls-footer-content">
<div class="tls-footer--slot"><a class="tls-logo" href="#"><img class="tls-logo--img" src="/atom/logo/logo/logo.svg"/></a></div>
<div class="tls-footer--slot tls-sm-visible">
<div class="tls-simple-text -color-white -size-12">© 2019 TLScontact. Tous droits réservés.
</div>
</div>
<div class="tls-footer--slot tls-sm-visible">
<div class="tls-social-logo-group">
<div class="tls-social-logo-group--slot"><a class="tls-social-logo" href="#"><i class="fab fa-linkedin-in tls-social-logo--icon"></i></a></div>
<div class="tls-social-logo-group--slot"><a class="tls-social-logo" href="#"><i class="fab fa-linkedin-in tls-social-logo--icon"></i></a></div>
</div>
</div>
<div class="tls-footer--slot"><a class="tls-logo" href="#"><img class="tls-logo--img" src="/atom/logo/logo/logo.svg"/></a></div>
</div>
</div>
</div>.tls-static-added-value-services
.tls-navbar
.tls-navbar--content
.tls-navbar--logo
a.tls-logo(href='#')
img.tls-logo--img(src='/atom/logo/logo/logo.svg')
.tls-navbar--links.-opened
.tls-navbar--slot
.tls-dropdown
a.tls-link-dropdown
.tls-link-dropdown--text Opened
.tls-link-dropdown--icon
i.fa.fa-chevron-up
.tls-dropdown--content
.tls-dropdown--content
.tls-dropdown-list
.tls-dropdown-list--slot
a.tls-dropdown-text My dropdown text
.tls-dropdown-list--slot
.tls-dropdown-text A longer text to see the difference
.tls-navbar--slot
.tls-dropdown
a.tls-link-dropdown
.tls-link-dropdown--text Closed
.tls-link-dropdown--icon
i.fa.fa-chevron-down
.tls-dropdown--content.hidden
.tls-dropdown--content.hidden Hidden content.
.tls-navbar--slot
a.tls-link-uppercase My Uppercase Link
.tls-navbar--slot
a.tls-button-link Button link
.tls-navbar--language
.tls-navbar--slot
a.tls-link-dropdown
img.tls-link-dropdown--flag(src='./flag-en.png')
.tls-link-dropdown--text Link
.tls-link-dropdown--icon
i.fa.fa-chevron-down
.tls-navbar--hamburger
.tls-hamburger.-state-closed
.tls-hamburger--top-line
.tls-hamburger--middle-line
.tls-hamburger--bottom-line
header.tls-simple-banner
.tls-home-text-group
.tls-simple-text.-color-white.-size-22
| Simple text
img.tls-image(src='/atom/image/image.png')
h1.tls-heading-1 Heading level 1
.tls-static-added-value-services-content
.tls-large-card-info
.tls-card-lg
.tls-simple-text.-size-16
p lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur felis magna, lacinia ornare congue ornare, pharetra a leo. Suspendisse fermentum ut mi vel pulvinar. Maecenas gravida varius mauris, sed tempus risus pulvinar sed. In varius placerat erat in porttitor. Sed mollis est ligula, sit amet iaculis nulla rhoncus sed. Morbi quis felis et quam posuere sodales eget quis est. Integer congue faucibus nunc, rhoncus hendrerit massa lobortis sit amet. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
.tls-simple-text.-size-16
p Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur felis magna, lacinia ornare congue ornare, pharetra a leo. Suspendisse fermentum ut mi vel pulvinar. Maecenas gravida varius mauris, sed tempus risus pulvinar sed. In varius placerat erat in porttitor. Sed mollis est ligula, sit amet iaculis nulla rhoncus sed. Morbi quis felis et quam posuere sodales eget quis est. Integer congue faucibus nunc, rhoncus hendrerit massa lobortis sit amet. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
.tls-large-card-info--decoration
.tls-decoration-vertical-lines.-blue
.tls-line1
.tls-line2
.tls-static-added-value-services-action
.tls-static-added-value-services-action--slot
h2.tls-heading-2 Heading level 2
.tls-static-added-value-services-action--content
.tls-card-info-list
.tls-card-info-list--item
.tls-card-info
.tls-card-info--img
img.tls-card-info--icon(src='/molecule/card/card-info/icon-sample.svg')
.tls-card-info--content
.tls-simple-text.-color-main.-weight-bold.-size-16.
Simple text
.tls-simple-text.-weight-bold.-size-16.
Simple text
.tls-card-info--content-paragraph
.tls-simple-text.-size-16.
A very long Simple text on multiple lines
.tls-card-info--content-button
.tls-button-dynamic
.tls-button-dynamic--text
.tls-simple-text.-color-primary.-size-19.
Simple Text
.tls-button-dynamic--decoration
.tls-line1
.tls-line2
.tls-card-info-list--item
.tls-card-info
.tls-card-info--img
img.tls-card-info--icon(src='/molecule/card/card-info/icon-sample.svg')
.tls-card-info--content
.tls-simple-text.-color-main.-weight-bold.-size-16.
Simple text
.tls-simple-text.-weight-bold.-size-16.
Simple text
.tls-card-info--content-paragraph
.tls-simple-text.-size-16.
A very long Simple text on multiple lines
.tls-card-info--content-button
.tls-button-dynamic
.tls-button-dynamic--text
.tls-simple-text.-color-primary.-size-19.
Simple Text
.tls-button-dynamic--decoration
.tls-line1
.tls-line2
.tls-card-info-list--item
.tls-card-info
.tls-card-info--img
img.tls-card-info--icon(src='/molecule/card/card-info/icon-sample.svg')
.tls-card-info--content
.tls-simple-text.-color-main.-weight-bold.-size-16.
Simple text
.tls-simple-text.-weight-bold.-size-16.
Simple text
.tls-card-info--content-paragraph
.tls-simple-text.-size-16.
A very long Simple text on multiple lines
.tls-card-info--content-button
.tls-button-dynamic
.tls-button-dynamic--text
.tls-simple-text.-color-primary.-size-19.
Simple Text
.tls-button-dynamic--decoration
.tls-line1
.tls-line2
.tls-static-added-value-services-experience
.tls-static-added-value-services-experience--slot
h2.tls-heading-2 Heading level 2
.tls-static-added-value-services-experience--content
.tls-avs-table
.tls-card-lg
table
tbody
tr
th.tls-table-head.
Image
td.tls-table-cell.
Simple Text
td.tls-table-cell.
Simple Text
tr
th.tls-table-head.
Image
td.tls-table-cell.
Simple Text
td.tls-table-cell.
Simple Text
tr
th.tls-table-head.
Image
td.tls-table-cell.
Simple Text
td.tls-table-cell.
Simple Text
.tls-static-added-value-services-experience--tips * Service payments are charged in the equal amount in BYN / EUR set by the Embassy of Italy in Minsk.
.tls-static-added-value-services-other
.tls-static-added-value-services-other--slot
h2.tls-heading-2 Heading level 2
.tls-static-added-value-services-other--content
.tls-avs-table
.tls-card-lg
table
tbody
tr
th.tls-table-head.
Image
td.tls-table-cell.
Simple Text
td.tls-table-cell.
Simple Text
tr
th.tls-table-head.
Image
td.tls-table-cell.
Simple Text
td.tls-table-cell.
Simple Text
tr
th.tls-table-head.
Image
td.tls-table-cell.
Simple Text
td.tls-table-cell.
Simple Text
.tls-static-added-value-services-other--tips * Service payments are charged in the equal amount in BYN / EUR set by the Embassy of Italy in Minsk.
.tls-footer
.tls-footer-links
.tls-footer-links--slot
.tls-footer-links--title
.tls-simple-text.-color-white.-weight-bold.
Tls links
.tls-footer-links--list
ul.tls-link-list
li.tls-link-list--slot
a.tls-link My Link
li.tls-link-list--slot
a.tls-link My Link
.tls-footer-links--slot
.tls-footer-links--title
.tls-simple-text.-color-white.-weight-bold.
Tls links
.tls-footer-links--list
ul.tls-link-list
li.tls-link-list--slot
a.tls-link My Link
li.tls-link-list--slot
a.tls-link My Link
.tls-footer-links--slot
.tls-footer-links--title
.tls-simple-text.-color-white.-weight-bold.
Tls links
.tls-footer-links--list
ul.tls-link-list
li.tls-link-list--slot
a.tls-link My Link
li.tls-link-list--slot
a.tls-link My Link
.tls-footer-links--slot
.tls-footer-links--title
.tls-simple-text.-color-white.-weight-bold.
Tls links
.tls-footer-links--list
ul.tls-link-list
li.tls-link-list--slot
a.tls-link My Link
li.tls-link-list--slot
a.tls-link My Link
.tls-footer-line
.tls-footer-content
.tls-footer--slot
a.tls-logo(href='#')
img.tls-logo--img(src='/atom/logo/logo/logo.svg')
.tls-footer--slot.tls-sm-visible
.tls-simple-text.-color-white.-size-12.
© 2019 TLScontact. Tous droits réservés.
.tls-footer--slot.tls-sm-visible
.tls-social-logo-group
.tls-social-logo-group--slot
a.tls-social-logo(href='#')
i.fab.fa-linkedin-in.tls-social-logo--icon
.tls-social-logo-group--slot
a.tls-social-logo(href='#')
i.fab.fa-linkedin-in.tls-social-logo--icon
.tls-footer--slot
a.tls-logo(href='#')
img.tls-logo--img(src='/atom/logo/logo/logo.svg')TLS Track My Application page.
<div class="tls-track-my-application">
<div class="tls-navbar">
<div class="tls-navbar--content">
<div class="tls-navbar--logo"><a class="tls-logo" href="#"><img class="tls-logo--img" src="/atom/logo/logo/logo.svg"/></a></div>
<div class="tls-navbar--links -opened">
<div class="tls-navbar--slot">
<div class="tls-dropdown"><a class="tls-link-dropdown">
<div class="tls-link-dropdown--text">Opened</div>
<div class="tls-link-dropdown--icon"><i class="fa fa-chevron-up"></i></div></a>
<div class="tls-dropdown--content">
<div class="tls-dropdown--content">
<div class="tls-dropdown-list">
<div class="tls-dropdown-list--slot"><a class="tls-dropdown-text">My dropdown text</a></div>
<div class="tls-dropdown-list--slot">
<div class="tls-dropdown-text">A longer text to see the difference</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="tls-navbar--slot">
<div class="tls-dropdown"><a class="tls-link-dropdown">
<div class="tls-link-dropdown--text">Closed</div>
<div class="tls-link-dropdown--icon"><i class="fa fa-chevron-down"></i></div></a>
<div class="tls-dropdown--content hidden">
<div class="tls-dropdown--content hidden">Hidden content.</div>
</div>
</div>
</div>
<div class="tls-navbar--slot"><a class="tls-link-uppercase">My Uppercase Link</a></div>
<div class="tls-navbar--slot"><a class="tls-button-link">Button link</a></div>
</div>
<div class="tls-navbar--language">
<div class="tls-navbar--slot"><a class="tls-link-dropdown"><img class="tls-link-dropdown--flag" src="./flag-en.png"/>
<div class="tls-link-dropdown--text">Link</div>
<div class="tls-link-dropdown--icon"><i class="fa fa-chevron-down"></i></div></a></div>
</div>
<div class="tls-navbar--hamburger">
<div class="tls-hamburger -state-closed">
<div class="tls-hamburger--top-line"></div>
<div class="tls-hamburger--middle-line"></div>
<div class="tls-hamburger--bottom-line"></div>
</div>
</div>
</div>
</div>
<header class="tls-simple-banner">
<div class="tls-home-text-group">
<div class="tls-simple-text -color-white -size-22">Simple text<img class="tls-image" src="/atom/image/image.png"/>
</div>
<h1 class="tls-heading-1">Heading level 1</h1>
</div>
</header>
<div class="tls-track-my-application-content">
<div class="tls-large-card-info">
<div class="tls-card-lg">
<div class="tls-simple-text -size-16">
<p>lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur felis magna, lacinia ornare congue ornare, pharetra a leo. Suspendisse fermentum ut mi vel pulvinar. Maecenas gravida varius mauris, sed tempus risus pulvinar sed. In varius placerat erat in porttitor. Sed mollis est ligula, sit amet iaculis nulla rhoncus sed. Morbi quis felis et quam posuere sodales eget quis est. Integer congue faucibus nunc, rhoncus hendrerit massa lobortis sit amet. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
</div>
<div class="tls-simple-text -size-16">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur felis magna, lacinia ornare congue ornare, pharetra a leo. Suspendisse fermentum ut mi vel pulvinar. Maecenas gravida varius mauris, sed tempus risus pulvinar sed. In varius placerat erat in porttitor. Sed mollis est ligula, sit amet iaculis nulla rhoncus sed. Morbi quis felis et quam posuere sodales eget quis est. Integer congue faucibus nunc, rhoncus hendrerit massa lobortis sit amet. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
</div>
</div>
<div class="tls-large-card-info--decoration">
<div class="tls-decoration-vertical-lines -blue">
<div class="tls-line1"></div>
<div class="tls-line2"></div>
</div>
</div>
</div>
<div class="tls-track-my-application-registration">
<div class="tls-track-my-application-registration--slot">
<h2 class="tls-heading-2">Heading level 2</h2>
</div>
</div>
<div class="tls-track-my-application-selection">
<div class="tls-nav-tabs-pills">
<div class="tls-nav-tabs-pills-group">
<div class="tls-nav-tabs-pills-group--slot">
<div class="tls-pill-image -active"><img class="tls-pill-image--img" src="/molecule/pills/pill-image/work.png"/>
<div class="tls-simple-text -color-main -weight-bold -size-16">active
</div>
</div>
</div>
<div class="tls-nav-tabs-pills-group--slot">
<div class="tls-pill-image"><img class="tls-pill-image--img" src="/molecule/pills/pill-image/work.png"/>
<div class="tls-simple-text -color-main -weight-bold -size-16">Inactive
</div>
</div>
</div>
<div class="tls-nav-tabs-pills-group--slot">
<div class="tls-pill-image"><img class="tls-pill-image--img" src="/molecule/pills/pill-image/work.png"/>
<div class="tls-simple-text -color-main -weight-bold -size-16">Inactive
</div>
</div>
</div>
<div class="tls-nav-tabs-pills-group--slot">
<div class="tls-pill-image"><img class="tls-pill-image--img" src="/molecule/pills/pill-image/work.png"/>
<div class="tls-simple-text -color-main -weight-bold -size-16">Inactive
</div>
</div>
</div>
</div>
<div class="tls-nav-tabs-pills-info">
<h2 class="tls-heading-2">Tab title example</h2>
<div class="tls-simple-text -size-16">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur felis magna, lacinia ornare congue ornare, pharetra a leo. Suspendisse fermentum ut mi vel pulvinar. Maecenas gravida varius mauris, sed tempus risus pulvinar sed. In varius placerat erat in porttitor. Sed mollis est ligula, sit amet iaculis nulla rhoncus sed. Morbi quis felis et quam posuere sodales eget quis est. Integer congue faucibus nunc, rhoncus hendrerit massa lobortis sit amet. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
</div>
<div class="tls-tab-content-paragraph"><a class="tls-link">A link</a></div>
</div>
</div>
</div>
</div>
<div class="tls-footer">
<div class="tls-footer-links">
<div class="tls-footer-links--slot">
<div class="tls-footer-links--title">
<div class="tls-simple-text -color-white -weight-bold">Tls links
</div>
</div>
<div class="tls-footer-links--list">
<ul class="tls-link-list">
<li class="tls-link-list--slot"><a class="tls-link">My Link</a></li>
<li class="tls-link-list--slot"><a class="tls-link">My Link</a></li>
</ul>
</div>
</div>
<div class="tls-footer-links--slot">
<div class="tls-footer-links--title">
<div class="tls-simple-text -color-white -weight-bold">Tls links
</div>
</div>
<div class="tls-footer-links--list">
<ul class="tls-link-list">
<li class="tls-link-list--slot"><a class="tls-link">My Link</a></li>
<li class="tls-link-list--slot"><a class="tls-link">My Link</a></li>
</ul>
</div>
</div>
<div class="tls-footer-links--slot">
<div class="tls-footer-links--title">
<div class="tls-simple-text -color-white -weight-bold">Tls links
</div>
</div>
<div class="tls-footer-links--list">
<ul class="tls-link-list">
<li class="tls-link-list--slot"><a class="tls-link">My Link</a></li>
<li class="tls-link-list--slot"><a class="tls-link">My Link</a></li>
</ul>
</div>
</div>
<div class="tls-footer-links--slot">
<div class="tls-footer-links--title">
<div class="tls-simple-text -color-white -weight-bold">Tls links
</div>
</div>
<div class="tls-footer-links--list">
<ul class="tls-link-list">
<li class="tls-link-list--slot"><a class="tls-link">My Link</a></li>
<li class="tls-link-list--slot"><a class="tls-link">My Link</a></li>
</ul>
</div>
</div>
</div>
<div class="tls-footer-line"></div>
<div class="tls-footer-content">
<div class="tls-footer--slot"><a class="tls-logo" href="#"><img class="tls-logo--img" src="/atom/logo/logo/logo.svg"/></a></div>
<div class="tls-footer--slot tls-sm-visible">
<div class="tls-simple-text -color-white -size-12">© 2019 TLScontact. Tous droits réservés.
</div>
</div>
<div class="tls-footer--slot tls-sm-visible">
<div class="tls-social-logo-group">
<div class="tls-social-logo-group--slot"><a class="tls-social-logo" href="#"><i class="fab fa-linkedin-in tls-social-logo--icon"></i></a></div>
<div class="tls-social-logo-group--slot"><a class="tls-social-logo" href="#"><i class="fab fa-linkedin-in tls-social-logo--icon"></i></a></div>
</div>
</div>
<div class="tls-footer--slot"><a class="tls-logo" href="#"><img class="tls-logo--img" src="/atom/logo/logo/logo.svg"/></a></div>
</div>
</div>
</div>.tls-track-my-application
.tls-navbar
.tls-navbar--content
.tls-navbar--logo
a.tls-logo(href='#')
img.tls-logo--img(src='/atom/logo/logo/logo.svg')
.tls-navbar--links.-opened
.tls-navbar--slot
.tls-dropdown
a.tls-link-dropdown
.tls-link-dropdown--text Opened
.tls-link-dropdown--icon
i.fa.fa-chevron-up
.tls-dropdown--content
.tls-dropdown--content
.tls-dropdown-list
.tls-dropdown-list--slot
a.tls-dropdown-text My dropdown text
.tls-dropdown-list--slot
.tls-dropdown-text A longer text to see the difference
.tls-navbar--slot
.tls-dropdown
a.tls-link-dropdown
.tls-link-dropdown--text Closed
.tls-link-dropdown--icon
i.fa.fa-chevron-down
.tls-dropdown--content.hidden
.tls-dropdown--content.hidden Hidden content.
.tls-navbar--slot
a.tls-link-uppercase My Uppercase Link
.tls-navbar--slot
a.tls-button-link Button link
.tls-navbar--language
.tls-navbar--slot
a.tls-link-dropdown
img.tls-link-dropdown--flag(src='./flag-en.png')
.tls-link-dropdown--text Link
.tls-link-dropdown--icon
i.fa.fa-chevron-down
.tls-navbar--hamburger
.tls-hamburger.-state-closed
.tls-hamburger--top-line
.tls-hamburger--middle-line
.tls-hamburger--bottom-line
header.tls-simple-banner
.tls-home-text-group
.tls-simple-text.-color-white.-size-22
| Simple text
img.tls-image(src='/atom/image/image.png')
h1.tls-heading-1 Heading level 1
.tls-track-my-application-content
.tls-large-card-info
.tls-card-lg
.tls-simple-text.-size-16
p lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur felis magna, lacinia ornare congue ornare, pharetra a leo. Suspendisse fermentum ut mi vel pulvinar. Maecenas gravida varius mauris, sed tempus risus pulvinar sed. In varius placerat erat in porttitor. Sed mollis est ligula, sit amet iaculis nulla rhoncus sed. Morbi quis felis et quam posuere sodales eget quis est. Integer congue faucibus nunc, rhoncus hendrerit massa lobortis sit amet. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
.tls-simple-text.-size-16
p Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur felis magna, lacinia ornare congue ornare, pharetra a leo. Suspendisse fermentum ut mi vel pulvinar. Maecenas gravida varius mauris, sed tempus risus pulvinar sed. In varius placerat erat in porttitor. Sed mollis est ligula, sit amet iaculis nulla rhoncus sed. Morbi quis felis et quam posuere sodales eget quis est. Integer congue faucibus nunc, rhoncus hendrerit massa lobortis sit amet. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
.tls-large-card-info--decoration
.tls-decoration-vertical-lines.-blue
.tls-line1
.tls-line2
.tls-track-my-application-registration
.tls-track-my-application-registration--slot
h2.tls-heading-2 Heading level 2
.tls-track-my-application-selection
.tls-nav-tabs-pills
.tls-nav-tabs-pills-group
.tls-nav-tabs-pills-group--slot
.tls-pill-image.-active
img.tls-pill-image--img(src='/molecule/pills/pill-image/work.png')
.tls-simple-text.-color-main.-weight-bold.-size-16.
active
.tls-nav-tabs-pills-group--slot
.tls-pill-image
img.tls-pill-image--img(src='/molecule/pills/pill-image/work.png')
.tls-simple-text.-color-main.-weight-bold.-size-16.
Inactive
.tls-nav-tabs-pills-group--slot
.tls-pill-image
img.tls-pill-image--img(src='/molecule/pills/pill-image/work.png')
.tls-simple-text.-color-main.-weight-bold.-size-16.
Inactive
.tls-nav-tabs-pills-group--slot
.tls-pill-image
img.tls-pill-image--img(src='/molecule/pills/pill-image/work.png')
.tls-simple-text.-color-main.-weight-bold.-size-16.
Inactive
.tls-nav-tabs-pills-info
h2.tls-heading-2 Tab title example
.tls-simple-text.-size-16.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur felis magna, lacinia ornare congue ornare, pharetra a leo. Suspendisse fermentum ut mi vel pulvinar. Maecenas gravida varius mauris, sed tempus risus pulvinar sed. In varius placerat erat in porttitor. Sed mollis est ligula, sit amet iaculis nulla rhoncus sed. Morbi quis felis et quam posuere sodales eget quis est. Integer congue faucibus nunc, rhoncus hendrerit massa lobortis sit amet. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
.tls-tab-content-paragraph
a.tls-link A link
.tls-footer
.tls-footer-links
.tls-footer-links--slot
.tls-footer-links--title
.tls-simple-text.-color-white.-weight-bold.
Tls links
.tls-footer-links--list
ul.tls-link-list
li.tls-link-list--slot
a.tls-link My Link
li.tls-link-list--slot
a.tls-link My Link
.tls-footer-links--slot
.tls-footer-links--title
.tls-simple-text.-color-white.-weight-bold.
Tls links
.tls-footer-links--list
ul.tls-link-list
li.tls-link-list--slot
a.tls-link My Link
li.tls-link-list--slot
a.tls-link My Link
.tls-footer-links--slot
.tls-footer-links--title
.tls-simple-text.-color-white.-weight-bold.
Tls links
.tls-footer-links--list
ul.tls-link-list
li.tls-link-list--slot
a.tls-link My Link
li.tls-link-list--slot
a.tls-link My Link
.tls-footer-links--slot
.tls-footer-links--title
.tls-simple-text.-color-white.-weight-bold.
Tls links
.tls-footer-links--list
ul.tls-link-list
li.tls-link-list--slot
a.tls-link My Link
li.tls-link-list--slot
a.tls-link My Link
.tls-footer-line
.tls-footer-content
.tls-footer--slot
a.tls-logo(href='#')
img.tls-logo--img(src='/atom/logo/logo/logo.svg')
.tls-footer--slot.tls-sm-visible
.tls-simple-text.-color-white.-size-12.
© 2019 TLScontact. Tous droits réservés.
.tls-footer--slot.tls-sm-visible
.tls-social-logo-group
.tls-social-logo-group--slot
a.tls-social-logo(href='#')
i.fab.fa-linkedin-in.tls-social-logo--icon
.tls-social-logo-group--slot
a.tls-social-logo(href='#')
i.fab.fa-linkedin-in.tls-social-logo--icon
.tls-footer--slot
a.tls-logo(href='#')
img.tls-logo--img(src='/atom/logo/logo/logo.svg')TLS Travel purpose page.
<div class="tls-travel-purpose">
<div class="tls-navbar">
<div class="tls-navbar--content">
<div class="tls-navbar--logo"><a class="tls-logo" href="#"><img class="tls-logo--img" src="/atom/logo/logo/logo.svg"/></a></div>
<div class="tls-navbar--links -opened">
<div class="tls-navbar--slot">
<div class="tls-dropdown"><a class="tls-link-dropdown">
<div class="tls-link-dropdown--text">Opened</div>
<div class="tls-link-dropdown--icon"><i class="fa fa-chevron-up"></i></div></a>
<div class="tls-dropdown--content">
<div class="tls-dropdown--content">
<div class="tls-dropdown-list">
<div class="tls-dropdown-list--slot"><a class="tls-dropdown-text">My dropdown text</a></div>
<div class="tls-dropdown-list--slot">
<div class="tls-dropdown-text">A longer text to see the difference</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="tls-navbar--slot">
<div class="tls-dropdown"><a class="tls-link-dropdown">
<div class="tls-link-dropdown--text">Closed</div>
<div class="tls-link-dropdown--icon"><i class="fa fa-chevron-down"></i></div></a>
<div class="tls-dropdown--content hidden">
<div class="tls-dropdown--content hidden">Hidden content.</div>
</div>
</div>
</div>
<div class="tls-navbar--slot"><a class="tls-link-uppercase">My Uppercase Link</a></div>
<div class="tls-navbar--slot"><a class="tls-button-link">Button link</a></div>
</div>
<div class="tls-navbar--language">
<div class="tls-navbar--slot"><a class="tls-link-dropdown"><img class="tls-link-dropdown--flag" src="./flag-en.png"/>
<div class="tls-link-dropdown--text">Link</div>
<div class="tls-link-dropdown--icon"><i class="fa fa-chevron-down"></i></div></a></div>
</div>
<div class="tls-navbar--hamburger">
<div class="tls-hamburger -state-closed">
<div class="tls-hamburger--top-line"></div>
<div class="tls-hamburger--middle-line"></div>
<div class="tls-hamburger--bottom-line"></div>
</div>
</div>
</div>
</div>
<header class="tls-simple-banner">
<div class="tls-home-text-group">
<div class="tls-simple-text -color-white -size-22">Simple text<img class="tls-image" src="/atom/image/image.png"/>
</div>
<h1 class="tls-heading-1">Heading level 1</h1>
</div>
</header>
<div class="tls-travel-purpose-content">
<div class="tls-large-card-info">
<div class="tls-card-lg">
<div class="tls-simple-text -size-16">
<p>lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur felis magna, lacinia ornare congue ornare, pharetra a leo. Suspendisse fermentum ut mi vel pulvinar. Maecenas gravida varius mauris, sed tempus risus pulvinar sed. In varius placerat erat in porttitor. Sed mollis est ligula, sit amet iaculis nulla rhoncus sed. Morbi quis felis et quam posuere sodales eget quis est. Integer congue faucibus nunc, rhoncus hendrerit massa lobortis sit amet. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
</div>
<div class="tls-simple-text -size-16">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur felis magna, lacinia ornare congue ornare, pharetra a leo. Suspendisse fermentum ut mi vel pulvinar. Maecenas gravida varius mauris, sed tempus risus pulvinar sed. In varius placerat erat in porttitor. Sed mollis est ligula, sit amet iaculis nulla rhoncus sed. Morbi quis felis et quam posuere sodales eget quis est. Integer congue faucibus nunc, rhoncus hendrerit massa lobortis sit amet. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
</div>
</div>
<div class="tls-large-card-info--decoration">
<div class="tls-decoration-vertical-lines -blue">
<div class="tls-line1"></div>
<div class="tls-line2"></div>
</div>
</div>
</div>
<div class="tls-travel-purpose-registration">
<div class="tls-travel-purpose-registration--slot">
<h2 class="tls-heading-2">Heading level 2</h2>
</div>
<div class="tls-travel-purpose-registration--slot">
<button class="tls-button-primary">Button
</button>
</div>
<div class="tls-travel-purpose-registration--slot">
<div class="tls-travel-purpose-registration-text">
<div class="tls-simple-text -size-16">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur felis magna, lacinia ornare congue ornare, pharetra a leo. Suspendisse fermentum ut mi vel pulvinar. Maecenas gravida varius mauris, sed tempus risus pulvinar sed.</p>
</div>
</div>
</div>
</div>
<div class="tls-travel-purpose-subtype-selection">
<div class="tls-nav-tabs-pills">
<div class="tls-nav-tabs-pills-group">
<div class="tls-nav-tabs-pills-group--slot">
<div class="tls-pill-image -active"><img class="tls-pill-image--img" src="/molecule/pills/pill-image/work.png"/>
<div class="tls-simple-text -color-main -weight-bold -size-16">active
</div>
</div>
</div>
<div class="tls-nav-tabs-pills-group--slot">
<div class="tls-pill-image"><img class="tls-pill-image--img" src="/molecule/pills/pill-image/work.png"/>
<div class="tls-simple-text -color-main -weight-bold -size-16">Inactive
</div>
</div>
</div>
<div class="tls-nav-tabs-pills-group--slot">
<div class="tls-pill-image"><img class="tls-pill-image--img" src="/molecule/pills/pill-image/work.png"/>
<div class="tls-simple-text -color-main -weight-bold -size-16">Inactive
</div>
</div>
</div>
<div class="tls-nav-tabs-pills-group--slot">
<div class="tls-pill-image"><img class="tls-pill-image--img" src="/molecule/pills/pill-image/work.png"/>
<div class="tls-simple-text -color-main -weight-bold -size-16">Inactive
</div>
</div>
</div>
</div>
<div class="tls-nav-tabs-pills-info">
<h2 class="tls-heading-2">Tab title example</h2>
<div class="tls-simple-text -size-16">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur felis magna, lacinia ornare congue ornare, pharetra a leo. Suspendisse fermentum ut mi vel pulvinar. Maecenas gravida varius mauris, sed tempus risus pulvinar sed. In varius placerat erat in porttitor. Sed mollis est ligula, sit amet iaculis nulla rhoncus sed. Morbi quis felis et quam posuere sodales eget quis est. Integer congue faucibus nunc, rhoncus hendrerit massa lobortis sit amet. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
</div>
<div class="tls-tab-content-paragraph"><a class="tls-link">A link</a></div>
</div>
</div>
</div>
</div>
<div class="tls-footer">
<div class="tls-footer-links">
<div class="tls-footer-links--slot">
<div class="tls-footer-links--title">
<div class="tls-simple-text -color-white -weight-bold">Tls links
</div>
</div>
<div class="tls-footer-links--list">
<ul class="tls-link-list">
<li class="tls-link-list--slot"><a class="tls-link">My Link</a></li>
<li class="tls-link-list--slot"><a class="tls-link">My Link</a></li>
</ul>
</div>
</div>
<div class="tls-footer-links--slot">
<div class="tls-footer-links--title">
<div class="tls-simple-text -color-white -weight-bold">Tls links
</div>
</div>
<div class="tls-footer-links--list">
<ul class="tls-link-list">
<li class="tls-link-list--slot"><a class="tls-link">My Link</a></li>
<li class="tls-link-list--slot"><a class="tls-link">My Link</a></li>
</ul>
</div>
</div>
<div class="tls-footer-links--slot">
<div class="tls-footer-links--title">
<div class="tls-simple-text -color-white -weight-bold">Tls links
</div>
</div>
<div class="tls-footer-links--list">
<ul class="tls-link-list">
<li class="tls-link-list--slot"><a class="tls-link">My Link</a></li>
<li class="tls-link-list--slot"><a class="tls-link">My Link</a></li>
</ul>
</div>
</div>
<div class="tls-footer-links--slot">
<div class="tls-footer-links--title">
<div class="tls-simple-text -color-white -weight-bold">Tls links
</div>
</div>
<div class="tls-footer-links--list">
<ul class="tls-link-list">
<li class="tls-link-list--slot"><a class="tls-link">My Link</a></li>
<li class="tls-link-list--slot"><a class="tls-link">My Link</a></li>
</ul>
</div>
</div>
</div>
<div class="tls-footer-line"></div>
<div class="tls-footer-content">
<div class="tls-footer--slot"><a class="tls-logo" href="#"><img class="tls-logo--img" src="/atom/logo/logo/logo.svg"/></a></div>
<div class="tls-footer--slot tls-sm-visible">
<div class="tls-simple-text -color-white -size-12">© 2019 TLScontact. Tous droits réservés.
</div>
</div>
<div class="tls-footer--slot tls-sm-visible">
<div class="tls-social-logo-group">
<div class="tls-social-logo-group--slot"><a class="tls-social-logo" href="#"><i class="fab fa-linkedin-in tls-social-logo--icon"></i></a></div>
<div class="tls-social-logo-group--slot"><a class="tls-social-logo" href="#"><i class="fab fa-linkedin-in tls-social-logo--icon"></i></a></div>
</div>
</div>
<div class="tls-footer--slot"><a class="tls-logo" href="#"><img class="tls-logo--img" src="/atom/logo/logo/logo.svg"/></a></div>
</div>
</div>
</div>.tls-travel-purpose
.tls-navbar
.tls-navbar--content
.tls-navbar--logo
a.tls-logo(href='#')
img.tls-logo--img(src='/atom/logo/logo/logo.svg')
.tls-navbar--links.-opened
.tls-navbar--slot
.tls-dropdown
a.tls-link-dropdown
.tls-link-dropdown--text Opened
.tls-link-dropdown--icon
i.fa.fa-chevron-up
.tls-dropdown--content
.tls-dropdown--content
.tls-dropdown-list
.tls-dropdown-list--slot
a.tls-dropdown-text My dropdown text
.tls-dropdown-list--slot
.tls-dropdown-text A longer text to see the difference
.tls-navbar--slot
.tls-dropdown
a.tls-link-dropdown
.tls-link-dropdown--text Closed
.tls-link-dropdown--icon
i.fa.fa-chevron-down
.tls-dropdown--content.hidden
.tls-dropdown--content.hidden Hidden content.
.tls-navbar--slot
a.tls-link-uppercase My Uppercase Link
.tls-navbar--slot
a.tls-button-link Button link
.tls-navbar--language
.tls-navbar--slot
a.tls-link-dropdown
img.tls-link-dropdown--flag(src='./flag-en.png')
.tls-link-dropdown--text Link
.tls-link-dropdown--icon
i.fa.fa-chevron-down
.tls-navbar--hamburger
.tls-hamburger.-state-closed
.tls-hamburger--top-line
.tls-hamburger--middle-line
.tls-hamburger--bottom-line
header.tls-simple-banner
.tls-home-text-group
.tls-simple-text.-color-white.-size-22
| Simple text
img.tls-image(src='/atom/image/image.png')
h1.tls-heading-1 Heading level 1
.tls-travel-purpose-content
.tls-large-card-info
.tls-card-lg
.tls-simple-text.-size-16
p lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur felis magna, lacinia ornare congue ornare, pharetra a leo. Suspendisse fermentum ut mi vel pulvinar. Maecenas gravida varius mauris, sed tempus risus pulvinar sed. In varius placerat erat in porttitor. Sed mollis est ligula, sit amet iaculis nulla rhoncus sed. Morbi quis felis et quam posuere sodales eget quis est. Integer congue faucibus nunc, rhoncus hendrerit massa lobortis sit amet. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
.tls-simple-text.-size-16
p Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur felis magna, lacinia ornare congue ornare, pharetra a leo. Suspendisse fermentum ut mi vel pulvinar. Maecenas gravida varius mauris, sed tempus risus pulvinar sed. In varius placerat erat in porttitor. Sed mollis est ligula, sit amet iaculis nulla rhoncus sed. Morbi quis felis et quam posuere sodales eget quis est. Integer congue faucibus nunc, rhoncus hendrerit massa lobortis sit amet. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
.tls-large-card-info--decoration
.tls-decoration-vertical-lines.-blue
.tls-line1
.tls-line2
.tls-travel-purpose-registration
.tls-travel-purpose-registration--slot
h2.tls-heading-2 Heading level 2
.tls-travel-purpose-registration--slot
button.tls-button-primary.
Button
.tls-travel-purpose-registration--slot
.tls-travel-purpose-registration-text
.tls-simple-text.-size-16
p Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur felis magna, lacinia ornare congue ornare, pharetra a leo. Suspendisse fermentum ut mi vel pulvinar. Maecenas gravida varius mauris, sed tempus risus pulvinar sed.
.tls-travel-purpose-subtype-selection
.tls-nav-tabs-pills
.tls-nav-tabs-pills-group
.tls-nav-tabs-pills-group--slot
.tls-pill-image.-active
img.tls-pill-image--img(src='/molecule/pills/pill-image/work.png')
.tls-simple-text.-color-main.-weight-bold.-size-16.
active
.tls-nav-tabs-pills-group--slot
.tls-pill-image
img.tls-pill-image--img(src='/molecule/pills/pill-image/work.png')
.tls-simple-text.-color-main.-weight-bold.-size-16.
Inactive
.tls-nav-tabs-pills-group--slot
.tls-pill-image
img.tls-pill-image--img(src='/molecule/pills/pill-image/work.png')
.tls-simple-text.-color-main.-weight-bold.-size-16.
Inactive
.tls-nav-tabs-pills-group--slot
.tls-pill-image
img.tls-pill-image--img(src='/molecule/pills/pill-image/work.png')
.tls-simple-text.-color-main.-weight-bold.-size-16.
Inactive
.tls-nav-tabs-pills-info
h2.tls-heading-2 Tab title example
.tls-simple-text.-size-16.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur felis magna, lacinia ornare congue ornare, pharetra a leo. Suspendisse fermentum ut mi vel pulvinar. Maecenas gravida varius mauris, sed tempus risus pulvinar sed. In varius placerat erat in porttitor. Sed mollis est ligula, sit amet iaculis nulla rhoncus sed. Morbi quis felis et quam posuere sodales eget quis est. Integer congue faucibus nunc, rhoncus hendrerit massa lobortis sit amet. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
.tls-tab-content-paragraph
a.tls-link A link
.tls-footer
.tls-footer-links
.tls-footer-links--slot
.tls-footer-links--title
.tls-simple-text.-color-white.-weight-bold.
Tls links
.tls-footer-links--list
ul.tls-link-list
li.tls-link-list--slot
a.tls-link My Link
li.tls-link-list--slot
a.tls-link My Link
.tls-footer-links--slot
.tls-footer-links--title
.tls-simple-text.-color-white.-weight-bold.
Tls links
.tls-footer-links--list
ul.tls-link-list
li.tls-link-list--slot
a.tls-link My Link
li.tls-link-list--slot
a.tls-link My Link
.tls-footer-links--slot
.tls-footer-links--title
.tls-simple-text.-color-white.-weight-bold.
Tls links
.tls-footer-links--list
ul.tls-link-list
li.tls-link-list--slot
a.tls-link My Link
li.tls-link-list--slot
a.tls-link My Link
.tls-footer-links--slot
.tls-footer-links--title
.tls-simple-text.-color-white.-weight-bold.
Tls links
.tls-footer-links--list
ul.tls-link-list
li.tls-link-list--slot
a.tls-link My Link
li.tls-link-list--slot
a.tls-link My Link
.tls-footer-line
.tls-footer-content
.tls-footer--slot
a.tls-logo(href='#')
img.tls-logo--img(src='/atom/logo/logo/logo.svg')
.tls-footer--slot.tls-sm-visible
.tls-simple-text.-color-white.-size-12.
© 2019 TLScontact. Tous droits réservés.
.tls-footer--slot.tls-sm-visible
.tls-social-logo-group
.tls-social-logo-group--slot
a.tls-social-logo(href='#')
i.fab.fa-linkedin-in.tls-social-logo--icon
.tls-social-logo-group--slot
a.tls-social-logo(href='#')
i.fab.fa-linkedin-in.tls-social-logo--icon
.tls-footer--slot
a.tls-logo(href='#')
img.tls-logo--img(src='/atom/logo/logo/logo.svg')Travel Insurance
<div class="tls-travel-insurance">
<div class="tls-navbar">
<div class="tls-navbar--content">
<div class="tls-navbar--logo"><a class="tls-logo" href="#"><img class="tls-logo--img" src="/atom/logo/logo/logo.svg"/></a></div>
<div class="tls-navbar--links -opened">
<div class="tls-navbar--slot">
<div class="tls-dropdown"><a class="tls-link-dropdown">
<div class="tls-link-dropdown--text">Opened</div>
<div class="tls-link-dropdown--icon"><i class="fa fa-chevron-up"></i></div></a>
<div class="tls-dropdown--content">
<div class="tls-dropdown--content">
<div class="tls-dropdown-list">
<div class="tls-dropdown-list--slot"><a class="tls-dropdown-text">My dropdown text</a></div>
<div class="tls-dropdown-list--slot">
<div class="tls-dropdown-text">A longer text to see the difference</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="tls-navbar--slot">
<div class="tls-dropdown"><a class="tls-link-dropdown">
<div class="tls-link-dropdown--text">Closed</div>
<div class="tls-link-dropdown--icon"><i class="fa fa-chevron-down"></i></div></a>
<div class="tls-dropdown--content hidden">
<div class="tls-dropdown--content hidden">Hidden content.</div>
</div>
</div>
</div>
<div class="tls-navbar--slot"><a class="tls-link-uppercase">My Uppercase Link</a></div>
<div class="tls-navbar--slot"><a class="tls-button-link">Button link</a></div>
</div>
<div class="tls-navbar--language">
<div class="tls-navbar--slot"><a class="tls-link-dropdown"><img class="tls-link-dropdown--flag" src="./flag-en.png"/>
<div class="tls-link-dropdown--text">Link</div>
<div class="tls-link-dropdown--icon"><i class="fa fa-chevron-down"></i></div></a></div>
</div>
<div class="tls-navbar--hamburger">
<div class="tls-hamburger -state-closed">
<div class="tls-hamburger--top-line"></div>
<div class="tls-hamburger--middle-line"></div>
<div class="tls-hamburger--bottom-line"></div>
</div>
</div>
</div>
</div>
<header class="tls-simple-banner">
<div class="tls-home-text-group">
<div class="tls-simple-text -color-white -size-22">Simple text<img class="tls-image" src="/atom/image/image.png"/>
</div>
<h1 class="tls-heading-1">Heading level 1</h1>
</div>
</header>
<div class="tls-travel-insurance-content">
<div class="tls-large-card-info">
<div class="tls-card-lg">
<div class="tls-simple-text -size-16">
<p>lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur felis magna, lacinia ornare congue ornare, pharetra a leo. Suspendisse fermentum ut mi vel pulvinar. Maecenas gravida varius mauris, sed tempus risus pulvinar sed. In varius placerat erat in porttitor. Sed mollis est ligula, sit amet iaculis nulla rhoncus sed. Morbi quis felis et quam posuere sodales eget quis est. Integer congue faucibus nunc, rhoncus hendrerit massa lobortis sit amet. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
</div>
<div class="tls-simple-text -size-16">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur felis magna, lacinia ornare congue ornare, pharetra a leo. Suspendisse fermentum ut mi vel pulvinar. Maecenas gravida varius mauris, sed tempus risus pulvinar sed. In varius placerat erat in porttitor. Sed mollis est ligula, sit amet iaculis nulla rhoncus sed. Morbi quis felis et quam posuere sodales eget quis est. Integer congue faucibus nunc, rhoncus hendrerit massa lobortis sit amet. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
</div>
</div>
<div class="tls-large-card-info--decoration">
<div class="tls-decoration-vertical-lines -blue">
<div class="tls-line1"></div>
<div class="tls-line2"></div>
</div>
</div>
</div>
<div class="tls-travel-insurance-registration">
<div class="tls-travel-insurance-registration--slot">
<h2 class="tls-heading-2">Heading level 2</h2>
</div>
<div class="tls-travel-insurance-registration--slot">
<button class="tls-button-primary">Button
</button>
</div>
<div class="tls-travel-insurance-registration--slot">
<div class="tls-travel-insurance-registration-text">
<div class="tls-simple-text -size-16">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur felis magna, lacinia ornare congue ornare, pharetra a leo. Suspendisse fermentum ut mi vel pulvinar. Maecenas gravida varius mauris, sed tempus risus pulvinar sed.</p>
</div>
</div>
</div>
</div>
<div class="tls-travel-insurance-selection">
<div class="tls-nav-tabs-pills">
<div class="tls-nav-tabs-pills-group">
<div class="tls-nav-tabs-pills-group--slot">
<div class="tls-pill-image -active"><img class="tls-pill-image--img" src="/molecule/pills/pill-image/work.png"/>
<div class="tls-simple-text -color-main -weight-bold -size-16">active
</div>
</div>
</div>
<div class="tls-nav-tabs-pills-group--slot">
<div class="tls-pill-image"><img class="tls-pill-image--img" src="/molecule/pills/pill-image/work.png"/>
<div class="tls-simple-text -color-main -weight-bold -size-16">Inactive
</div>
</div>
</div>
<div class="tls-nav-tabs-pills-group--slot">
<div class="tls-pill-image"><img class="tls-pill-image--img" src="/molecule/pills/pill-image/work.png"/>
<div class="tls-simple-text -color-main -weight-bold -size-16">Inactive
</div>
</div>
</div>
<div class="tls-nav-tabs-pills-group--slot">
<div class="tls-pill-image"><img class="tls-pill-image--img" src="/molecule/pills/pill-image/work.png"/>
<div class="tls-simple-text -color-main -weight-bold -size-16">Inactive
</div>
</div>
</div>
</div>
<div class="tls-nav-tabs-pills-info">
<h2 class="tls-heading-2">Tab title example</h2>
<div class="tls-simple-text -size-16">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur felis magna, lacinia ornare congue ornare, pharetra a leo. Suspendisse fermentum ut mi vel pulvinar. Maecenas gravida varius mauris, sed tempus risus pulvinar sed. In varius placerat erat in porttitor. Sed mollis est ligula, sit amet iaculis nulla rhoncus sed. Morbi quis felis et quam posuere sodales eget quis est. Integer congue faucibus nunc, rhoncus hendrerit massa lobortis sit amet. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
</div>
<div class="tls-tab-content-paragraph"><a class="tls-link">A link</a></div>
</div>
</div>
</div>
<div class="tls-travel-insurance-registration">
<div class="tls-travel-insurance-registration--slot">
<h2 class="tls-heading-2">Heading level 2</h2>
</div>
<div class="tls-travel-insurance-registration--slot">
<button class="tls-button-primary">Button
</button>
</div>
</div>
</div>
<div class="tls-footer">
<div class="tls-footer-links">
<div class="tls-footer-links--slot">
<div class="tls-footer-links--title">
<div class="tls-simple-text -color-white -weight-bold">Tls links
</div>
</div>
<div class="tls-footer-links--list">
<ul class="tls-link-list">
<li class="tls-link-list--slot"><a class="tls-link">My Link</a></li>
<li class="tls-link-list--slot"><a class="tls-link">My Link</a></li>
</ul>
</div>
</div>
<div class="tls-footer-links--slot">
<div class="tls-footer-links--title">
<div class="tls-simple-text -color-white -weight-bold">Tls links
</div>
</div>
<div class="tls-footer-links--list">
<ul class="tls-link-list">
<li class="tls-link-list--slot"><a class="tls-link">My Link</a></li>
<li class="tls-link-list--slot"><a class="tls-link">My Link</a></li>
</ul>
</div>
</div>
<div class="tls-footer-links--slot">
<div class="tls-footer-links--title">
<div class="tls-simple-text -color-white -weight-bold">Tls links
</div>
</div>
<div class="tls-footer-links--list">
<ul class="tls-link-list">
<li class="tls-link-list--slot"><a class="tls-link">My Link</a></li>
<li class="tls-link-list--slot"><a class="tls-link">My Link</a></li>
</ul>
</div>
</div>
<div class="tls-footer-links--slot">
<div class="tls-footer-links--title">
<div class="tls-simple-text -color-white -weight-bold">Tls links
</div>
</div>
<div class="tls-footer-links--list">
<ul class="tls-link-list">
<li class="tls-link-list--slot"><a class="tls-link">My Link</a></li>
<li class="tls-link-list--slot"><a class="tls-link">My Link</a></li>
</ul>
</div>
</div>
</div>
<div class="tls-footer-line"></div>
<div class="tls-footer-content">
<div class="tls-footer--slot"><a class="tls-logo" href="#"><img class="tls-logo--img" src="/atom/logo/logo/logo.svg"/></a></div>
<div class="tls-footer--slot tls-sm-visible">
<div class="tls-simple-text -color-white -size-12">© 2019 TLScontact. Tous droits réservés.
</div>
</div>
<div class="tls-footer--slot tls-sm-visible">
<div class="tls-social-logo-group">
<div class="tls-social-logo-group--slot"><a class="tls-social-logo" href="#"><i class="fab fa-linkedin-in tls-social-logo--icon"></i></a></div>
<div class="tls-social-logo-group--slot"><a class="tls-social-logo" href="#"><i class="fab fa-linkedin-in tls-social-logo--icon"></i></a></div>
</div>
</div>
<div class="tls-footer--slot"><a class="tls-logo" href="#"><img class="tls-logo--img" src="/atom/logo/logo/logo.svg"/></a></div>
</div>
</div>
</div>.tls-travel-insurance
.tls-navbar
.tls-navbar--content
.tls-navbar--logo
a.tls-logo(href='#')
img.tls-logo--img(src='/atom/logo/logo/logo.svg')
.tls-navbar--links.-opened
.tls-navbar--slot
.tls-dropdown
a.tls-link-dropdown
.tls-link-dropdown--text Opened
.tls-link-dropdown--icon
i.fa.fa-chevron-up
.tls-dropdown--content
.tls-dropdown--content
.tls-dropdown-list
.tls-dropdown-list--slot
a.tls-dropdown-text My dropdown text
.tls-dropdown-list--slot
.tls-dropdown-text A longer text to see the difference
.tls-navbar--slot
.tls-dropdown
a.tls-link-dropdown
.tls-link-dropdown--text Closed
.tls-link-dropdown--icon
i.fa.fa-chevron-down
.tls-dropdown--content.hidden
.tls-dropdown--content.hidden Hidden content.
.tls-navbar--slot
a.tls-link-uppercase My Uppercase Link
.tls-navbar--slot
a.tls-button-link Button link
.tls-navbar--language
.tls-navbar--slot
a.tls-link-dropdown
img.tls-link-dropdown--flag(src='./flag-en.png')
.tls-link-dropdown--text Link
.tls-link-dropdown--icon
i.fa.fa-chevron-down
.tls-navbar--hamburger
.tls-hamburger.-state-closed
.tls-hamburger--top-line
.tls-hamburger--middle-line
.tls-hamburger--bottom-line
header.tls-simple-banner
.tls-home-text-group
.tls-simple-text.-color-white.-size-22
| Simple text
img.tls-image(src='/atom/image/image.png')
h1.tls-heading-1 Heading level 1
.tls-travel-insurance-content
.tls-large-card-info
.tls-card-lg
.tls-simple-text.-size-16
p lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur felis magna, lacinia ornare congue ornare, pharetra a leo. Suspendisse fermentum ut mi vel pulvinar. Maecenas gravida varius mauris, sed tempus risus pulvinar sed. In varius placerat erat in porttitor. Sed mollis est ligula, sit amet iaculis nulla rhoncus sed. Morbi quis felis et quam posuere sodales eget quis est. Integer congue faucibus nunc, rhoncus hendrerit massa lobortis sit amet. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
.tls-simple-text.-size-16
p Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur felis magna, lacinia ornare congue ornare, pharetra a leo. Suspendisse fermentum ut mi vel pulvinar. Maecenas gravida varius mauris, sed tempus risus pulvinar sed. In varius placerat erat in porttitor. Sed mollis est ligula, sit amet iaculis nulla rhoncus sed. Morbi quis felis et quam posuere sodales eget quis est. Integer congue faucibus nunc, rhoncus hendrerit massa lobortis sit amet. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
.tls-large-card-info--decoration
.tls-decoration-vertical-lines.-blue
.tls-line1
.tls-line2
.tls-travel-insurance-registration
.tls-travel-insurance-registration--slot
h2.tls-heading-2 Heading level 2
.tls-travel-insurance-registration--slot
button.tls-button-primary.
Button
.tls-travel-insurance-registration--slot
.tls-travel-insurance-registration-text
.tls-simple-text.-size-16
p Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur felis magna, lacinia ornare congue ornare, pharetra a leo. Suspendisse fermentum ut mi vel pulvinar. Maecenas gravida varius mauris, sed tempus risus pulvinar sed.
.tls-travel-insurance-selection
.tls-nav-tabs-pills
.tls-nav-tabs-pills-group
.tls-nav-tabs-pills-group--slot
.tls-pill-image.-active
img.tls-pill-image--img(src='/molecule/pills/pill-image/work.png')
.tls-simple-text.-color-main.-weight-bold.-size-16.
active
.tls-nav-tabs-pills-group--slot
.tls-pill-image
img.tls-pill-image--img(src='/molecule/pills/pill-image/work.png')
.tls-simple-text.-color-main.-weight-bold.-size-16.
Inactive
.tls-nav-tabs-pills-group--slot
.tls-pill-image
img.tls-pill-image--img(src='/molecule/pills/pill-image/work.png')
.tls-simple-text.-color-main.-weight-bold.-size-16.
Inactive
.tls-nav-tabs-pills-group--slot
.tls-pill-image
img.tls-pill-image--img(src='/molecule/pills/pill-image/work.png')
.tls-simple-text.-color-main.-weight-bold.-size-16.
Inactive
.tls-nav-tabs-pills-info
h2.tls-heading-2 Tab title example
.tls-simple-text.-size-16.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur felis magna, lacinia ornare congue ornare, pharetra a leo. Suspendisse fermentum ut mi vel pulvinar. Maecenas gravida varius mauris, sed tempus risus pulvinar sed. In varius placerat erat in porttitor. Sed mollis est ligula, sit amet iaculis nulla rhoncus sed. Morbi quis felis et quam posuere sodales eget quis est. Integer congue faucibus nunc, rhoncus hendrerit massa lobortis sit amet. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
.tls-tab-content-paragraph
a.tls-link A link
.tls-travel-insurance-registration
.tls-travel-insurance-registration--slot
h2.tls-heading-2 Heading level 2
.tls-travel-insurance-registration--slot
button.tls-button-primary.
Button
.tls-footer
.tls-footer-links
.tls-footer-links--slot
.tls-footer-links--title
.tls-simple-text.-color-white.-weight-bold.
Tls links
.tls-footer-links--list
ul.tls-link-list
li.tls-link-list--slot
a.tls-link My Link
li.tls-link-list--slot
a.tls-link My Link
.tls-footer-links--slot
.tls-footer-links--title
.tls-simple-text.-color-white.-weight-bold.
Tls links
.tls-footer-links--list
ul.tls-link-list
li.tls-link-list--slot
a.tls-link My Link
li.tls-link-list--slot
a.tls-link My Link
.tls-footer-links--slot
.tls-footer-links--title
.tls-simple-text.-color-white.-weight-bold.
Tls links
.tls-footer-links--list
ul.tls-link-list
li.tls-link-list--slot
a.tls-link My Link
li.tls-link-list--slot
a.tls-link My Link
.tls-footer-links--slot
.tls-footer-links--title
.tls-simple-text.-color-white.-weight-bold.
Tls links
.tls-footer-links--list
ul.tls-link-list
li.tls-link-list--slot
a.tls-link My Link
li.tls-link-list--slot
a.tls-link My Link
.tls-footer-line
.tls-footer-content
.tls-footer--slot
a.tls-logo(href='#')
img.tls-logo--img(src='/atom/logo/logo/logo.svg')
.tls-footer--slot.tls-sm-visible
.tls-simple-text.-color-white.-size-12.
© 2019 TLScontact. Tous droits réservés.
.tls-footer--slot.tls-sm-visible
.tls-social-logo-group
.tls-social-logo-group--slot
a.tls-social-logo(href='#')
i.fab.fa-linkedin-in.tls-social-logo--icon
.tls-social-logo-group--slot
a.tls-social-logo(href='#')
i.fab.fa-linkedin-in.tls-social-logo--icon
.tls-footer--slot
a.tls-logo(href='#')
img.tls-logo--img(src='/atom/logo/logo/logo.svg')Passback Address
<div class="tls-form-group-passback-address">
<div class="tls-navbar">
<div class="tls-navbar--content">
<div class="tls-navbar--logo"><a class="tls-logo" href="#"><img class="tls-logo--img" src="/atom/logo/logo/logo.svg"/></a></div>
<div class="tls-navbar--links -opened">
<div class="tls-navbar--slot">
<div class="tls-dropdown"><a class="tls-link-dropdown">
<div class="tls-link-dropdown--text">Opened</div>
<div class="tls-link-dropdown--icon"><i class="fa fa-chevron-up"></i></div></a>
<div class="tls-dropdown--content">
<div class="tls-dropdown--content">
<div class="tls-dropdown-list">
<div class="tls-dropdown-list--slot"><a class="tls-dropdown-text">My dropdown text</a></div>
<div class="tls-dropdown-list--slot">
<div class="tls-dropdown-text">A longer text to see the difference</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="tls-navbar--slot">
<div class="tls-dropdown"><a class="tls-link-dropdown">
<div class="tls-link-dropdown--text">Closed</div>
<div class="tls-link-dropdown--icon"><i class="fa fa-chevron-down"></i></div></a>
<div class="tls-dropdown--content hidden">
<div class="tls-dropdown--content hidden">Hidden content.</div>
</div>
</div>
</div>
<div class="tls-navbar--slot"><a class="tls-link-uppercase">My Uppercase Link</a></div>
<div class="tls-navbar--slot"><a class="tls-button-link">Button link</a></div>
</div>
<div class="tls-navbar--language">
<div class="tls-navbar--slot"><a class="tls-link-dropdown"><img class="tls-link-dropdown--flag" src="./flag-en.png"/>
<div class="tls-link-dropdown--text">Link</div>
<div class="tls-link-dropdown--icon"><i class="fa fa-chevron-down"></i></div></a></div>
</div>
<div class="tls-navbar--hamburger">
<div class="tls-hamburger -state-closed">
<div class="tls-hamburger--top-line"></div>
<div class="tls-hamburger--middle-line"></div>
<div class="tls-hamburger--bottom-line"></div>
</div>
</div>
</div>
</div>
<header class="tls-simple-banner">
<div class="tls-home-text-group">
<div class="tls-simple-text -color-white -size-22">Simple text<img class="tls-image" src="/atom/image/image.png"/>
</div>
<h1 class="tls-heading-1">Heading level 1</h1>
</div>
</header>
<div class="tls-form-group-content">
<div class="tls-large-card-info">
<div class="tls-card-lg">
<div class="tls-simple-text -size-16">
<p>lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur felis magna, lacinia ornare congue ornare, pharetra a leo. Suspendisse fermentum ut mi vel pulvinar. Maecenas gravida varius mauris, sed tempus risus pulvinar sed. In varius placerat erat in porttitor. Sed mollis est ligula, sit amet iaculis nulla rhoncus sed. Morbi quis felis et quam posuere sodales eget quis est. Integer congue faucibus nunc, rhoncus hendrerit massa lobortis sit amet. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
</div>
<div class="tls-simple-text -size-16">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur felis magna, lacinia ornare congue ornare, pharetra a leo. Suspendisse fermentum ut mi vel pulvinar. Maecenas gravida varius mauris, sed tempus risus pulvinar sed. In varius placerat erat in porttitor. Sed mollis est ligula, sit amet iaculis nulla rhoncus sed. Morbi quis felis et quam posuere sodales eget quis est. Integer congue faucibus nunc, rhoncus hendrerit massa lobortis sit amet. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
</div>
</div>
<div class="tls-large-card-info--decoration">
<div class="tls-decoration-vertical-lines -blue">
<div class="tls-line1"></div>
<div class="tls-line2"></div>
</div>
</div>
</div>
<div class="tls-form-group-info">
<div class="tls-form-group-info--content">
<div class="tls-form-group-info--title">
<h2 class="tls-heading-2">Application(s)</h2>
<div class="tls-simple-text -size-16">Here are the mandatory steps to apply for a Schengen visa
</div>
</div>
<div class="tls-status-passback-address-card-group">
<div class="tls-status-passback-address-card-group--slot">
<div class="tls-status-passback-address-card-info">
<div class="tls-status-covid-card-info--title">
<div class="tls-simple-text -color-white -size-16">Patient 1
</div>
</div>
<div class="tls-status-covid-card-info--body">
<div class="tls-status-passback-address-card-info-body--content">
<div class="tls-form">
<div class="tls-complex-form--slot">
<div class="tls-simple-text -color-danger -weight-bold -size-16">Simple Text with danger message</div>
</div>
<div class="tls-complex-form--slot">
<h2 class="tls-heading-2">Heading level 2</h2>
</div>
<div class="tls-form--slot">
<div class="tls-field">
<div class="tls-field--label">
<label class="tls-label">Label</label>
</div>
<div class="tls-field--area">
<input class="tls-input-text valid" type="text"/>
</div>
</div>
</div>
<div class="tls-form--slot">
<div class="tls-field">
<div class="tls-field--label">
<label class="tls-label">Label</label>
</div>
<div class="tls-field--area">
<input class="tls-input-text valid" type="text"/>
</div>
</div>
<div class="tls-simple-text -size-16">Simple Text
</div>
</div>
<div class="tls-form--slot">
<div class="tls-field">
<div class="tls-field--label">
<label class="tls-label">Label</label>
</div>
<div class="tls-field--area">
<input class="tls-input-text valid" type="text"/>
</div>
</div>
</div>
<div class="tls-form--slot">
<div class="tls-field inline">
<div class="tls-field--label-group">
<label class="tls-label">Label</label>
</div>
<div class="tls-field--area">
<div class="tls-input-check-group">
<input class="tls-input-check" id="val1" type="checkbox"/>
<label class="tls-input-check--label" for="val1">Value 1</label>
</div>
<div class="tls-input-check-group">
<input class="tls-input-check" id="val2" type="checkbox"/>
<label class="tls-input-check--label" for="val2">Value 2</label>
</div>
<div class="tls-input-check-group">
<input class="tls-input-check" id="val3" type="checkbox"/>
<label class="tls-input-check--label" for="val3">Value 3</label>
</div>
</div>
</div>
</div>
<div class="tls-form--slot">
<div class="tls-form--group-button">
<div class="tls-form-button">
<button class="tls-button-primary -small">Submit
</button>
</div>
<div class="tls-form-button">
<button class="tls-button-primary -small">Submit
</button>
</div>
</div>
</div>
<div class="tls-complex-form--slot">
<h2 class="tls-heading-2">Heading level 2</h2>
</div>
<div class="tls-form--slot">
<div class="tls-field">
<div class="tls-field--label">
<label class="tls-label">Label</label><span class="tls-mandatory-indicator tls-simple-text -color-danger -weight-bold -size-16">*</span>
</div>
<div class="tls-field--area">
<input class="tls-input-text valid" type="text"/>
</div>
</div>
</div>
<div class="tls-form--slot">
<div class="tls-form-button">
<button class="tls-button-primary -small">Submit
</button>
</div>
</div>
</div>
<div class="tls-form--group-button">
<div class="tls-form-button"></div>
<button class="tls-button-primary">Submit
</button>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="tls-form-group-info--new-form">
<label class="tls-label">Label</label>
</div>
<div class="tls-status-card-info--action">
<div class="tls-form--group-button">
<div class="tls-form-button"><a class="tls-button-link">Button link</a></div>
<div class="tls-form-button">
<button class="tls-button-primary -small">Submit
</button>
</div>
</div>
</div>
<div class="tls-form-group-action">
<button class="tls-button-primary -uppercase">Submit
</button>
</div>
</div>
</div>
</div>
<div class="tls-footer">
<div class="tls-footer-links">
<div class="tls-footer-links--slot">
<div class="tls-footer-links--title">
<div class="tls-simple-text -color-white -weight-bold">Tls links
</div>
</div>
<div class="tls-footer-links--list">
<ul class="tls-link-list">
<li class="tls-link-list--slot"><a class="tls-link">My Link</a></li>
<li class="tls-link-list--slot"><a class="tls-link">My Link</a></li>
</ul>
</div>
</div>
<div class="tls-footer-links--slot">
<div class="tls-footer-links--title">
<div class="tls-simple-text -color-white -weight-bold">Tls links
</div>
</div>
<div class="tls-footer-links--list">
<ul class="tls-link-list">
<li class="tls-link-list--slot"><a class="tls-link">My Link</a></li>
<li class="tls-link-list--slot"><a class="tls-link">My Link</a></li>
</ul>
</div>
</div>
<div class="tls-footer-links--slot">
<div class="tls-footer-links--title">
<div class="tls-simple-text -color-white -weight-bold">Tls links
</div>
</div>
<div class="tls-footer-links--list">
<ul class="tls-link-list">
<li class="tls-link-list--slot"><a class="tls-link">My Link</a></li>
<li class="tls-link-list--slot"><a class="tls-link">My Link</a></li>
</ul>
</div>
</div>
<div class="tls-footer-links--slot">
<div class="tls-footer-links--title">
<div class="tls-simple-text -color-white -weight-bold">Tls links
</div>
</div>
<div class="tls-footer-links--list">
<ul class="tls-link-list">
<li class="tls-link-list--slot"><a class="tls-link">My Link</a></li>
<li class="tls-link-list--slot"><a class="tls-link">My Link</a></li>
</ul>
</div>
</div>
</div>
<div class="tls-footer-line"></div>
<div class="tls-footer-content">
<div class="tls-footer--slot"><a class="tls-logo" href="#"><img class="tls-logo--img" src="/atom/logo/logo/logo.svg"/></a></div>
<div class="tls-footer--slot tls-sm-visible">
<div class="tls-simple-text -color-white -size-12">© 2019 TLScontact. Tous droits réservés.
</div>
</div>
<div class="tls-footer--slot tls-sm-visible">
<div class="tls-social-logo-group">
<div class="tls-social-logo-group--slot"><a class="tls-social-logo" href="#"><i class="fab fa-linkedin-in tls-social-logo--icon"></i></a></div>
<div class="tls-social-logo-group--slot"><a class="tls-social-logo" href="#"><i class="fab fa-linkedin-in tls-social-logo--icon"></i></a></div>
</div>
</div>
<div class="tls-footer--slot"><a class="tls-logo" href="#"><img class="tls-logo--img" src="/atom/logo/logo/logo.svg"/></a></div>
</div>
</div>
</div>.tls-form-group-passback-address
.tls-navbar
.tls-navbar--content
.tls-navbar--logo
a.tls-logo(href='#')
img.tls-logo--img(src='/atom/logo/logo/logo.svg')
.tls-navbar--links.-opened
.tls-navbar--slot
.tls-dropdown
a.tls-link-dropdown
.tls-link-dropdown--text Opened
.tls-link-dropdown--icon
i.fa.fa-chevron-up
.tls-dropdown--content
.tls-dropdown--content
.tls-dropdown-list
.tls-dropdown-list--slot
a.tls-dropdown-text My dropdown text
.tls-dropdown-list--slot
.tls-dropdown-text A longer text to see the difference
.tls-navbar--slot
.tls-dropdown
a.tls-link-dropdown
.tls-link-dropdown--text Closed
.tls-link-dropdown--icon
i.fa.fa-chevron-down
.tls-dropdown--content.hidden
.tls-dropdown--content.hidden Hidden content.
.tls-navbar--slot
a.tls-link-uppercase My Uppercase Link
.tls-navbar--slot
a.tls-button-link Button link
.tls-navbar--language
.tls-navbar--slot
a.tls-link-dropdown
img.tls-link-dropdown--flag(src='./flag-en.png')
.tls-link-dropdown--text Link
.tls-link-dropdown--icon
i.fa.fa-chevron-down
.tls-navbar--hamburger
.tls-hamburger.-state-closed
.tls-hamburger--top-line
.tls-hamburger--middle-line
.tls-hamburger--bottom-line
header.tls-simple-banner
.tls-home-text-group
.tls-simple-text.-color-white.-size-22
| Simple text
img.tls-image(src='/atom/image/image.png')
h1.tls-heading-1 Heading level 1
.tls-form-group-content
.tls-large-card-info
.tls-card-lg
.tls-simple-text.-size-16
p lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur felis magna, lacinia ornare congue ornare, pharetra a leo. Suspendisse fermentum ut mi vel pulvinar. Maecenas gravida varius mauris, sed tempus risus pulvinar sed. In varius placerat erat in porttitor. Sed mollis est ligula, sit amet iaculis nulla rhoncus sed. Morbi quis felis et quam posuere sodales eget quis est. Integer congue faucibus nunc, rhoncus hendrerit massa lobortis sit amet. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
.tls-simple-text.-size-16
p Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur felis magna, lacinia ornare congue ornare, pharetra a leo. Suspendisse fermentum ut mi vel pulvinar. Maecenas gravida varius mauris, sed tempus risus pulvinar sed. In varius placerat erat in porttitor. Sed mollis est ligula, sit amet iaculis nulla rhoncus sed. Morbi quis felis et quam posuere sodales eget quis est. Integer congue faucibus nunc, rhoncus hendrerit massa lobortis sit amet. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
.tls-large-card-info--decoration
.tls-decoration-vertical-lines.-blue
.tls-line1
.tls-line2
.tls-form-group-info
.tls-form-group-info--content
.tls-form-group-info--title
h2.tls-heading-2 Application(s)
.tls-simple-text.-size-16.
Here are the mandatory steps to apply for a Schengen visa
.tls-status-passback-address-card-group
.tls-status-passback-address-card-group--slot
.tls-status-passback-address-card-info
.tls-status-covid-card-info--title
.tls-simple-text.-color-white.-size-16.
Patient 1
.tls-status-covid-card-info--body
.tls-status-passback-address-card-info-body--content
.tls-form
.tls-complex-form--slot
.tls-simple-text.-color-danger.-weight-bold.-size-16 Simple Text with danger message
.tls-complex-form--slot
h2.tls-heading-2 Heading level 2
.tls-form--slot
.tls-field
.tls-field--label
label.tls-label Label
.tls-field--area
input.tls-input-text.valid(type='text')
.tls-form--slot
.tls-field
.tls-field--label
label.tls-label Label
.tls-field--area
input.tls-input-text.valid(type='text')
.tls-simple-text.-size-16.
Simple Text
.tls-form--slot
.tls-field
.tls-field--label
label.tls-label Label
.tls-field--area
input.tls-input-text.valid(type='text')
.tls-form--slot
.tls-field.inline
.tls-field--label-group
label.tls-label Label
.tls-field--area
.tls-input-check-group
input.tls-input-check#val1(type='checkbox')
label.tls-input-check--label(for='val1') Value 1
.tls-input-check-group
input.tls-input-check#val2(type='checkbox')
label.tls-input-check--label(for='val2') Value 2
.tls-input-check-group
input.tls-input-check#val3(type='checkbox')
label.tls-input-check--label(for='val3') Value 3
.tls-form--slot
.tls-form--group-button
.tls-form-button
button.tls-button-primary.-small.
Submit
.tls-form-button
button.tls-button-primary.-small.
Submit
.tls-complex-form--slot
h2.tls-heading-2 Heading level 2
.tls-form--slot
.tls-field
.tls-field--label
label.tls-label Label
span.tls-mandatory-indicator.tls-simple-text.-color-danger.-weight-bold.-size-16 *
.tls-field--area
input.tls-input-text.valid(type='text')
.tls-form--slot
.tls-form-button
button.tls-button-primary.-small.
Submit
.tls-form--group-button
.tls-form-button
button.tls-button-primary.
Submit
.tls-form-group-info--new-form
label.tls-label Label
.tls-status-card-info--action
.tls-form--group-button
.tls-form-button
a.tls-button-link Button link
.tls-form-button
button.tls-button-primary.-small.
Submit
.tls-form-group-action
button.tls-button-primary.-uppercase.
Submit
.tls-footer
.tls-footer-links
.tls-footer-links--slot
.tls-footer-links--title
.tls-simple-text.-color-white.-weight-bold.
Tls links
.tls-footer-links--list
ul.tls-link-list
li.tls-link-list--slot
a.tls-link My Link
li.tls-link-list--slot
a.tls-link My Link
.tls-footer-links--slot
.tls-footer-links--title
.tls-simple-text.-color-white.-weight-bold.
Tls links
.tls-footer-links--list
ul.tls-link-list
li.tls-link-list--slot
a.tls-link My Link
li.tls-link-list--slot
a.tls-link My Link
.tls-footer-links--slot
.tls-footer-links--title
.tls-simple-text.-color-white.-weight-bold.
Tls links
.tls-footer-links--list
ul.tls-link-list
li.tls-link-list--slot
a.tls-link My Link
li.tls-link-list--slot
a.tls-link My Link
.tls-footer-links--slot
.tls-footer-links--title
.tls-simple-text.-color-white.-weight-bold.
Tls links
.tls-footer-links--list
ul.tls-link-list
li.tls-link-list--slot
a.tls-link My Link
li.tls-link-list--slot
a.tls-link My Link
.tls-footer-line
.tls-footer-content
.tls-footer--slot
a.tls-logo(href='#')
img.tls-logo--img(src='/atom/logo/logo/logo.svg')
.tls-footer--slot.tls-sm-visible
.tls-simple-text.-color-white.-size-12.
© 2019 TLScontact. Tous droits réservés.
.tls-footer--slot.tls-sm-visible
.tls-social-logo-group
.tls-social-logo-group--slot
a.tls-social-logo(href='#')
i.fab.fa-linkedin-in.tls-social-logo--icon
.tls-social-logo-group--slot
a.tls-social-logo(href='#')
i.fab.fa-linkedin-in.tls-social-logo--icon
.tls-footer--slot
a.tls-logo(href='#')
img.tls-logo--img(src='/atom/logo/logo/logo.svg')Application Center selection page.
<div class="tls-personal">
<div class="tls-navbar">
<div class="tls-navbar--content">
<div class="tls-navbar--logo"><a class="tls-logo" href="#"><img class="tls-logo--img" src="/atom/logo/logo/logo.svg"/></a></div>
<div class="tls-navbar--links -opened">
<div class="tls-navbar--slot">
<div class="tls-dropdown"><a class="tls-link-dropdown">
<div class="tls-link-dropdown--text">Opened</div>
<div class="tls-link-dropdown--icon"><i class="fa fa-chevron-up"></i></div></a>
<div class="tls-dropdown--content">
<div class="tls-dropdown--content">
<div class="tls-dropdown-list">
<div class="tls-dropdown-list--slot"><a class="tls-dropdown-text">My dropdown text</a></div>
<div class="tls-dropdown-list--slot">
<div class="tls-dropdown-text">A longer text to see the difference</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="tls-navbar--slot">
<div class="tls-dropdown"><a class="tls-link-dropdown">
<div class="tls-link-dropdown--text">Closed</div>
<div class="tls-link-dropdown--icon"><i class="fa fa-chevron-down"></i></div></a>
<div class="tls-dropdown--content hidden">
<div class="tls-dropdown--content hidden">Hidden content.</div>
</div>
</div>
</div>
<div class="tls-navbar--slot"><a class="tls-link-uppercase">My Uppercase Link</a></div>
<div class="tls-navbar--slot"><a class="tls-button-link">Button link</a></div>
</div>
<div class="tls-navbar--language">
<div class="tls-navbar--slot"><a class="tls-link-dropdown"><img class="tls-link-dropdown--flag" src="./flag-en.png"/>
<div class="tls-link-dropdown--text">Link</div>
<div class="tls-link-dropdown--icon"><i class="fa fa-chevron-down"></i></div></a></div>
</div>
<div class="tls-navbar--hamburger">
<div class="tls-hamburger -state-closed">
<div class="tls-hamburger--top-line"></div>
<div class="tls-hamburger--middle-line"></div>
<div class="tls-hamburger--bottom-line"></div>
</div>
</div>
</div>
</div>
<header class="tls-simple-banner-small">
<div class="tls-home-text-group">
<div class="tls-simple-text -color-white -size-22">Simple text<img class="tls-image" src="/atom/image/image.png"/>
</div>
<h1 class="tls-heading-1">Heading level 1</h1>
</div>
</header>
<div class="tls-inquiry-form">
<div class="tls-wrapper-box">
<div class="tls-inquiry-row">
<div class="tls-status-card-info">
<div class="tls-img-title-desc">
<div class="tls-img-title-desc-heading"><img class="tls-img-title-desc-img" src="/molecule/image-title-desc/step1.png"/>
<h2 class="tls-heading-2">Heading level 2</h2>
</div>
<div class="tls-img-title-desc-desc">
<div class="tls-simple-text -size-16">Read the <a href="page.php?pid=travel_purpose" target="_blank">list of documents</a> which need to be submitted with your visa application based on your travel purpose and prepare the documents carefully. Please always choose the correct travel purpose. <ul><li>list item</li></ul>
</div>
</div>
</div>
<div class="tls-personal-list">
<ul>
<li class="tls-personal-list-title"></li>
<li class="tls-personal-list-title"></li>
<li class="tls-personal-list-title"></li>
<li class="tls-personal-list-title"></li>
</ul>
<ul>
<li class="tls-personal-list-rell"></li>
<li class="tls-personal-list-rell"></li>
<li class="tls-personal-list-rell"><img class="tls-address-icon-img" src="/molecule/address/return-to-the-centre.png"/></li>
<li class="tls-personal-list-rell">
<p class="tls-personal-list-button"></p>
</li>
</ul>
</div>
<div class="tls-simple-text -size-16">If you need to view the materials required for the visa,<a href="href">...with a link</a>
</div>
</div>
</div>
<div class="tls-inquiry-row">
<div class="tls-status-card-info">
<div class="tls-img-title-desc">
<div class="tls-img-title-desc-heading"><img class="tls-img-title-desc-img" src="/molecule/image-title-desc/step1.png"/>
<h2 class="tls-heading-2">Heading level 2</h2>
</div>
<div class="tls-img-title-desc-desc">
<div class="tls-simple-text -size-16">Read the <a href="page.php?pid=travel_purpose" target="_blank">list of documents</a> which need to be submitted with your visa application based on your travel purpose and prepare the documents carefully. Please always choose the correct travel purpose. <ul><li>list item</li></ul>
</div>
</div>
</div>
<div class="tls-personal-list">
<ul>
<li class="tls-personal-list-title"></li>
<li class="tls-personal-list-title"></li>
<li class="tls-personal-list-title"></li>
<li class="tls-personal-list-title"></li>
</ul>
<ul>
<li class="tls-personal-list-rell"></li>
<li class="tls-personal-list-rell"></li>
<li class="tls-personal-list-rell"><img class="tls-address-icon-img" src="/molecule/address/return-to-the-centre.png"/></li>
<li class="tls-personal-list-rell">
<p class="tls-personal-list-button"></p>
</li>
</ul>
</div>
</div>
</div>
<div class="tls-inquiry-row">
<div class="tls-inquiry-cell">
<div class="tls-status-card-info">
<div class="tls-img-title-desc">
<div class="tls-img-title-desc-heading"><img class="tls-img-title-desc-img" src="/molecule/image-title-desc/step1.png"/>
<h2 class="tls-heading-2">Heading level 2</h2>
</div>
<div class="tls-img-title-desc-desc">
<div class="tls-simple-text -size-16">Read the <a href="page.php?pid=travel_purpose" target="_blank">list of documents</a> which need to be submitted with your visa application based on your travel purpose and prepare the documents carefully. Please always choose the correct travel purpose. <ul><li>list item</li></ul>
</div>
</div>
</div>
<div class="tls-dropdown-text"></div>
<div class="tls-inquiry-form"></div>
<div class="tls-button-box">
<button class="tls-button-primary -uppercase">Uppercase Button</button>
</div>
</div>
<div class="tls-status-card-info tls-padding-bottom-no"></div>
<div class="tls-img-title-desc">
<div class="tls-img-title-desc-heading"><img class="tls-img-title-desc-img" src="/molecule/image-title-desc/step1.png"/>
<h2 class="tls-heading-2">Heading level 2</h2>
</div>
<div class="tls-img-title-desc-desc">
<div class="tls-simple-text -size-16">Read the <a href="page.php?pid=travel_purpose" target="_blank">list of documents</a> which need to be submitted with your visa application based on your travel purpose and prepare the documents carefully. Please always choose the correct travel purpose. <ul><li>list item</li></ul>
</div>
</div>
</div>
<div class="tls-dropdown-text"></div>
<div class="tls-simple-text -size-16">If you need to view the materials required for the visa,
<div class="tls-dropdown-text"></div>
</div>
<div class="tls-simple-text -size-16">If you need to view the materials required for the visa,<span></span><span></span>
<div class="tls-large-card-map--map"></div>
<div class="tls-google-map">
<iframe class="tls-google-map-iframe" src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3212.8176904014567!2d6.639447615032586!3d36.36519458004049!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x12f176eb4e52720f%3A0x840973aeb1fc132a!2sTLScontact%20Visa%20Application%20Center%20Constantine!5e0!3m2!1sen!2stn!4v1566901882835!5m2!1sen!2stn"></iframe>
</div>
</div>
<div class="tls-status-card-info"></div>
<div class="tls-img-title-desc">
<div class="tls-img-title-desc-heading"><img class="tls-img-title-desc-img" src="/molecule/image-title-desc/step1.png"/>
<h2 class="tls-heading-2">Heading level 2</h2>
</div>
<div class="tls-img-title-desc-desc">
<div class="tls-simple-text -size-16">Read the <a href="page.php?pid=travel_purpose" target="_blank">list of documents</a> which need to be submitted with your visa application based on your travel purpose and prepare the documents carefully. Please always choose the correct travel purpose. <ul><li>list item</li></ul>
<div class="tls-personal-list tle-label">
<div class="tle-label-row">
<div class="tls-simple-text -size-16">Receipt 03
</div><img class="tls-img-title-desc-img" src="/molecule/address/return-to-the-centre.png"/>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="tls-inquiry-cell">
<div class="tls-status-card-info">
<div class="tls-img-title-desc">
<div class="tls-img-title-desc-heading"><img class="tls-img-title-desc-img" src="/molecule/image-title-desc/step1.png"/>
<h2 class="tls-heading-2">Heading level 2</h2>
</div>
<div class="tls-img-title-desc-desc">
<div class="tls-simple-text -size-16">Read the <a href="page.php?pid=travel_purpose" target="_blank">list of documents</a> which need to be submitted with your visa application based on your travel purpose and prepare the documents carefully. Please always choose the correct travel purpose. <ul><li>list item</li></ul>
</div>
</div>
</div>
<div class="tls-dropdown-text"></div>
<div class="tls-simple-text -size-16">If you need to view the materials required for the visa,<a href="href">...with a link</a>
<button class="tls-button-primary -uppercase">Uppercase Button</button>
</div>
</div>
<div class="tls-status-card-info"></div>
<div class="tls-img-title-desc">
<div class="tls-img-title-desc-heading"><img class="tls-img-title-desc-img" src="/molecule/image-title-desc/step1.png"/>
<h2 class="tls-heading-2">Heading level 2</h2>
</div>
<div class="tls-img-title-desc-desc">
<div class="tls-simple-text -size-16">Read the <a href="page.php?pid=travel_purpose" target="_blank">list of documents</a> which need to be submitted with your visa application based on your travel purpose and prepare the documents carefully. Please always choose the correct travel purpose. <ul><li>list item</li></ul>
<div class="tls-deliverg-box">
<div class="tls-deliverg-row">
<div class="tls-deliverg-content">
<div class="tls-deliverg-title"></div>
<div class="tls-deliverg-text"></div>
</div><img class="tls-img-title-desc-img" src="/molecule/address/return-to-the-centre.png"/>
</div>
<div class="tls-deliverg-more"></div>
</div>
</div>
</div>
</div>
<div class="tls-status-card-info"></div>
<div class="tls-img-title-desc">
<div class="tls-img-title-desc-heading"><img class="tls-img-title-desc-img" src="/molecule/image-title-desc/step1.png"/>
<h2 class="tls-heading-2">Heading level 2</h2>
</div>
<div class="tls-img-title-desc-desc">
<div class="tls-simple-text -size-16">Read the <a href="page.php?pid=travel_purpose" target="_blank">list of documents</a> which need to be submitted with your visa application based on your travel purpose and prepare the documents carefully. Please always choose the correct travel purpose. <ul><li>list item</li></ul>
</div>
</div>
</div>
<div class="tle-file-wrapper"><img class="tls-img-title-desc-img" src="/molecule/address/return-to-the-centre.png"/></div>
<div class="tls-file-title"></div>
<div class="tls-file-box">
<div class="tls-file-row"><img class="tls-img-title-desc-img" src="/molecule/address/return-to-the-centre.png"/>
<div class="tls-file-content">
<div class="tls-file-content-title"></div>
<div class="tls-file-content-date"></div>
</div><img class="tls-img-title-desc-img-stop" src="/molecule/address/return-to-the-centre.png"/>
</div>
</div>
<div class="delete-all"></div>
</div>
</div>
</div>
</div>
<div class="tls-footer">
<div class="tls-footer-links">
<div class="tls-footer-links--slot">
<div class="tls-footer-links--title">
<div class="tls-simple-text -color-white -weight-bold">Tls links
</div>
</div>
<div class="tls-footer-links--list">
<ul class="tls-link-list">
<li class="tls-link-list--slot"><a class="tls-link">My Link</a></li>
<li class="tls-link-list--slot"><a class="tls-link">My Link</a></li>
</ul>
</div>
</div>
<div class="tls-footer-links--slot">
<div class="tls-footer-links--title">
<div class="tls-simple-text -color-white -weight-bold">Tls links
</div>
</div>
<div class="tls-footer-links--list">
<ul class="tls-link-list">
<li class="tls-link-list--slot"><a class="tls-link">My Link</a></li>
<li class="tls-link-list--slot"><a class="tls-link">My Link</a></li>
</ul>
</div>
</div>
<div class="tls-footer-links--slot">
<div class="tls-footer-links--title">
<div class="tls-simple-text -color-white -weight-bold">Tls links
</div>
</div>
<div class="tls-footer-links--list">
<ul class="tls-link-list">
<li class="tls-link-list--slot"><a class="tls-link">My Link</a></li>
<li class="tls-link-list--slot"><a class="tls-link">My Link</a></li>
</ul>
</div>
</div>
<div class="tls-footer-links--slot">
<div class="tls-footer-links--title">
<div class="tls-simple-text -color-white -weight-bold">Tls links
</div>
</div>
<div class="tls-footer-links--list">
<ul class="tls-link-list">
<li class="tls-link-list--slot"><a class="tls-link">My Link</a></li>
<li class="tls-link-list--slot"><a class="tls-link">My Link</a></li>
</ul>
</div>
</div>
</div>
<div class="tls-footer-line"></div>
<div class="tls-footer-content">
<div class="tls-footer--slot"><a class="tls-logo" href="#"><img class="tls-logo--img" src="/atom/logo/logo/logo.svg"/></a></div>
<div class="tls-footer--slot tls-sm-visible">
<div class="tls-simple-text -color-white -size-12">© 2019 TLScontact. Tous droits réservés.
</div>
</div>
<div class="tls-footer--slot tls-sm-visible">
<div class="tls-social-logo-group">
<div class="tls-social-logo-group--slot"><a class="tls-social-logo" href="#"><i class="fab fa-linkedin-in tls-social-logo--icon"></i></a></div>
<div class="tls-social-logo-group--slot"><a class="tls-social-logo" href="#"><i class="fab fa-linkedin-in tls-social-logo--icon"></i></a></div>
</div>
</div>
<div class="tls-footer--slot"><a class="tls-logo" href="#"><img class="tls-logo--img" src="/atom/logo/logo/logo.svg"/></a></div>
</div>
</div>
</div>.tls-personal
.tls-navbar
.tls-navbar--content
.tls-navbar--logo
a.tls-logo(href='#')
img.tls-logo--img(src='/atom/logo/logo/logo.svg')
.tls-navbar--links.-opened
.tls-navbar--slot
.tls-dropdown
a.tls-link-dropdown
.tls-link-dropdown--text Opened
.tls-link-dropdown--icon
i.fa.fa-chevron-up
.tls-dropdown--content
.tls-dropdown--content
.tls-dropdown-list
.tls-dropdown-list--slot
a.tls-dropdown-text My dropdown text
.tls-dropdown-list--slot
.tls-dropdown-text A longer text to see the difference
.tls-navbar--slot
.tls-dropdown
a.tls-link-dropdown
.tls-link-dropdown--text Closed
.tls-link-dropdown--icon
i.fa.fa-chevron-down
.tls-dropdown--content.hidden
.tls-dropdown--content.hidden Hidden content.
.tls-navbar--slot
a.tls-link-uppercase My Uppercase Link
.tls-navbar--slot
a.tls-button-link Button link
.tls-navbar--language
.tls-navbar--slot
a.tls-link-dropdown
img.tls-link-dropdown--flag(src='./flag-en.png')
.tls-link-dropdown--text Link
.tls-link-dropdown--icon
i.fa.fa-chevron-down
.tls-navbar--hamburger
.tls-hamburger.-state-closed
.tls-hamburger--top-line
.tls-hamburger--middle-line
.tls-hamburger--bottom-line
header.tls-simple-banner-small
.tls-home-text-group
.tls-simple-text.-color-white.-size-22
| Simple text
img.tls-image(src='/atom/image/image.png')
h1.tls-heading-1 Heading level 1
.tls-inquiry-form
.tls-wrapper-box
.tls-inquiry-row
.tls-status-card-info
.tls-img-title-desc
.tls-img-title-desc-heading
img.tls-img-title-desc-img(src='/molecule/image-title-desc/step1.png')
h2.tls-heading-2 Heading level 2
.tls-img-title-desc-desc
.tls-simple-text.-size-16
| Read the
a(href='page.php?pid=travel_purpose', target='_blank') list of documents
| which need to be submitted with your visa application based on your travel purpose and prepare the documents carefully. Please always choose the correct travel purpose.
ul
li list item
.tls-personal-list
ul
li.tls-personal-list-title
li.tls-personal-list-title
li.tls-personal-list-title
li.tls-personal-list-title
ul
li.tls-personal-list-rell
li.tls-personal-list-rell
li.tls-personal-list-rell
img.tls-address-icon-img(src='/molecule/address/return-to-the-centre.png')
li.tls-personal-list-rell
p.tls-personal-list-button
.tls-simple-text.-size-16
| If you need to view the materials required for the visa,
a(href='href') ...with a link
.tls-inquiry-row
.tls-status-card-info
.tls-img-title-desc
.tls-img-title-desc-heading
img.tls-img-title-desc-img(src='/molecule/image-title-desc/step1.png')
h2.tls-heading-2 Heading level 2
.tls-img-title-desc-desc
.tls-simple-text.-size-16
| Read the
a(href='page.php?pid=travel_purpose', target='_blank') list of documents
| which need to be submitted with your visa application based on your travel purpose and prepare the documents carefully. Please always choose the correct travel purpose.
ul
li list item
.tls-personal-list
ul
li.tls-personal-list-title
li.tls-personal-list-title
li.tls-personal-list-title
li.tls-personal-list-title
ul
li.tls-personal-list-rell
li.tls-personal-list-rell
li.tls-personal-list-rell
img.tls-address-icon-img(src='/molecule/address/return-to-the-centre.png')
li.tls-personal-list-rell
p.tls-personal-list-button
.tls-inquiry-row
.tls-inquiry-cell
.tls-status-card-info
.tls-img-title-desc
.tls-img-title-desc-heading
img.tls-img-title-desc-img(src='/molecule/image-title-desc/step1.png')
h2.tls-heading-2 Heading level 2
.tls-img-title-desc-desc
.tls-simple-text.-size-16
| Read the
a(href='page.php?pid=travel_purpose', target='_blank') list of documents
| which need to be submitted with your visa application based on your travel purpose and prepare the documents carefully. Please always choose the correct travel purpose.
ul
li list item
.tls-dropdown-text
.tls-inquiry-form
.tls-button-box
button.tls-button-primary.-uppercase Uppercase Button
.tls-status-card-info.tls-padding-bottom-no
.tls-img-title-desc
.tls-img-title-desc-heading
img.tls-img-title-desc-img(src='/molecule/image-title-desc/step1.png')
h2.tls-heading-2 Heading level 2
.tls-img-title-desc-desc
.tls-simple-text.-size-16
| Read the
a(href='page.php?pid=travel_purpose', target='_blank') list of documents
| which need to be submitted with your visa application based on your travel purpose and prepare the documents carefully. Please always choose the correct travel purpose.
ul
li list item
.tls-dropdown-text
.tls-simple-text.-size-16
| If you need to view the materials required for the visa,
.tls-dropdown-text
.tls-simple-text.-size-16
| If you need to view the materials required for the visa,
span
span
.tls-large-card-map--map
.tls-google-map
iframe.tls-google-map-iframe(src='https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3212.8176904014567!2d6.639447615032586!3d36.36519458004049!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x12f176eb4e52720f%3A0x840973aeb1fc132a!2sTLScontact%20Visa%20Application%20Center%20Constantine!5e0!3m2!1sen!2stn!4v1566901882835!5m2!1sen!2stn')
.tls-status-card-info
.tls-img-title-desc
.tls-img-title-desc-heading
img.tls-img-title-desc-img(src='/molecule/image-title-desc/step1.png')
h2.tls-heading-2 Heading level 2
.tls-img-title-desc-desc
.tls-simple-text.-size-16
| Read the
a(href='page.php?pid=travel_purpose', target='_blank') list of documents
| which need to be submitted with your visa application based on your travel purpose and prepare the documents carefully. Please always choose the correct travel purpose.
ul
li list item
.tls-personal-list.tle-label
.tle-label-row
.tls-simple-text.-size-16.
Receipt 03
img.tls-img-title-desc-img(src='/molecule/address/return-to-the-centre.png')
.tls-inquiry-cell
.tls-status-card-info
.tls-img-title-desc
.tls-img-title-desc-heading
img.tls-img-title-desc-img(src='/molecule/image-title-desc/step1.png')
h2.tls-heading-2 Heading level 2
.tls-img-title-desc-desc
.tls-simple-text.-size-16
| Read the
a(href='page.php?pid=travel_purpose', target='_blank') list of documents
| which need to be submitted with your visa application based on your travel purpose and prepare the documents carefully. Please always choose the correct travel purpose.
ul
li list item
.tls-dropdown-text
.tls-simple-text.-size-16
| If you need to view the materials required for the visa,
a(href='href') ...with a link
button.tls-button-primary.-uppercase Uppercase Button
.tls-status-card-info
.tls-img-title-desc
.tls-img-title-desc-heading
img.tls-img-title-desc-img(src='/molecule/image-title-desc/step1.png')
h2.tls-heading-2 Heading level 2
.tls-img-title-desc-desc
.tls-simple-text.-size-16
| Read the
a(href='page.php?pid=travel_purpose', target='_blank') list of documents
| which need to be submitted with your visa application based on your travel purpose and prepare the documents carefully. Please always choose the correct travel purpose.
ul
li list item
.tls-deliverg-box
.tls-deliverg-row
.tls-deliverg-content
.tls-deliverg-title
.tls-deliverg-text
img.tls-img-title-desc-img(src='/molecule/address/return-to-the-centre.png')
.tls-deliverg-more
.tls-status-card-info
.tls-img-title-desc
.tls-img-title-desc-heading
img.tls-img-title-desc-img(src='/molecule/image-title-desc/step1.png')
h2.tls-heading-2 Heading level 2
.tls-img-title-desc-desc
.tls-simple-text.-size-16
| Read the
a(href='page.php?pid=travel_purpose', target='_blank') list of documents
| which need to be submitted with your visa application based on your travel purpose and prepare the documents carefully. Please always choose the correct travel purpose.
ul
li list item
.tle-file-wrapper
img.tls-img-title-desc-img(src='/molecule/address/return-to-the-centre.png')
.tls-file-title
.tls-file-box
.tls-file-row
img.tls-img-title-desc-img(src='/molecule/address/return-to-the-centre.png')
.tls-file-content
.tls-file-content-title
.tls-file-content-date
img.tls-img-title-desc-img-stop(src='/molecule/address/return-to-the-centre.png')
.delete-all
.tls-footer
.tls-footer-links
.tls-footer-links--slot
.tls-footer-links--title
.tls-simple-text.-color-white.-weight-bold.
Tls links
.tls-footer-links--list
ul.tls-link-list
li.tls-link-list--slot
a.tls-link My Link
li.tls-link-list--slot
a.tls-link My Link
.tls-footer-links--slot
.tls-footer-links--title
.tls-simple-text.-color-white.-weight-bold.
Tls links
.tls-footer-links--list
ul.tls-link-list
li.tls-link-list--slot
a.tls-link My Link
li.tls-link-list--slot
a.tls-link My Link
.tls-footer-links--slot
.tls-footer-links--title
.tls-simple-text.-color-white.-weight-bold.
Tls links
.tls-footer-links--list
ul.tls-link-list
li.tls-link-list--slot
a.tls-link My Link
li.tls-link-list--slot
a.tls-link My Link
.tls-footer-links--slot
.tls-footer-links--title
.tls-simple-text.-color-white.-weight-bold.
Tls links
.tls-footer-links--list
ul.tls-link-list
li.tls-link-list--slot
a.tls-link My Link
li.tls-link-list--slot
a.tls-link My Link
.tls-footer-line
.tls-footer-content
.tls-footer--slot
a.tls-logo(href='#')
img.tls-logo--img(src='/atom/logo/logo/logo.svg')
.tls-footer--slot.tls-sm-visible
.tls-simple-text.-color-white.-size-12.
© 2019 TLScontact. Tous droits réservés.
.tls-footer--slot.tls-sm-visible
.tls-social-logo-group
.tls-social-logo-group--slot
a.tls-social-logo(href='#')
i.fab.fa-linkedin-in.tls-social-logo--icon
.tls-social-logo-group--slot
a.tls-social-logo(href='#')
i.fab.fa-linkedin-in.tls-social-logo--icon
.tls-footer--slot
a.tls-logo(href='#')
img.tls-logo--img(src='/atom/logo/logo/logo.svg')Keycloak page.
<div class="tls-keycloak">
<div class="tls-navbar">
<div class="tls-navbar--content">
<div class="tls-navbar--logo"><a class="tls-logo" href="#"><img class="tls-logo--img" src="/atom/logo/logo/logo.svg"/></a></div>
<div class="tls-navbar--links -opened">
<div class="tls-navbar--slot">
<div class="tls-dropdown"><a class="tls-link-dropdown">
<div class="tls-link-dropdown--text">Opened</div>
<div class="tls-link-dropdown--icon"><i class="fa fa-chevron-up"></i></div></a>
<div class="tls-dropdown--content">
<div class="tls-dropdown--content">
<div class="tls-dropdown-list">
<div class="tls-dropdown-list--slot"><a class="tls-dropdown-text">My dropdown text</a></div>
<div class="tls-dropdown-list--slot">
<div class="tls-dropdown-text">A longer text to see the difference</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="tls-navbar--slot">
<div class="tls-dropdown"><a class="tls-link-dropdown">
<div class="tls-link-dropdown--text">Closed</div>
<div class="tls-link-dropdown--icon"><i class="fa fa-chevron-down"></i></div></a>
<div class="tls-dropdown--content hidden">
<div class="tls-dropdown--content hidden">Hidden content.</div>
</div>
</div>
</div>
<div class="tls-navbar--slot"><a class="tls-link-uppercase">My Uppercase Link</a></div>
<div class="tls-navbar--slot"><a class="tls-button-link">Button link</a></div>
</div>
<div class="tls-navbar--language">
<div class="tls-navbar--slot"><a class="tls-link-dropdown"><img class="tls-link-dropdown--flag" src="./flag-en.png"/>
<div class="tls-link-dropdown--text">Link</div>
<div class="tls-link-dropdown--icon"><i class="fa fa-chevron-down"></i></div></a></div>
</div>
<div class="tls-navbar--hamburger">
<div class="tls-hamburger -state-closed">
<div class="tls-hamburger--top-line"></div>
<div class="tls-hamburger--middle-line"></div>
<div class="tls-hamburger--bottom-line"></div>
</div>
</div>
</div>
</div>
<header class="tls-simple-banner">
<div class="tls-home-text-group">
<div class="tls-simple-text -color-white -size-22">Simple text<img class="tls-image" src="/atom/image/image.png"/>
</div>
<h1 class="tls-heading-1">Heading level 1</h1>
</div>
</header>
<div class="tls-keycloak-content">
<div class="tls-large-card-info">
<div class="tls-card-lg">
<div class="tls-simple-text -size-16">
<p>lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur felis magna, lacinia ornare congue ornare, pharetra a leo. Suspendisse fermentum ut mi vel pulvinar. Maecenas gravida varius mauris, sed tempus risus pulvinar sed. In varius placerat erat in porttitor. Sed mollis est ligula, sit amet iaculis nulla rhoncus sed. Morbi quis felis et quam posuere sodales eget quis est. Integer congue faucibus nunc, rhoncus hendrerit massa lobortis sit amet. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
</div>
<div class="tls-simple-text -size-16">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur felis magna, lacinia ornare congue ornare, pharetra a leo. Suspendisse fermentum ut mi vel pulvinar. Maecenas gravida varius mauris, sed tempus risus pulvinar sed. In varius placerat erat in porttitor. Sed mollis est ligula, sit amet iaculis nulla rhoncus sed. Morbi quis felis et quam posuere sodales eget quis est. Integer congue faucibus nunc, rhoncus hendrerit massa lobortis sit amet. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
</div>
</div>
<div class="tls-large-card-info--decoration">
<div class="tls-decoration-vertical-lines -blue">
<div class="tls-line1"></div>
<div class="tls-line2"></div>
</div>
</div>
</div>
<div class="tls-keycloak-content--slot">
<div class="tls-error-info">
<div class="tls-error-info--content">
<div class="tls-simple-text -size-16">Simple Text
</div>
</div>
</div>
</div>
<div class="tls-keycloak-content--slot">
<div class="tls-form">
<div class="tls-complex-form--slot">
<div class="tls-simple-text -color-danger -weight-bold -size-16">Simple Text with danger message</div>
</div>
<div class="tls-complex-form--slot">
<h2 class="tls-heading-2">Heading level 2</h2>
</div>
<div class="tls-form--slot">
<div class="tls-field">
<div class="tls-field--label">
<label class="tls-label">Label</label>
</div>
<div class="tls-field--area">
<input class="tls-input-text valid" type="text"/>
</div>
</div>
</div>
<div class="tls-form--slot">
<div class="tls-field">
<div class="tls-field--label">
<label class="tls-label">Label</label>
</div>
<div class="tls-field--area">
<input class="tls-input-text valid" type="text"/>
</div>
</div>
<div class="tls-simple-text -size-16">Simple Text
</div>
</div>
<div class="tls-form--slot">
<div class="tls-field">
<div class="tls-field--label">
<label class="tls-label">Label</label>
</div>
<div class="tls-field--area">
<input class="tls-input-text valid" type="text"/>
</div>
</div>
</div>
<div class="tls-form--slot">
<div class="tls-field inline">
<div class="tls-field--label-group">
<label class="tls-label">Label</label>
</div>
<div class="tls-field--area">
<div class="tls-input-check-group">
<input class="tls-input-check" id="val1" type="checkbox"/>
<label class="tls-input-check--label" for="val1">Value 1</label>
</div>
<div class="tls-input-check-group">
<input class="tls-input-check" id="val2" type="checkbox"/>
<label class="tls-input-check--label" for="val2">Value 2</label>
</div>
<div class="tls-input-check-group">
<input class="tls-input-check" id="val3" type="checkbox"/>
<label class="tls-input-check--label" for="val3">Value 3</label>
</div>
</div>
</div>
</div>
<div class="tls-form--slot">
<div class="tls-form--group-button">
<div class="tls-form-button">
<button class="tls-button-primary -small">Submit
</button>
</div>
<div class="tls-form-button">
<button class="tls-button-primary -small">Submit
</button>
</div>
</div>
</div>
<div class="tls-complex-form--slot">
<h2 class="tls-heading-2">Heading level 2</h2>
</div>
<div class="tls-form--slot">
<div class="tls-field">
<div class="tls-field--label">
<label class="tls-label">Label</label><span class="tls-mandatory-indicator tls-simple-text -color-danger -weight-bold -size-16">*</span>
</div>
<div class="tls-field--area">
<input class="tls-input-text valid" type="text"/>
</div>
</div>
</div>
<div class="tls-form--slot">
<div class="tls-form-button">
<button class="tls-button-primary -small">Submit
</button>
</div>
</div>
</div>
</div>
</div>
<div class="tls-footer">
<div class="tls-footer-links">
<div class="tls-footer-links--slot">
<div class="tls-footer-links--title">
<div class="tls-simple-text -color-white -weight-bold">Tls links
</div>
</div>
<div class="tls-footer-links--list">
<ul class="tls-link-list">
<li class="tls-link-list--slot"><a class="tls-link">My Link</a></li>
<li class="tls-link-list--slot"><a class="tls-link">My Link</a></li>
</ul>
</div>
</div>
<div class="tls-footer-links--slot">
<div class="tls-footer-links--title">
<div class="tls-simple-text -color-white -weight-bold">Tls links
</div>
</div>
<div class="tls-footer-links--list">
<ul class="tls-link-list">
<li class="tls-link-list--slot"><a class="tls-link">My Link</a></li>
<li class="tls-link-list--slot"><a class="tls-link">My Link</a></li>
</ul>
</div>
</div>
<div class="tls-footer-links--slot">
<div class="tls-footer-links--title">
<div class="tls-simple-text -color-white -weight-bold">Tls links
</div>
</div>
<div class="tls-footer-links--list">
<ul class="tls-link-list">
<li class="tls-link-list--slot"><a class="tls-link">My Link</a></li>
<li class="tls-link-list--slot"><a class="tls-link">My Link</a></li>
</ul>
</div>
</div>
<div class="tls-footer-links--slot">
<div class="tls-footer-links--title">
<div class="tls-simple-text -color-white -weight-bold">Tls links
</div>
</div>
<div class="tls-footer-links--list">
<ul class="tls-link-list">
<li class="tls-link-list--slot"><a class="tls-link">My Link</a></li>
<li class="tls-link-list--slot"><a class="tls-link">My Link</a></li>
</ul>
</div>
</div>
</div>
<div class="tls-footer-line"></div>
<div class="tls-footer-content">
<div class="tls-footer--slot"><a class="tls-logo" href="#"><img class="tls-logo--img" src="/atom/logo/logo/logo.svg"/></a></div>
<div class="tls-footer--slot tls-sm-visible">
<div class="tls-simple-text -color-white -size-12">© 2019 TLScontact. Tous droits réservés.
</div>
</div>
<div class="tls-footer--slot tls-sm-visible">
<div class="tls-social-logo-group">
<div class="tls-social-logo-group--slot"><a class="tls-social-logo" href="#"><i class="fab fa-linkedin-in tls-social-logo--icon"></i></a></div>
<div class="tls-social-logo-group--slot"><a class="tls-social-logo" href="#"><i class="fab fa-linkedin-in tls-social-logo--icon"></i></a></div>
</div>
</div>
<div class="tls-footer--slot"><a class="tls-logo" href="#"><img class="tls-logo--img" src="/atom/logo/logo/logo.svg"/></a></div>
</div>
</div>
</div>.tls-keycloak
.tls-navbar
.tls-navbar--content
.tls-navbar--logo
a.tls-logo(href='#')
img.tls-logo--img(src='/atom/logo/logo/logo.svg')
.tls-navbar--links.-opened
.tls-navbar--slot
.tls-dropdown
a.tls-link-dropdown
.tls-link-dropdown--text Opened
.tls-link-dropdown--icon
i.fa.fa-chevron-up
.tls-dropdown--content
.tls-dropdown--content
.tls-dropdown-list
.tls-dropdown-list--slot
a.tls-dropdown-text My dropdown text
.tls-dropdown-list--slot
.tls-dropdown-text A longer text to see the difference
.tls-navbar--slot
.tls-dropdown
a.tls-link-dropdown
.tls-link-dropdown--text Closed
.tls-link-dropdown--icon
i.fa.fa-chevron-down
.tls-dropdown--content.hidden
.tls-dropdown--content.hidden Hidden content.
.tls-navbar--slot
a.tls-link-uppercase My Uppercase Link
.tls-navbar--slot
a.tls-button-link Button link
.tls-navbar--language
.tls-navbar--slot
a.tls-link-dropdown
img.tls-link-dropdown--flag(src='./flag-en.png')
.tls-link-dropdown--text Link
.tls-link-dropdown--icon
i.fa.fa-chevron-down
.tls-navbar--hamburger
.tls-hamburger.-state-closed
.tls-hamburger--top-line
.tls-hamburger--middle-line
.tls-hamburger--bottom-line
header.tls-simple-banner
.tls-home-text-group
.tls-simple-text.-color-white.-size-22
| Simple text
img.tls-image(src='/atom/image/image.png')
h1.tls-heading-1 Heading level 1
.tls-keycloak-content
.tls-large-card-info
.tls-card-lg
.tls-simple-text.-size-16
p lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur felis magna, lacinia ornare congue ornare, pharetra a leo. Suspendisse fermentum ut mi vel pulvinar. Maecenas gravida varius mauris, sed tempus risus pulvinar sed. In varius placerat erat in porttitor. Sed mollis est ligula, sit amet iaculis nulla rhoncus sed. Morbi quis felis et quam posuere sodales eget quis est. Integer congue faucibus nunc, rhoncus hendrerit massa lobortis sit amet. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
.tls-simple-text.-size-16
p Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur felis magna, lacinia ornare congue ornare, pharetra a leo. Suspendisse fermentum ut mi vel pulvinar. Maecenas gravida varius mauris, sed tempus risus pulvinar sed. In varius placerat erat in porttitor. Sed mollis est ligula, sit amet iaculis nulla rhoncus sed. Morbi quis felis et quam posuere sodales eget quis est. Integer congue faucibus nunc, rhoncus hendrerit massa lobortis sit amet. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
.tls-large-card-info--decoration
.tls-decoration-vertical-lines.-blue
.tls-line1
.tls-line2
.tls-keycloak-content--slot
.tls-error-info
.tls-error-info--content
.tls-simple-text.-size-16.
Simple Text
.tls-keycloak-content--slot
.tls-form
.tls-complex-form--slot
.tls-simple-text.-color-danger.-weight-bold.-size-16 Simple Text with danger message
.tls-complex-form--slot
h2.tls-heading-2 Heading level 2
.tls-form--slot
.tls-field
.tls-field--label
label.tls-label Label
.tls-field--area
input.tls-input-text.valid(type='text')
.tls-form--slot
.tls-field
.tls-field--label
label.tls-label Label
.tls-field--area
input.tls-input-text.valid(type='text')
.tls-simple-text.-size-16.
Simple Text
.tls-form--slot
.tls-field
.tls-field--label
label.tls-label Label
.tls-field--area
input.tls-input-text.valid(type='text')
.tls-form--slot
.tls-field.inline
.tls-field--label-group
label.tls-label Label
.tls-field--area
.tls-input-check-group
input.tls-input-check#val1(type='checkbox')
label.tls-input-check--label(for='val1') Value 1
.tls-input-check-group
input.tls-input-check#val2(type='checkbox')
label.tls-input-check--label(for='val2') Value 2
.tls-input-check-group
input.tls-input-check#val3(type='checkbox')
label.tls-input-check--label(for='val3') Value 3
.tls-form--slot
.tls-form--group-button
.tls-form-button
button.tls-button-primary.-small.
Submit
.tls-form-button
button.tls-button-primary.-small.
Submit
.tls-complex-form--slot
h2.tls-heading-2 Heading level 2
.tls-form--slot
.tls-field
.tls-field--label
label.tls-label Label
span.tls-mandatory-indicator.tls-simple-text.-color-danger.-weight-bold.-size-16 *
.tls-field--area
input.tls-input-text.valid(type='text')
.tls-form--slot
.tls-form-button
button.tls-button-primary.-small.
Submit
.tls-footer
.tls-footer-links
.tls-footer-links--slot
.tls-footer-links--title
.tls-simple-text.-color-white.-weight-bold.
Tls links
.tls-footer-links--list
ul.tls-link-list
li.tls-link-list--slot
a.tls-link My Link
li.tls-link-list--slot
a.tls-link My Link
.tls-footer-links--slot
.tls-footer-links--title
.tls-simple-text.-color-white.-weight-bold.
Tls links
.tls-footer-links--list
ul.tls-link-list
li.tls-link-list--slot
a.tls-link My Link
li.tls-link-list--slot
a.tls-link My Link
.tls-footer-links--slot
.tls-footer-links--title
.tls-simple-text.-color-white.-weight-bold.
Tls links
.tls-footer-links--list
ul.tls-link-list
li.tls-link-list--slot
a.tls-link My Link
li.tls-link-list--slot
a.tls-link My Link
.tls-footer-links--slot
.tls-footer-links--title
.tls-simple-text.-color-white.-weight-bold.
Tls links
.tls-footer-links--list
ul.tls-link-list
li.tls-link-list--slot
a.tls-link My Link
li.tls-link-list--slot
a.tls-link My Link
.tls-footer-line
.tls-footer-content
.tls-footer--slot
a.tls-logo(href='#')
img.tls-logo--img(src='/atom/logo/logo/logo.svg')
.tls-footer--slot.tls-sm-visible
.tls-simple-text.-color-white.-size-12.
© 2019 TLScontact. Tous droits réservés.
.tls-footer--slot.tls-sm-visible
.tls-social-logo-group
.tls-social-logo-group--slot
a.tls-social-logo(href='#')
i.fab.fa-linkedin-in.tls-social-logo--icon
.tls-social-logo-group--slot
a.tls-social-logo(href='#')
i.fab.fa-linkedin-in.tls-social-logo--icon
.tls-footer--slot
a.tls-logo(href='#')
img.tls-logo--img(src='/atom/logo/logo/logo.svg')Insurte
<div class="tls-static-added-value-services">
<div class="tls-navbar">
<div class="tls-navbar--content">
<div class="tls-navbar--logo"><a class="tls-logo" href="#"><img class="tls-logo--img" src="/atom/logo/logo/logo.svg"/></a></div>
<div class="tls-navbar--links -opened">
<div class="tls-navbar--slot">
<div class="tls-dropdown"><a class="tls-link-dropdown">
<div class="tls-link-dropdown--text">Opened</div>
<div class="tls-link-dropdown--icon"><i class="fa fa-chevron-up"></i></div></a>
<div class="tls-dropdown--content">
<div class="tls-dropdown--content">
<div class="tls-dropdown-list">
<div class="tls-dropdown-list--slot"><a class="tls-dropdown-text">My dropdown text</a></div>
<div class="tls-dropdown-list--slot">
<div class="tls-dropdown-text">A longer text to see the difference</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="tls-navbar--slot">
<div class="tls-dropdown"><a class="tls-link-dropdown">
<div class="tls-link-dropdown--text">Closed</div>
<div class="tls-link-dropdown--icon"><i class="fa fa-chevron-down"></i></div></a>
<div class="tls-dropdown--content hidden">
<div class="tls-dropdown--content hidden">Hidden content.</div>
</div>
</div>
</div>
<div class="tls-navbar--slot"><a class="tls-link-uppercase">My Uppercase Link</a></div>
<div class="tls-navbar--slot"><a class="tls-button-link">Button link</a></div>
</div>
<div class="tls-navbar--language">
<div class="tls-navbar--slot"><a class="tls-link-dropdown"><img class="tls-link-dropdown--flag" src="./flag-en.png"/>
<div class="tls-link-dropdown--text">Link</div>
<div class="tls-link-dropdown--icon"><i class="fa fa-chevron-down"></i></div></a></div>
</div>
<div class="tls-navbar--hamburger">
<div class="tls-hamburger -state-closed">
<div class="tls-hamburger--top-line"></div>
<div class="tls-hamburger--middle-line"></div>
<div class="tls-hamburger--bottom-line"></div>
</div>
</div>
</div>
</div>
<header class="tls-simple-banner">
<div class="tls-home-text-group">
<div class="tls-simple-text -color-white -size-22">Simple text<img class="tls-image" src="/atom/image/image.png"/>
</div>
<h1 class="tls-heading-1">Heading level 1</h1>
</div>
</header>
<div class="tls-static-added-value-services-content">
<div class="tls-large-card-info">
<div class="tls-card-lg">
<div class="tls-simple-text -size-16">
<p>lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur felis magna, lacinia ornare congue ornare, pharetra a leo. Suspendisse fermentum ut mi vel pulvinar. Maecenas gravida varius mauris, sed tempus risus pulvinar sed. In varius placerat erat in porttitor. Sed mollis est ligula, sit amet iaculis nulla rhoncus sed. Morbi quis felis et quam posuere sodales eget quis est. Integer congue faucibus nunc, rhoncus hendrerit massa lobortis sit amet. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
</div>
<div class="tls-simple-text -size-16">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur felis magna, lacinia ornare congue ornare, pharetra a leo. Suspendisse fermentum ut mi vel pulvinar. Maecenas gravida varius mauris, sed tempus risus pulvinar sed. In varius placerat erat in porttitor. Sed mollis est ligula, sit amet iaculis nulla rhoncus sed. Morbi quis felis et quam posuere sodales eget quis est. Integer congue faucibus nunc, rhoncus hendrerit massa lobortis sit amet. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
</div>
</div>
<div class="tls-large-card-info--decoration">
<div class="tls-decoration-vertical-lines -blue">
<div class="tls-line1"></div>
<div class="tls-line2"></div>
</div>
</div>
</div>
<div class="tls-static-added-value-services-action">
<div class="tls-static-added-value-services-action--slot">
<h2 class="tls-heading-2">Heading level 2</h2>
</div>
<div class="tls-static-added-value-services-action--content">
<div class="tls-card-info-list">
<div class="tls-card-info-list--item">
<div class="tls-card-info">
<div class="tls-card-info--img"><img class="tls-card-info--icon" src="/molecule/card/card-info/icon-sample.svg"/></div>
<div class="tls-card-info--content">
<div class="tls-simple-text -color-main -weight-bold -size-16">Simple text
</div>
<div class="tls-simple-text -weight-bold -size-16">Simple text
</div>
<div class="tls-card-info--content-paragraph">
<div class="tls-simple-text -size-16">A very long Simple text on multiple lines
</div>
</div>
<div class="tls-card-info--content-button">
<div class="tls-button-dynamic">
<div class="tls-button-dynamic--text">
<div class="tls-simple-text -color-primary -size-19">Simple Text
</div>
</div>
<div class="tls-button-dynamic--decoration">
<div class="tls-line1"></div>
<div class="tls-line2"></div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="tls-card-info-list--item">
<div class="tls-card-info">
<div class="tls-card-info--img"><img class="tls-card-info--icon" src="/molecule/card/card-info/icon-sample.svg"/></div>
<div class="tls-card-info--content">
<div class="tls-simple-text -color-main -weight-bold -size-16">Simple text
</div>
<div class="tls-simple-text -weight-bold -size-16">Simple text
</div>
<div class="tls-card-info--content-paragraph">
<div class="tls-simple-text -size-16">A very long Simple text on multiple lines
</div>
</div>
<div class="tls-card-info--content-button">
<div class="tls-button-dynamic">
<div class="tls-button-dynamic--text">
<div class="tls-simple-text -color-primary -size-19">Simple Text
</div>
</div>
<div class="tls-button-dynamic--decoration">
<div class="tls-line1"></div>
<div class="tls-line2"></div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="tls-card-info-list--item">
<div class="tls-card-info">
<div class="tls-card-info--img"><img class="tls-card-info--icon" src="/molecule/card/card-info/icon-sample.svg"/></div>
<div class="tls-card-info--content">
<div class="tls-simple-text -color-main -weight-bold -size-16">Simple text
</div>
<div class="tls-simple-text -weight-bold -size-16">Simple text
</div>
<div class="tls-card-info--content-paragraph">
<div class="tls-simple-text -size-16">A very long Simple text on multiple lines
</div>
</div>
<div class="tls-card-info--content-button">
<div class="tls-button-dynamic">
<div class="tls-button-dynamic--text">
<div class="tls-simple-text -color-primary -size-19">Simple Text
</div>
</div>
<div class="tls-button-dynamic--decoration">
<div class="tls-line1"></div>
<div class="tls-line2"></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="tls-static-added-value-services-experience">
<div class="tls-static-added-value-services-experience--slot">
<h2 class="tls-heading-2">Heading level 2</h2>
</div>
<div class="tls-static-added-value-services-experience--content">
<div class="tls-avs-table">
<div class="tls-card-lg">
<table>
<tr>
<th class="tls-table-head">Image
</th>
<td class="tls-table-cell">Simple Text
</td>
<td class="tls-table-cell">Simple Text
</td>
</tr>
<tr>
<th class="tls-table-head">Image
</th>
<td class="tls-table-cell">Simple Text
</td>
<td class="tls-table-cell">Simple Text
</td>
</tr>
<tr>
<th class="tls-table-head">Image
</th>
<td class="tls-table-cell">Simple Text
</td>
<td class="tls-table-cell">Simple Text
</td>
</tr>
</table>
</div>
</div>
</div>
<div class="tls-static-added-value-services-experience--tips">* Service payments are charged in the equal amount in BYN / EUR set by the Embassy of Italy in Minsk.</div>
</div>
<div class="tls-static-added-value-services-other">
<div class="tls-static-added-value-services-other--slot">
<h2 class="tls-heading-2">Heading level 2</h2>
</div>
<div class="tls-static-added-value-services-other--content">
<div class="tls-avs-table">
<div class="tls-card-lg">
<table>
<tr>
<th class="tls-table-head">Image
</th>
<td class="tls-table-cell">Simple Text
</td>
<td class="tls-table-cell">Simple Text
</td>
</tr>
<tr>
<th class="tls-table-head">Image
</th>
<td class="tls-table-cell">Simple Text
</td>
<td class="tls-table-cell">Simple Text
</td>
</tr>
<tr>
<th class="tls-table-head">Image
</th>
<td class="tls-table-cell">Simple Text
</td>
<td class="tls-table-cell">Simple Text
</td>
</tr>
</table>
</div>
</div>
</div>
<div class="tls-static-added-value-services-other--tips">* Service payments are charged in the equal amount in BYN / EUR set by the Embassy of Italy in Minsk.</div>
</div>
</div>
<div class="tls-footer">
<div class="tls-footer-links">
<div class="tls-footer-links--slot">
<div class="tls-footer-links--title">
<div class="tls-simple-text -color-white -weight-bold">Tls links
</div>
</div>
<div class="tls-footer-links--list">
<ul class="tls-link-list">
<li class="tls-link-list--slot"><a class="tls-link">My Link</a></li>
<li class="tls-link-list--slot"><a class="tls-link">My Link</a></li>
</ul>
</div>
</div>
<div class="tls-footer-links--slot">
<div class="tls-footer-links--title">
<div class="tls-simple-text -color-white -weight-bold">Tls links
</div>
</div>
<div class="tls-footer-links--list">
<ul class="tls-link-list">
<li class="tls-link-list--slot"><a class="tls-link">My Link</a></li>
<li class="tls-link-list--slot"><a class="tls-link">My Link</a></li>
</ul>
</div>
</div>
<div class="tls-footer-links--slot">
<div class="tls-footer-links--title">
<div class="tls-simple-text -color-white -weight-bold">Tls links
</div>
</div>
<div class="tls-footer-links--list">
<ul class="tls-link-list">
<li class="tls-link-list--slot"><a class="tls-link">My Link</a></li>
<li class="tls-link-list--slot"><a class="tls-link">My Link</a></li>
</ul>
</div>
</div>
<div class="tls-footer-links--slot">
<div class="tls-footer-links--title">
<div class="tls-simple-text -color-white -weight-bold">Tls links
</div>
</div>
<div class="tls-footer-links--list">
<ul class="tls-link-list">
<li class="tls-link-list--slot"><a class="tls-link">My Link</a></li>
<li class="tls-link-list--slot"><a class="tls-link">My Link</a></li>
</ul>
</div>
</div>
</div>
<div class="tls-footer-line"></div>
<div class="tls-footer-content">
<div class="tls-footer--slot"><a class="tls-logo" href="#"><img class="tls-logo--img" src="/atom/logo/logo/logo.svg"/></a></div>
<div class="tls-footer--slot tls-sm-visible">
<div class="tls-simple-text -color-white -size-12">© 2019 TLScontact. Tous droits réservés.
</div>
</div>
<div class="tls-footer--slot tls-sm-visible">
<div class="tls-social-logo-group">
<div class="tls-social-logo-group--slot"><a class="tls-social-logo" href="#"><i class="fab fa-linkedin-in tls-social-logo--icon"></i></a></div>
<div class="tls-social-logo-group--slot"><a class="tls-social-logo" href="#"><i class="fab fa-linkedin-in tls-social-logo--icon"></i></a></div>
</div>
</div>
<div class="tls-footer--slot"><a class="tls-logo" href="#"><img class="tls-logo--img" src="/atom/logo/logo/logo.svg"/></a></div>
</div>
</div>
</div>.tls-static-added-value-services
.tls-navbar
.tls-navbar--content
.tls-navbar--logo
a.tls-logo(href='#')
img.tls-logo--img(src='/atom/logo/logo/logo.svg')
.tls-navbar--links.-opened
.tls-navbar--slot
.tls-dropdown
a.tls-link-dropdown
.tls-link-dropdown--text Opened
.tls-link-dropdown--icon
i.fa.fa-chevron-up
.tls-dropdown--content
.tls-dropdown--content
.tls-dropdown-list
.tls-dropdown-list--slot
a.tls-dropdown-text My dropdown text
.tls-dropdown-list--slot
.tls-dropdown-text A longer text to see the difference
.tls-navbar--slot
.tls-dropdown
a.tls-link-dropdown
.tls-link-dropdown--text Closed
.tls-link-dropdown--icon
i.fa.fa-chevron-down
.tls-dropdown--content.hidden
.tls-dropdown--content.hidden Hidden content.
.tls-navbar--slot
a.tls-link-uppercase My Uppercase Link
.tls-navbar--slot
a.tls-button-link Button link
.tls-navbar--language
.tls-navbar--slot
a.tls-link-dropdown
img.tls-link-dropdown--flag(src='./flag-en.png')
.tls-link-dropdown--text Link
.tls-link-dropdown--icon
i.fa.fa-chevron-down
.tls-navbar--hamburger
.tls-hamburger.-state-closed
.tls-hamburger--top-line
.tls-hamburger--middle-line
.tls-hamburger--bottom-line
header.tls-simple-banner
.tls-home-text-group
.tls-simple-text.-color-white.-size-22
| Simple text
img.tls-image(src='/atom/image/image.png')
h1.tls-heading-1 Heading level 1
.tls-static-added-value-services-content
.tls-large-card-info
.tls-card-lg
.tls-simple-text.-size-16
p lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur felis magna, lacinia ornare congue ornare, pharetra a leo. Suspendisse fermentum ut mi vel pulvinar. Maecenas gravida varius mauris, sed tempus risus pulvinar sed. In varius placerat erat in porttitor. Sed mollis est ligula, sit amet iaculis nulla rhoncus sed. Morbi quis felis et quam posuere sodales eget quis est. Integer congue faucibus nunc, rhoncus hendrerit massa lobortis sit amet. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
.tls-simple-text.-size-16
p Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur felis magna, lacinia ornare congue ornare, pharetra a leo. Suspendisse fermentum ut mi vel pulvinar. Maecenas gravida varius mauris, sed tempus risus pulvinar sed. In varius placerat erat in porttitor. Sed mollis est ligula, sit amet iaculis nulla rhoncus sed. Morbi quis felis et quam posuere sodales eget quis est. Integer congue faucibus nunc, rhoncus hendrerit massa lobortis sit amet. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
.tls-large-card-info--decoration
.tls-decoration-vertical-lines.-blue
.tls-line1
.tls-line2
.tls-static-added-value-services-action
.tls-static-added-value-services-action--slot
h2.tls-heading-2 Heading level 2
.tls-static-added-value-services-action--content
.tls-card-info-list
.tls-card-info-list--item
.tls-card-info
.tls-card-info--img
img.tls-card-info--icon(src='/molecule/card/card-info/icon-sample.svg')
.tls-card-info--content
.tls-simple-text.-color-main.-weight-bold.-size-16.
Simple text
.tls-simple-text.-weight-bold.-size-16.
Simple text
.tls-card-info--content-paragraph
.tls-simple-text.-size-16.
A very long Simple text on multiple lines
.tls-card-info--content-button
.tls-button-dynamic
.tls-button-dynamic--text
.tls-simple-text.-color-primary.-size-19.
Simple Text
.tls-button-dynamic--decoration
.tls-line1
.tls-line2
.tls-card-info-list--item
.tls-card-info
.tls-card-info--img
img.tls-card-info--icon(src='/molecule/card/card-info/icon-sample.svg')
.tls-card-info--content
.tls-simple-text.-color-main.-weight-bold.-size-16.
Simple text
.tls-simple-text.-weight-bold.-size-16.
Simple text
.tls-card-info--content-paragraph
.tls-simple-text.-size-16.
A very long Simple text on multiple lines
.tls-card-info--content-button
.tls-button-dynamic
.tls-button-dynamic--text
.tls-simple-text.-color-primary.-size-19.
Simple Text
.tls-button-dynamic--decoration
.tls-line1
.tls-line2
.tls-card-info-list--item
.tls-card-info
.tls-card-info--img
img.tls-card-info--icon(src='/molecule/card/card-info/icon-sample.svg')
.tls-card-info--content
.tls-simple-text.-color-main.-weight-bold.-size-16.
Simple text
.tls-simple-text.-weight-bold.-size-16.
Simple text
.tls-card-info--content-paragraph
.tls-simple-text.-size-16.
A very long Simple text on multiple lines
.tls-card-info--content-button
.tls-button-dynamic
.tls-button-dynamic--text
.tls-simple-text.-color-primary.-size-19.
Simple Text
.tls-button-dynamic--decoration
.tls-line1
.tls-line2
.tls-static-added-value-services-experience
.tls-static-added-value-services-experience--slot
h2.tls-heading-2 Heading level 2
.tls-static-added-value-services-experience--content
.tls-avs-table
.tls-card-lg
table
tbody
tr
th.tls-table-head.
Image
td.tls-table-cell.
Simple Text
td.tls-table-cell.
Simple Text
tr
th.tls-table-head.
Image
td.tls-table-cell.
Simple Text
td.tls-table-cell.
Simple Text
tr
th.tls-table-head.
Image
td.tls-table-cell.
Simple Text
td.tls-table-cell.
Simple Text
.tls-static-added-value-services-experience--tips * Service payments are charged in the equal amount in BYN / EUR set by the Embassy of Italy in Minsk.
.tls-static-added-value-services-other
.tls-static-added-value-services-other--slot
h2.tls-heading-2 Heading level 2
.tls-static-added-value-services-other--content
.tls-avs-table
.tls-card-lg
table
tbody
tr
th.tls-table-head.
Image
td.tls-table-cell.
Simple Text
td.tls-table-cell.
Simple Text
tr
th.tls-table-head.
Image
td.tls-table-cell.
Simple Text
td.tls-table-cell.
Simple Text
tr
th.tls-table-head.
Image
td.tls-table-cell.
Simple Text
td.tls-table-cell.
Simple Text
.tls-static-added-value-services-other--tips * Service payments are charged in the equal amount in BYN / EUR set by the Embassy of Italy in Minsk.
.tls-footer
.tls-footer-links
.tls-footer-links--slot
.tls-footer-links--title
.tls-simple-text.-color-white.-weight-bold.
Tls links
.tls-footer-links--list
ul.tls-link-list
li.tls-link-list--slot
a.tls-link My Link
li.tls-link-list--slot
a.tls-link My Link
.tls-footer-links--slot
.tls-footer-links--title
.tls-simple-text.-color-white.-weight-bold.
Tls links
.tls-footer-links--list
ul.tls-link-list
li.tls-link-list--slot
a.tls-link My Link
li.tls-link-list--slot
a.tls-link My Link
.tls-footer-links--slot
.tls-footer-links--title
.tls-simple-text.-color-white.-weight-bold.
Tls links
.tls-footer-links--list
ul.tls-link-list
li.tls-link-list--slot
a.tls-link My Link
li.tls-link-list--slot
a.tls-link My Link
.tls-footer-links--slot
.tls-footer-links--title
.tls-simple-text.-color-white.-weight-bold.
Tls links
.tls-footer-links--list
ul.tls-link-list
li.tls-link-list--slot
a.tls-link My Link
li.tls-link-list--slot
a.tls-link My Link
.tls-footer-line
.tls-footer-content
.tls-footer--slot
a.tls-logo(href='#')
img.tls-logo--img(src='/atom/logo/logo/logo.svg')
.tls-footer--slot.tls-sm-visible
.tls-simple-text.-color-white.-size-12.
© 2019 TLScontact. Tous droits réservés.
.tls-footer--slot.tls-sm-visible
.tls-social-logo-group
.tls-social-logo-group--slot
a.tls-social-logo(href='#')
i.fab.fa-linkedin-in.tls-social-logo--icon
.tls-social-logo-group--slot
a.tls-social-logo(href='#')
i.fab.fa-linkedin-in.tls-social-logo--icon
.tls-footer--slot
a.tls-logo(href='#')
img.tls-logo--img(src='/atom/logo/logo/logo.svg')