Organisms are groups of molecules joined together to form a relatively complex, distinct section of an interface.
Building up from molecules to organisms encourages creating standalone, portable, reusable components.
AVS Priority Accordion
<div class="v2-avs-priority-accordion">
<div class="v2-avs-priority-accordion-title">
<div class="ukvi-text -info -f-700 -s-20">Selected priority and services</div>
<div class="toto ukvi-text -invalid -f-400 -s-14">Available time slots may vary depending on your selection</div><span class="v2-icon -xlarge -main-color ukvi-glyph-plus"></span>
</div>
<div class="v2-avs-priority-accordion-section">
<div class="v2-avs-priority-accordion-section-content">
<div class="v2-selected-priority">
<div class="v2-text -main-color -f-700">Selected priority</div>
<div class="v2-selected-priority-fields">
<div class="v2-selected-priority-content">
<div class="v2-card-radio v2-selected-priority-button">
<label class="v2-radio -s-16">
<input class="v2-radio-input" type="radio"/><span class="v2-radio-checkmark ukvi-icon ukvi-glyph-check -s-16"></span>
</label>
</div>
<div class="v2-text -f-400">Priority visa application</div>
</div>
<div class="v2-selected-priority-content">
<div class="v2-card-radio v2-selected-priority-button">
<label class="v2-radio -s-16">
<input class="v2-radio-input" type="radio"/><span class="v2-radio-checkmark ukvi-icon ukvi-glyph-check -s-16"></span>
</label>
</div>
<div class="v2-text -f-400">None</div>
</div>
</div>
</div>
<div class="v2-selected-services">
<div class="v2-text -main-color -f-700">Selected services</div>
<div class="v2-selected-services-fields">
<div class="v2-selected-services-content">
<div class="v2-card-radio selected-services-button">
<label class="v2-checkbox -s-16">
<input class="v2-checkbox-input" type="checkbox"/><span class="v2-checkbox-checkmark ukvi-icon ukvi-glyph-check -s-16"></span>
</label>
</div>
<div class="v2-text -f-400">Assisted scanning (£125)</div>
</div>
<div class="v2-selected-services-content">
<div class="v2-card-radio selected-services-button">
<label class="v2-radio -s-16">
<input class="v2-radio-input" type="radio"/><span class="v2-radio-checkmark ukvi-icon ukvi-glyph-check -s-16"></span>
</label>
</div>
<div class="v2-text -f-400">None</div>
</div>
</div>
</div>
<div class="v2-icon ukvi-glyph-up -xlarge -main-color"></div>
</div>
</div>
</div>.v2-avs-priority-accordion
.v2-avs-priority-accordion-title
.ukvi-text.-info.-f-700.-s-20 Selected priority and services
.toto.ukvi-text.-invalid.-f-400.-s-14 Available time slots may vary depending on your selection
span.v2-icon.-xlarge.-main-color.ukvi-glyph-plus
.v2-avs-priority-accordion-section
.v2-avs-priority-accordion-section-content
.v2-selected-priority
.v2-text.-main-color.-f-700 Selected priority
.v2-selected-priority-fields
.v2-selected-priority-content
.v2-card-radio.v2-selected-priority-button
label.v2-radio.-s-16
input.v2-radio-input(type='radio')
span.v2-radio-checkmark.ukvi-icon.ukvi-glyph-check.-s-16
.v2-text.-f-400 Priority visa application
.v2-selected-priority-content
.v2-card-radio.v2-selected-priority-button
label.v2-radio.-s-16
input.v2-radio-input(type='radio')
span.v2-radio-checkmark.ukvi-icon.ukvi-glyph-check.-s-16
.v2-text.-f-400 None
.v2-selected-services
.v2-text.-main-color.-f-700 Selected services
.v2-selected-services-fields
.v2-selected-services-content
.v2-card-radio.selected-services-button
label.v2-checkbox.-s-16
input.v2-checkbox-input(type='checkbox')
span.v2-checkbox-checkmark.ukvi-icon.ukvi-glyph-check.-s-16
.v2-text.-f-400 Assisted scanning (£125)
.v2-selected-services-content
.v2-card-radio.selected-services-button
label.v2-radio.-s-16
input.v2-radio-input(type='radio')
span.v2-radio-checkmark.ukvi-icon.ukvi-glyph-check.-s-16
.v2-text.-f-400 None
.v2-icon.ukvi-glyph-up.-xlarge.-main-colorBreadcrums banner
<div class="v2-header-background" style="background-image: url("/organism/_V2/banner/banner.jpg")">
<div class="v2-grid-container">
<div class="v2-menu-container">
<div class="v2-header-nav" style="text-align: center">
<ul class="breadcrumb" style="text-align: center;margin-bottom: 0px;margin-top: 3px;">
<li><a>Item 1</a></li>
<li><a>Item 2</a></li>
<li><a>Item 3</a></li>
</ul>
</div>
</div>
</div>
</div>.v2-header-background(style='background-image: url("/organism/_V2/banner/banner.jpg")')
.v2-grid-container
.v2-menu-container
.v2-header-nav(style='text-align: center')
ul.breadcrumb(style='text-align: center;margin-bottom: 0px;margin-top: 3px;')
li
a Item 1
li
a Item 2
li
a Item 3AVS Card
<div class="v2-card-avs">
<div class="v2-card-avs-element">
<div class="v2-card-radio">
<div class="label v2-radio">
<input class="v2-radio-input" type="radio"/><span class="v2-radio-checkmark ukvi-icon ukvi-glyph-check"></span>
</div>
</div>
<div class="v2-card-image"><img src="assisted_service.png"/></div>
<div class="v2-card-section">
<div class="v2-card-section-title">
<div class="v2-card-section-name tls-ukvi-title">Title</div>
</div><span class="ukvi-text -s-14 -f-700">description for the card</span><span class="ukvi-text -s-14">contents for the card</span>
</div>
<div class="v2-card-article">
<div class="v2-card-avs-fee">+123.45 GBP</div>
<div class="ukvi-text -info -s-14 text-right">+123.45 MAD</div>
</div>
</div>
<div class="v2-card-divider"></div>
</div>.v2-card-avs
.v2-card-avs-element
.v2-card-radio
.label.v2-radio
input.v2-radio-input(type='radio')
span.v2-radio-checkmark.ukvi-icon.ukvi-glyph-check
.v2-card-image
img(src='assisted_service.png')
.v2-card-section
.v2-card-section-title
.v2-card-section-name.tls-ukvi-title Title
span.ukvi-text.-s-14.-f-700 description for the card
span.ukvi-text.-s-14 contents for the card
.v2-card-article
.v2-card-avs-fee +123.45 GBP
.ukvi-text.-info.-s-14.text-right +123.45 MAD
.v2-card-divider<div class="v2-container -bg-blue">blue container</div>
<div class="v2-container -bg-white">white container</div>.v2-container.-bg-blue blue container
.v2-container.-bg-white white container<div class="v2-horizontal-spacing -s30">
<div class="v2-horizontal-spacing--column">First</div>
<div class="v2-horizontal-spacing--column">Second</div>
<div class="v2-horizontal-spacing--column">Third</div>
</div>
<div class="v2-horizontal-spacing -s30 -equivalent">
<div class="v2-horizontal-spacing--column">First</div>
<div class="v2-horizontal-spacing--column">Second</div>
<div class="v2-horizontal-spacing--column">Third</div>
</div>
<div class="v2-horizontal-spacing -s30 -top">
<div class="v2-horizontal-spacing--column">First item</div>
<div class="v2-horizontal-spacing--column -expand">Second <br/> item</div>
<div class="v2-horizontal-spacing--column">Third item</div>
</div>
<div class="v2-horizontal-spacing -s30 -middle">
<div class="v2-horizontal-spacing--column">First item</div>
<div class="v2-horizontal-spacing--column -expand">Second <br/> item</div>
<div class="v2-horizontal-spacing--column">Third item</div>
</div>
<div class="v2-horizontal-spacing -s30 -bottom">
<div class="v2-horizontal-spacing--column">First item</div>
<div class="v2-horizontal-spacing--column -expand">Second <br/> item</div>
<div class="v2-horizontal-spacing--column">Third item</div>
</div>
<div class="v2-horizontal-spacing -s10 -left">
<div class="v2-horizontal-spacing--column">First</div>
<div class="v2-horizontal-spacing--column">Second</div>
<div class="v2-horizontal-spacing--column">Third</div>
</div>
<div class="v2-horizontal-spacing -s10 -center">
<div class="v2-horizontal-spacing--column">First</div>
<div class="v2-horizontal-spacing--column">Second</div>
<div class="v2-horizontal-spacing--column">Third</div>
</div>
<div class="v2-horizontal-spacing -s10 -end">
<div class="v2-horizontal-spacing--column">First</div>
<div class="v2-horizontal-spacing--column">Second</div>
<div class="v2-horizontal-spacing--column">Third</div>
</div>.v2-horizontal-spacing.-s30
.v2-horizontal-spacing--column First
.v2-horizontal-spacing--column Second
.v2-horizontal-spacing--column Third
.v2-horizontal-spacing.-s30.-equivalent
.v2-horizontal-spacing--column First
.v2-horizontal-spacing--column Second
.v2-horizontal-spacing--column Third
.v2-horizontal-spacing.-s30.-top
.v2-horizontal-spacing--column First item
.v2-horizontal-spacing--column.-expand
| Second
br
| item
.v2-horizontal-spacing--column Third item
.v2-horizontal-spacing.-s30.-middle
.v2-horizontal-spacing--column First item
.v2-horizontal-spacing--column.-expand
| Second
br
| item
.v2-horizontal-spacing--column Third item
.v2-horizontal-spacing.-s30.-bottom
.v2-horizontal-spacing--column First item
.v2-horizontal-spacing--column.-expand
| Second
br
| item
.v2-horizontal-spacing--column Third item
.v2-horizontal-spacing.-s10.-left
.v2-horizontal-spacing--column First
.v2-horizontal-spacing--column Second
.v2-horizontal-spacing--column Third
.v2-horizontal-spacing.-s10.-center
.v2-horizontal-spacing--column First
.v2-horizontal-spacing--column Second
.v2-horizontal-spacing--column Third
.v2-horizontal-spacing.-s10.-end
.v2-horizontal-spacing--column First
.v2-horizontal-spacing--column Second
.v2-horizontal-spacing--column Third<div class="v2-shopping-cart">
<div class="v2-shopping-cart--header">
<div class="title">Shopping Cart</div>
</div>
<div class="v2-basket">
<div class="v2-basket--header">
<div class="title">Basket</div>
</div>
<div class="v2-basket--body">
<div class="v2-basket-item">
<div class="name">Priority Level</div>
<div class="price">100 EUR</div>
</div>
<div class="v2-basket-item -in-progress">
<div class="name">Priority Level</div>
<div class="price">0 EUR</div>
</div>
</div>
<div class="v2-basket--footer">
<div class="total">Total
<div class="value">100 EUR</div>
</div>
</div>
</div>
</div>.v2-shopping-cart
.v2-shopping-cart--header
.title Shopping Cart
.v2-basket
.v2-basket--header
.title Basket
.v2-basket--body
.v2-basket-item
.name Priority Level
.price 100 EUR
.v2-basket-item.-in-progress
.name Priority Level
.price 0 EUR
.v2-basket--footer
.total
| Total
.value 100 EUR<div class="v2-vertical-spacing -s30">
<div class="v2-vertical-spacing--line">Line 1</div>
<div class="v2-vertical-spacing--line">Line 2</div>
<div class="v2-vertical-spacing--line">Line 3</div>
</div>.v2-vertical-spacing.-s30
.v2-vertical-spacing--line Line 1
.v2-vertical-spacing--line Line 2
.v2-vertical-spacing--line Line 3Vac Location Table
<table class="v2-vac-location-table">
<thead>
<tr>
<th>heading 1</th>
<th>heading 2</th>
<th>heading 3</th>
<th>heading 4</th>
<th>heading 5</th>
<th>heading 6</th>
</tr>
</thead>
<tbody>
<tr>
<td>cell 1.1</td>
<td>cell 2.1</td>
<td>cell 3.1</td>
<td>cell 4.1</td>
<td>cell 5.1</td>
<td>cell 6.1</td>
</tr>
<tr>
<td>cell 1.2</td>
<td>cell 2.2</td>
<td>cell 3.2</td>
<td>cell 4.2</td>
<td>cell 5.2</td>
<td>cell 6.2</td>
</tr>
<tr>
<td>cell 1.3</td>
<td>cell 2.3</td>
<td>cell 3.3</td>
<td>cell 4.3</td>
<td>cell 5.3</td>
<td>cell 6.3</td>
</tr>
</tbody>
</table>table.v2-vac-location-table
thead
tr
th heading 1
th heading 2
th heading 3
th heading 4
th heading 5
th heading 6
tbody
tr
td cell 1.1
td cell 2.1
td cell 3.1
td cell 4.1
td cell 5.1
td cell 6.1
tr
td cell 1.2
td cell 2.2
td cell 3.2
td cell 4.2
td cell 5.2
td cell 6.2
tr
td cell 1.3
td cell 2.3
td cell 3.3
td cell 4.3
td cell 5.3
td cell 6.3AVS Table card info
<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>.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
Action status group
<div class="tls-action-status-group">
<div class="tls-action-status-group--slot">
<div class="tls-validated-action-status">
<div class="tls-validated-action-status--text">
<div class="tls-simple-text">This is a sample text
</div>
</div>
<div class="tls-validated-action-status--icon">
<div class="tls-success-icon">
<div class="tls-success-icon--content"><i class="fas fa-check"></i></div>
</div>
</div>
</div>
</div>
<div class="tls-action-status-group--slot">
<div class="tls-validated-action-status">
<div class="tls-validated-action-status--text">
<div class="tls-simple-text">This is a sample text
</div>
</div>
<div class="tls-validated-action-status--icon">
<div class="tls-success-icon">
<div class="tls-success-icon--content"><i class="fas fa-check"></i></div>
</div>
</div>
</div>
</div>
<div class="tls-action-status-group--slot">
<div class="tls-pending-action-status">
<div class="tls-pending-action-status--text">
<div class="tls-simple-text">This is a sample text
</div>
</div>
<div class="tls-pending-action-status--icon">
<div class="tls-danger-icon">
<div class="tls-danger-icon--content"><i class="fas fa-hourglass-half"></i></div>
</div>
</div>
</div>
</div>
<div class="tls-action-status-group--slot">
<div class="tls-pending-action-status">
<div class="tls-pending-action-status--text">
<div class="tls-simple-text">This is a sample text
</div>
</div>
<div class="tls-pending-action-status--icon">
<div class="tls-danger-icon">
<div class="tls-danger-icon--content"><i class="fas fa-hourglass-half"></i></div>
</div>
</div>
</div>
</div>
<div class="tls-action-status-group--slot">
<div class="tls-pending-action-status">
<div class="tls-pending-action-status--text">
<div class="tls-simple-text">This is a sample text
</div>
</div>
<div class="tls-pending-action-status--icon">
<div class="tls-danger-icon">
<div class="tls-danger-icon--content"><i class="fas fa-hourglass-half"></i></div>
</div>
</div>
</div>
</div>
</div>.tls-action-status-group
.tls-action-status-group--slot
.tls-validated-action-status
.tls-validated-action-status--text
.tls-simple-text.
This is a sample text
.tls-validated-action-status--icon
.tls-success-icon
.tls-success-icon--content
i.fas.fa-check
.tls-action-status-group--slot
.tls-validated-action-status
.tls-validated-action-status--text
.tls-simple-text.
This is a sample text
.tls-validated-action-status--icon
.tls-success-icon
.tls-success-icon--content
i.fas.fa-check
.tls-action-status-group--slot
.tls-pending-action-status
.tls-pending-action-status--text
.tls-simple-text.
This is a sample text
.tls-pending-action-status--icon
.tls-danger-icon
.tls-danger-icon--content
i.fas.fa-hourglass-half
.tls-action-status-group--slot
.tls-pending-action-status
.tls-pending-action-status--text
.tls-simple-text.
This is a sample text
.tls-pending-action-status--icon
.tls-danger-icon
.tls-danger-icon--content
i.fas.fa-hourglass-half
.tls-action-status-group--slot
.tls-pending-action-status
.tls-pending-action-status--text
.tls-simple-text.
This is a sample text
.tls-pending-action-status--icon
.tls-danger-icon
.tls-danger-icon--content
i.fas.fa-hourglass-halfAll banners
Button banner
<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>.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
Home banner
<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>.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-line2News banner
<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>.tls-news-banner
.tls-simple-text.-color-white
| This is the news banner
a(href) ...with a linkSimple banner
<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>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 1Personal banner
<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>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 1AVS card info
<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>.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-line2Button image group
<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>.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-line2Card info list
<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>.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-line2All Cards Info
Large 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>.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-line2Large card map for opening hours page
<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>.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-line2Large card notice
<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>.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-line2Visa procedure card 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>.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-line2Security 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>.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-line2Status card group
<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>.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
Status card info
<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>.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
Table card 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>.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
Cookie consent
<div class="tls-cookie-consent">
<div class="tls-cookie-consent-container">
<div class="tls-cookie-consent--text">
<div class="tls-simple-text">Marshmallow bear claw cookie halvah marshmallow gummi bears. Chocolate bar topping cookie toffee gummies. Muffin topping fruitcake wafer. Jujubes toffee candy powder. Bear claw pie cookie gummies gummies.
</div>
</div>
<div class="tls-cookie-consent--action">
<button class="tls-button-primary">Accept
</button>
<button class="tls-button-danger">Deny
</button>
</div>
</div>
<div class="tls-cookie-consent--close">
<button class="tls-button-icon">×</button>
</div>
</div>.tls-cookie-consent
.tls-cookie-consent-container
.tls-cookie-consent--text
.tls-simple-text.
Marshmallow bear claw cookie halvah marshmallow gummi bears. Chocolate bar topping cookie toffee gummies. Muffin topping fruitcake wafer. Jujubes toffee candy powder. Bear claw pie cookie gummies gummies.
.tls-cookie-consent--action
button.tls-button-primary.
Accept
button.tls-button-danger.
Deny
.tls-cookie-consent--close
button.tls-button-icon ×Carousel for Citizen
<div class="tls-citizen-carousel"></div>.tls-citizen-carouselStep card for Citizen
<div class="tls-citizen-step-card">
<div class="tls-citizen-step-card-img-container">
<div class="tls-citizen-step-card-img" style="background-image: url("/assets/welcome-background.jpg")"></div>
<div class="tls-citizen-step-card-img-filter"></div>
<div class="tls-citizen-step-card-img-icon" style="background-image: url("/organism/citizen-step-card/cicle_check.svg")"></div>
<div class="tls-citizen-step-card-done-info">Done</div>
</div>
<div class="tls-citizen-step-card-step-number">2</div>
<div class="tls-citizen-step-card-desc">
<div class="tls-simple-text -size-32 -color-bright-blue">Simple text</div>
</div>
</div>.tls-citizen-step-card
.tls-citizen-step-card-img-container
.tls-citizen-step-card-img(style='background-image: url("/assets/welcome-background.jpg")')
.tls-citizen-step-card-img-filter
.tls-citizen-step-card-img-icon(style='background-image: url("/organism/citizen-step-card/cicle_check.svg")')
.tls-citizen-step-card-done-info Done
.tls-citizen-step-card-step-number 2
.tls-citizen-step-card-desc
.tls-simple-text.-size-32.-color-bright-blue Simple textFees 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>.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
Flow card
<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>.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.
Footer
<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>.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')All forms
Form
<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>.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
Inline 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>.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
Inquiry form
<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>.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
Home select
<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>.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
Marketing consent
<div class="tls-marketing-consent">
<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>.tls-marketing-consent
.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-remindNavigation tabs with pills and contents
<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>.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 linkNavigation tabs with pills and contents for visa type
<div class="tls-nav-tabs-visa-type-pills">
<button class="tls-nav-tabs-visa-type-pills-arrow"><i class="fa fa-chevron-left tls-nav-tabs-visa-type-pills-icon"></i></button>
<div class="tls-nav-tabs-visa-type-pills-group">
<div class="tls-nav-tabs-visa-type-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-visa-type-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-visa-type-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-visa-type-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-visa-type-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-visa-type-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-visa-type-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-visa-type-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-visa-type-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>
<button class="tls-nav-tabs-visa-type-pills-arrow"><i class="fa fa-chevron-right tls-nav-tabs-visa-type-pills-icon"></i></button>
</div>
<div class="tls-nav-tabs-visa-type-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>.tls-nav-tabs-visa-type-pills
button.tls-nav-tabs-visa-type-pills-arrow
i.fa.fa-chevron-left.tls-nav-tabs-visa-type-pills-icon
.tls-nav-tabs-visa-type-pills-group
.tls-nav-tabs-visa-type-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-visa-type-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-visa-type-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-visa-type-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-visa-type-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-visa-type-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-visa-type-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-visa-type-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-visa-type-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
button.tls-nav-tabs-visa-type-pills-arrow
i.fa.fa-chevron-right.tls-nav-tabs-visa-type-pills-icon
.tls-nav-tabs-visa-type-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 linkNavbar
<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>.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-lineOptions
<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>.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.
-
Popup
<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>.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-remindSummary
<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>.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 €
Table card info
<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>.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
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>.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--iconpersonal table
<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>.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