Organisms

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.

Atomic Design by Brad Frost

V2 AVS Priority Accordion

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-color

V2 banner

Breadcrums banner

<div class="v2-header-background" style="background-image: url(&quot;/organism/_V2/banner/banner.jpg&quot;)">
  <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 3

V2 AVS-Card

AVS 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

V2 Container

<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

V2 footer

Footer

<div class="v2-bg-color-blue">
  <div class="v2-grid-container">
    <table>
      <tr>
        <td>
          <div class="v2-footer-link-title">
            <div class="tls-simple-text -color-white -weight-bold">Tls links
            </div>
          </div>
          <div class="v2-footer-links-list">
            <div class="tls-simple-text -color-white">Simple Text
            </div>
            <div class="tls-simple-text -color-white">Simple Text
            </div>
            <div class="tls-simple-text -color-white">Simple Text
            </div>
          </div>
        </td>
        <td>
          <div class="v2-footer-link-title">
            <div class="tls-simple-text -color-white -weight-bold">Tls links
            </div>
          </div>
          <div class="v2-footer-links-list">
            <div class="tls-simple-text -color-white">Simple Text
            </div>
            <div class="tls-simple-text -color-white">Simple Text
            </div>
            <div class="tls-simple-text -color-white">Simple Text
            </div>
          </div>
        </td>
        <td>
          <div class="v2-footer-link-title">
            <div class="tls-simple-text -color-white -weight-bold">Tls links
            </div>
          </div>
          <div class="v2-footer-links-list">
            <div class="tls-simple-text -color-white">Simple Text
            </div>
            <div class="tls-simple-text -color-white">Simple Text
            </div>
            <div class="tls-simple-text -color-white">Simple Text
            </div>
          </div>
        </td>
      </tr>
    </table>
    <hr class="v2-hr-line"/>
    <table>
      <tr>
        <td><img class="v2-footer-logo" src="tls_logo.svg"/></td>
        <td>
          <p class="v2-footer-copyright">© 2022 TLScontact. All rights reserved.</p>
        </td>
        <td><img class="v2-footer-logo" src="w3c_logo.png"/></td>
      </tr>
    </table>
  </div>
</div>
.v2-bg-color-blue
  .v2-grid-container
    table
      tbody
        tr
          td
            .v2-footer-link-title
              .tls-simple-text.-color-white.-weight-bold.
                Tls links
                
            .v2-footer-links-list
              .tls-simple-text.-color-white.
                Simple Text
                
              .tls-simple-text.-color-white.
                Simple Text
                
              .tls-simple-text.-color-white.
                Simple Text
                
          td
            .v2-footer-link-title
              .tls-simple-text.-color-white.-weight-bold.
                Tls links
                
            .v2-footer-links-list
              .tls-simple-text.-color-white.
                Simple Text
                
              .tls-simple-text.-color-white.
                Simple Text
                
              .tls-simple-text.-color-white.
                Simple Text
                
          td
            .v2-footer-link-title
              .tls-simple-text.-color-white.-weight-bold.
                Tls links
                
            .v2-footer-links-list
              .tls-simple-text.-color-white.
                Simple Text
                
              .tls-simple-text.-color-white.
                Simple Text
                
              .tls-simple-text.-color-white.
                Simple Text
                
    hr.v2-hr-line
    table
      tbody
        tr
          td
            img.v2-footer-logo(src='tls_logo.svg')
          td
            p.v2-footer-copyright © 2022 TLScontact. All rights reserved.
          td
            img.v2-footer-logo(src='w3c_logo.png')

Horizontal spacing

<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

V2 Shopping cart

<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

Vertical spacing

<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 3

AVS Table card info

AVS 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

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-half

Banners

All banners

Button banner

Button banner

<div class="tls-button-banner">
  <div class="tls-button-banner--img" style="background-image: url(&quot;/organism/banner/button-banner/italy.jpg&quot;)">
    <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

Home banner

<div class="tls-home-banner">
  <div class="tls-home-banner--img" style="background-image: url(&quot;/organism/banner/home-banner/italy.jpg&quot;)">
    <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-line2

News banner

News 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 link

Simple banner

Simple 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 1

Personal banner

Personal 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 1

AVS card info

AVS 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-line2

Button image group

Button 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(&quot;/molecule/buttons/button-image/center.png&quot;)">
          <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(&quot;/molecule/buttons/button-image/center.png&quot;)">
          <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(&quot;/molecule/buttons/button-image/center.png&quot;)">
          <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-line2

Card info list

Card 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-line2

Cards Info

All Cards Info

Large card 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-line2

Large card map

Large 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-line2

Large card notice

Large 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-line2

Visa procedure card info

Visa 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-line2

Security notice info

Security notice info

<div class="tls-security-notice-card-info">
  <div class="tls-card-lg">
    <div class="tls-simple-text -size-16"><b>Simple Text</b>
    </div>
  </div>
  <div class="tls-security-notice-card-info--decoration">
    <div class="tls-decoration-vertical-lines -blue">
      <div class="tls-line1"></div>
      <div class="tls-line2"></div>
    </div>
  </div>
</div>
.tls-security-notice-card-info
  .tls-card-lg
    .tls-simple-text.-size-16
      b Simple Text
  .tls-security-notice-card-info--decoration
    .tls-decoration-vertical-lines.-blue
      .tls-line1
      .tls-line2

Status card group

Status 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

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

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

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

Carousel for Citizen

<div class="tls-citizen-carousel"></div>
.tls-citizen-carousel

Step Card for Citizen

Step 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(&quot;/assets/welcome-background.jpg&quot;)"></div>
    <div class="tls-citizen-step-card-img-filter"></div>
    <div class="tls-citizen-step-card-img-icon" style="background-image: url(&quot;/organism/citizen-step-card/cicle_check.svg&quot;)"></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 text

Fees Table

Fees table

<div class="tls-fees-table">
  <div class="tls-card-lg">
    <table>
      <thead>
        <th class="tls-table-thead">Simple Text
        </th>
        <th class="tls-table-thead">Simple Text
        </th>
        <th class="tls-table-thead">Simple Text
        </th>
      </thead>
      <tbody>
        <tr>
          <th class="tls-table-head">Simple Text
          </th>
          <td class="tls-table-cell">Simple Text
          </td>
          <td class="tls-table-cell">Simple Text
          </td>
        </tr>
        <tr>
          <th class="tls-table-head">Simple Text
          </th>
          <td class="tls-table-cell">Simple Text
          </td>
          <td class="tls-table-cell">Simple Text
          </td>
        </tr>
        <tr>
          <th class="tls-table-head">Simple Text
          </th>
          <td class="tls-table-cell">Simple Text
          </td>
          <td class="tls-table-cell">Simple Text
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</div>
.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

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')

Forms

All forms

Form

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

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

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

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

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-remind

Navigation 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 link

Navigation 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 link

Navbar

<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-line

Options

Options

<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-remind

Summary

Summary

<div class="tls-summary">
  <div class="tls-summary-title">
    <h1>Summary</h1>
  </div>
  <div class="tls-summary-list">
    <div class="tls-summary-list--slot">
      <div class="tls-summary-list-item">
        <div class="tls-summary-list-item--title">
                <div class="tls-simple-text">Summary item
                </div>
        </div>
        <div class="tls-summary-list-item--end">
          <div class="tls-summary-list-item--value">
                  <div class="tls-simple-text">XX €
                  </div>
          </div>
          <div class="tls-summary-list-item--action">
                  <div class="tls-simple-text">-
                  </div>
          </div>
        </div>
      </div>
    </div>
    <div class="tls-summary-list--slot">
      <div class="tls-summary-list-item">
        <div class="tls-summary-list-item--title">
                <div class="tls-simple-text">Summary item
                </div>
        </div>
        <div class="tls-summary-list-item--end">
          <div class="tls-summary-list-item--value">
                  <div class="tls-simple-text">XX €
                  </div>
          </div>
          <div class="tls-summary-list-item--action">
                  <div class="tls-simple-text">-
                  </div>
          </div>
        </div>
      </div>
    </div>
    <div class="tls-summary-list--slot">
      <div class="tls-summary-list-item">
        <div class="tls-summary-list-item--title">
                <div class="tls-simple-text">Summary item
                </div>
        </div>
        <div class="tls-summary-list-item--end">
          <div class="tls-summary-list-item--value">
                  <div class="tls-simple-text">XX €
                  </div>
          </div>
          <div class="tls-summary-list-item--action">
                  <div class="tls-simple-text">-
                  </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="tls-summary-horizontal-separator"></div>
  <div class="tls-summary-sublist">
    <div class="tls-summary-sublist--slot">
      <div class="tls-summary-sublist-item">
        <div class="tls-summary-sublist-item--title">
                <div class="tls-simple-text">Sublist item
                </div>
        </div>
        <div class="tls-summary-sublist-item--value">
                <div class="tls-simple-text">XX €
                </div>
        </div>
      </div>
    </div>
    <div class="tls-summary-sublist--slot">
      <div class="tls-summary-sublist-item">
        <div class="tls-summary-sublist-item--title">
                <div class="tls-simple-text">Sublist item
                </div>
        </div>
        <div class="tls-summary-sublist-item--value">
                <div class="tls-simple-text">XX €
                </div>
        </div>
      </div>
    </div>
  </div>
  <div class="tls-summary-total">
    <div class="tls-summary-total-content">
      <div class="tls-summary-total--title">
            <div class="tls-simple-text -color-white">Total
            </div>
      </div>
      <div class="tls-summary-total--value">
            <div class="tls-simple-text -color-white">XX €
            </div>
      </div>
    </div>
  </div>
</div>
.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

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

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--icon

Personal Table

personal 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