Molecules

Molecules are groups of atoms bonded together and are the smallest fundamental units of a compound. These molecules take on their own properties and serve as the backbone of our design systems.
For example, a form label, input or button aren’t too useful by themselves, but combine them together as a form and now they can actually do something together.
Atomic Design by Brad Frost

Action status

Pending action status

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

.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

Validated action status

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

.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

Modal Small

<div class="v2-card-with-tabs">
  <div class="v2-card-with-tabs--content">
    <p>Default body</p>
  </div>
</div>

.v2-card-with-tabs
  .v2-card-with-tabs--content
    p Default body

Appointment calendar

<div class="v2-appointment-calendar">
  <div class="tls-simple-text -color-main -weight-bold -size-26"><span class="ukvi-icon ukvi-glyph-chevron-left -medium"></span><span>October 2022</span><span class="ukvi-icon ukvi-glyph-chevron-right -medium"></span></div>
  <table class="v2-appointment-table">
    <thead class="v2-appointment-table-head">
      <th class="v2-appointment-table-head-item">Mon</th>
      <th class="v2-appointment-table-head-item">Tue</th>
      <th class="v2-appointment-table-head-item">Wed</th>
      <th class="v2-appointment-table-head-item">Thu</th>
      <th class="v2-appointment-table-head-item">Fri</th>
      <th class="v2-appointment-table-head-item">Sat</th>
      <th class="v2-appointment-table-head-item">Sun</th>
    </thead>
    <tbody class="v2-appointment-table-body">
      <tr class="v2-appointment-table-row">
        <td class="v2-appointment-table-cell"></td>
        <td class="v2-appointment-table-cell">
          <button class="v2-appointment-day -available"><span class="v2-appointment-day-number">1</span></button>
        </td>
        <td class="v2-appointment-table-cell">
          <button class="v2-appointment-day -available"><span class="v2-appointment-day-number">2</span></button>
        </td>
        <td class="v2-appointment-table-cell">
          <button class="v2-appointment-day -available"><span class="v2-appointment-day-number">3</span></button>
        </td>
        <td class="v2-appointment-table-cell">
          <button class="v2-appointment-day -available"><span class="v2-appointment-day-number">4</span></button>
        </td>
        <td class="v2-appointment-table-cell">
          <button class="v2-appointment-day"><span class="v2-appointment-day-number">5</span></button>
        </td>
        <td class="v2-appointment-table-cell">
          <button class="v2-appointment-day"><span class="v2-appointment-day-number">6</span></button>
        </td>
      </tr>
      <tr class="v2-appointment-table-row">
        <td class="v2-appointment-table-cell">
          <button class="v2-appointment-day -available"><span class="v2-appointment-day-number">7</span></button>
        </td>
        <td class="v2-appointment-table-cell">
          <button class="v2-appointment-day"><span class="v2-appointment-day-number">8</span></button>
        </td>
        <td class="v2-appointment-table-cell">
          <button class="v2-appointment-day -available"><span class="v2-appointment-day-number">9</span></button>
        </td>
        <td class="v2-appointment-table-cell">
          <button class="v2-appointment-day -available"><span class="v2-appointment-day-number">10</span></button>
        </td>
        <td class="v2-appointment-table-cell">
          <button class="v2-appointment-day"><span class="v2-appointment-day-number">11</span></button>
        </td>
        <td class="v2-appointment-table-cell">
          <button class="v2-appointment-day"><span class="v2-appointment-day-number">12</span></button>
        </td>
        <td class="v2-appointment-table-cell">
          <button class="v2-appointment-day"><span class="v2-appointment-day-number">13</span></button>
        </td>
      </tr>
      <tr class="v2-appointment-table-row">
        <td class="v2-appointment-table-cell">
          <button class="v2-appointment-day -available"><span class="v2-appointment-day-number">14</span></button>
        </td>
        <td class="v2-appointment-table-cell">
          <button class="v2-appointment-day -available"><span class="v2-appointment-day-number">15</span></button>
        </td>
        <td class="v2-appointment-table-cell">
          <button class="v2-appointment-day -selected"><span class="v2-appointment-day-number">16</span></button>
        </td>
        <td class="v2-appointment-table-cell">
          <button class="v2-appointment-day"><span class="v2-appointment-day-number">17</span></button>
        </td>
        <td class="v2-appointment-table-cell">
          <button class="v2-appointment-day -available"><span class="v2-appointment-day-number">18</span></button>
        </td>
        <td class="v2-appointment-table-cell">
          <button class="v2-appointment-day"><span class="v2-appointment-day-number">19</span></button>
        </td>
        <td class="v2-appointment-table-cell">
          <button class="v2-appointment-day"><span class="v2-appointment-day-number">20</span></button>
        </td>
      </tr>
      <tr class="v2-appointment-table-row">
        <td class="v2-appointment-table-cell">
          <button class="v2-appointment-day"><span class="v2-appointment-day-number">21</span></button>
        </td>
        <td class="v2-appointment-table-cell">
          <button class="v2-appointment-day -available"><span class="v2-appointment-day-number">22</span></button>
        </td>
        <td class="v2-appointment-table-cell">
          <button class="v2-appointment-day -available"><span class="v2-appointment-day-number">23</span></button>
        </td>
        <td class="v2-appointment-table-cell">
          <button class="v2-appointment-day -available"><span class="v2-appointment-day-number">24</span></button>
        </td>
        <td class="v2-appointment-table-cell">
          <button class="v2-appointment-day -available"><span class="v2-appointment-day-number">25</span></button>
        </td>
        <td class="v2-appointment-table-cell">
          <button class="v2-appointment-day"><span class="v2-appointment-day-number">26</span></button>
        </td>
        <td class="v2-appointment-table-cell">
          <button class="v2-appointment-day"><span class="v2-appointment-day-number">27</span></button>
        </td>
      </tr>
      <tr class="v2-appointment-table-row">
        <td class="v2-appointment-table-cell">
          <button class="v2-appointment-day -available"><span class="v2-appointment-day-number">28</span></button>
        </td>
        <td class="v2-appointment-table-cell">
          <button class="v2-appointment-day -available"><span class="v2-appointment-day-number">29</span></button>
        </td>
        <td class="v2-appointment-table-cell">
          <button class="v2-appointment-day -available"><span class="v2-appointment-day-number">30</span></button>
        </td>
        <td class="v2-appointment-table-cell">
          <button class="v2-appointment-day -available"><span class="v2-appointment-day-number">31</span></button>
        </td>
        <td class="v2-appointment-table-cell"></td>
        <td class="v2-appointment-table-cell"></td>
        <td class="v2-appointment-table-cell"></td>
      </tr>
    </tbody>
  </table>
  <div class="v2-appointment-warning-message">
    <div class="tls-simple-text -size-14 -color-secondary"><span class="ukvi-glyph-info"></span><span>By changing the selected services you can see more available options</span></div>
  </div>
</div>

.v2-appointment-calendar
  .tls-simple-text.-color-main.-weight-bold.-size-26
    span.ukvi-icon.ukvi-glyph-chevron-left.-medium
    span October 2022
    span.ukvi-icon.ukvi-glyph-chevron-right.-medium
  table.v2-appointment-table
    thead.v2-appointment-table-head
      tr
        th.v2-appointment-table-head-item Mon
        th.v2-appointment-table-head-item Tue
        th.v2-appointment-table-head-item Wed
        th.v2-appointment-table-head-item Thu
        th.v2-appointment-table-head-item Fri
        th.v2-appointment-table-head-item Sat
        th.v2-appointment-table-head-item Sun
    tbody.v2-appointment-table-body
      tr.v2-appointment-table-row
        td.v2-appointment-table-cell
        td.v2-appointment-table-cell
          button.v2-appointment-day.-available
            span.v2-appointment-day-number 1
        td.v2-appointment-table-cell
          button.v2-appointment-day.-available
            span.v2-appointment-day-number 2
        td.v2-appointment-table-cell
          button.v2-appointment-day.-available
            span.v2-appointment-day-number 3
        td.v2-appointment-table-cell
          button.v2-appointment-day.-available
            span.v2-appointment-day-number 4
        td.v2-appointment-table-cell
          button.v2-appointment-day
            span.v2-appointment-day-number 5
        td.v2-appointment-table-cell
          button.v2-appointment-day
            span.v2-appointment-day-number 6
      tr.v2-appointment-table-row
        td.v2-appointment-table-cell
          button.v2-appointment-day.-available
            span.v2-appointment-day-number 7
        td.v2-appointment-table-cell
          button.v2-appointment-day
            span.v2-appointment-day-number 8
        td.v2-appointment-table-cell
          button.v2-appointment-day.-available
            span.v2-appointment-day-number 9
        td.v2-appointment-table-cell
          button.v2-appointment-day.-available
            span.v2-appointment-day-number 10
        td.v2-appointment-table-cell
          button.v2-appointment-day
            span.v2-appointment-day-number 11
        td.v2-appointment-table-cell
          button.v2-appointment-day
            span.v2-appointment-day-number 12
        td.v2-appointment-table-cell
          button.v2-appointment-day
            span.v2-appointment-day-number 13
      tr.v2-appointment-table-row
        td.v2-appointment-table-cell
          button.v2-appointment-day.-available
            span.v2-appointment-day-number 14
        td.v2-appointment-table-cell
          button.v2-appointment-day.-available
            span.v2-appointment-day-number 15
        td.v2-appointment-table-cell
          button.v2-appointment-day.-selected
            span.v2-appointment-day-number 16
        td.v2-appointment-table-cell
          button.v2-appointment-day
            span.v2-appointment-day-number 17
        td.v2-appointment-table-cell
          button.v2-appointment-day.-available
            span.v2-appointment-day-number 18
        td.v2-appointment-table-cell
          button.v2-appointment-day
            span.v2-appointment-day-number 19
        td.v2-appointment-table-cell
          button.v2-appointment-day
            span.v2-appointment-day-number 20
      tr.v2-appointment-table-row
        td.v2-appointment-table-cell
          button.v2-appointment-day
            span.v2-appointment-day-number 21
        td.v2-appointment-table-cell
          button.v2-appointment-day.-available
            span.v2-appointment-day-number 22
        td.v2-appointment-table-cell
          button.v2-appointment-day.-available
            span.v2-appointment-day-number 23
        td.v2-appointment-table-cell
          button.v2-appointment-day.-available
            span.v2-appointment-day-number 24
        td.v2-appointment-table-cell
          button.v2-appointment-day.-available
            span.v2-appointment-day-number 25
        td.v2-appointment-table-cell
          button.v2-appointment-day
            span.v2-appointment-day-number 26
        td.v2-appointment-table-cell
          button.v2-appointment-day
            span.v2-appointment-day-number 27
      tr.v2-appointment-table-row
        td.v2-appointment-table-cell
          button.v2-appointment-day.-available
            span.v2-appointment-day-number 28
        td.v2-appointment-table-cell
          button.v2-appointment-day.-available
            span.v2-appointment-day-number 29
        td.v2-appointment-table-cell
          button.v2-appointment-day.-available
            span.v2-appointment-day-number 30
        td.v2-appointment-table-cell
          button.v2-appointment-day.-available
            span.v2-appointment-day-number 31
        td.v2-appointment-table-cell
        td.v2-appointment-table-cell
        td.v2-appointment-table-cell
  .v2-appointment-warning-message
    .tls-simple-text.-size-14.-color-secondary
      span.ukvi-glyph-info
      span By changing the selected services you can see more available options

Address

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

.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

Badge

<div class="tls-badge">
  <div class="tls-badge--icon">
    <div class="tls-circle -color-danger"></div>
  </div>
  <div class="tls-badge--content">
    <div class="tls-simple-text -color-danger -size-16">Simple Text
    </div>
  </div>
</div>
<div class="tls-badge">
  <div class="tls-badge--icon">
    <div class="tls-circle -color-warning"></div>
  </div>
  <div class="tls-badge--content">
    <div class="tls-simple-text -color-warning -size-16">Simple Text
    </div>
  </div>
</div>
<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>

.tls-badge
  .tls-badge--icon
    .tls-circle.-color-danger
  .tls-badge--content
    .tls-simple-text.-color-danger.-size-16.
      Simple Text
      
.tls-badge
  .tls-badge--icon
    .tls-circle.-color-warning
  .tls-badge--content
    .tls-simple-text.-color-warning.-size-16.
      Simple Text
      
.tls-badge
  .tls-badge--icon
    .tls-circle.-color-success
  .tls-badge--content
    .tls-simple-text.-color-success.-size-16.
      Simple Text

Buttons

Button dynamic

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

.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

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

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

Card

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

.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

Ukvi card img

<div class="ukvi-card-img">
  <div class="ukvi-card"><img class="card-img" src="/molecule/card/ukvi-card-img/casablanca.png"/></div>
</div>

.ukvi-card-img
  .ukvi-card
    img.card-img(src='/molecule/card/ukvi-card-img/casablanca.png')

Container for Citizen

<div class="tls-citizen-background">
  <div class="tls-citizen-container">
    <div class="tls-simple-text">Simple text</div>
  </div>
</div>

.tls-citizen-background
  .tls-citizen-container
    .tls-simple-text Simple text

Dropdown-list for Citizen

<div class="tls-citizen-dropdown-list">
  <div class="tls-simple-text">Simple text</div>
</div>

.tls-citizen-dropdown-list
  .tls-simple-text Simple text

Dropdown

<!-- Open dropdown-->
<div class="tls-dropdown"><a class="tls-link-dropdown">
    <div class="tls-link-dropdown--text">Open dropdown</div>
    <div class="tls-link-dropdown--icon"><i class="fa fa-chevron-up"></i></div></a>
  <div class="tls-dropdown--content">Shown content.
  </div>
</div>
<!-- Closed dropdown-->
<div class="tls-dropdown"><a class="tls-link-dropdown">
    <div class="tls-link-dropdown--text">Closed dropdown</div>
    <div class="tls-link-dropdown--icon"><i class="fa fa-chevron-down"></i></div></a>
  <div class="tls-dropdown--content hidden">Hidden content.
  </div>
</div>

//  Open dropdown
.tls-dropdown
  a.tls-link-dropdown
    .tls-link-dropdown--text Open dropdown
    .tls-link-dropdown--icon
      i.fa.fa-chevron-up
  .tls-dropdown--content.
    Shown content.
    
//  Closed dropdown
.tls-dropdown
  a.tls-link-dropdown
    .tls-link-dropdown--text Closed dropdown
    .tls-link-dropdown--icon
      i.fa.fa-chevron-down
  .tls-dropdown--content.hidden.
    Hidden content.

Dropdown-list

<div class="tls-dropdown-list">
  <div class="tls-dropdown-list--slot"><img class="tls-dropdown-list-slot--icon" src="./flag-en.png"/><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>

.tls-dropdown-list
  .tls-dropdown-list--slot
    img.tls-dropdown-list-slot--icon(src='./flag-en.png')
    a.tls-dropdown-text My dropdown text
  .tls-dropdown-list--slot
    .tls-dropdown-text A longer text to see the difference

Error info

<div class="tls-error-info">
  <div class="tls-error-info--content">
    <div class="tls-simple-text -size-16">Simple Text
    </div>
  </div>
</div>

.tls-error-info
  .tls-error-info--content
    .tls-simple-text.-size-16.
      Simple Text

Field

<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 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="val4" type="radio" name="rb"/>
      <label class="tls-input-check--label" for="val4">Value 1</label>
    </div>
    <div class="tls-input-check-group">
      <input class="tls-input-check" id="val5" type="radio" name="rb"/>
      <label class="tls-input-check--label" for="val5">Value 2</label>
    </div>
    <div class="tls-input-check-group">
      <input class="tls-input-check" id="val6" type="radio" name="rb"/>
      <label class="tls-input-check--label" for="val6">Value 3</label>
    </div>
  </div>
</div>
<div class="tls-field">
  <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="val11" type="checkbox"/>
      <label class="tls-input-check--label" for="val11">Value 1</label>
    </div>
    <div class="tls-input-check-group">
      <input class="tls-input-check" id="val22" type="checkbox"/>
      <label class="tls-input-check--label" for="val22">Value 2</label>
    </div>
    <div class="tls-input-check-group">
      <input class="tls-input-check" id="val33" type="checkbox"/>
      <label class="tls-input-check--label" for="val33">Value 3</label>
    </div>
  </div>
</div>
<div class="tls-field">
  <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="val44" type="radio" name="rb"/>
      <label class="tls-input-check--label" for="val44">Value 1</label>
    </div>
    <div class="tls-input-check-group">
      <input class="tls-input-check" id="val55" type="radio" name="rb"/>
      <label class="tls-input-check--label" for="val55">Value 2</label>
    </div>
    <div class="tls-input-check-group">
      <input class="tls-input-check" id="val66" type="radio" name="rb"/>
      <label class="tls-input-check--label" for="val66">Value 3</label>
    </div>
  </div>
</div>
<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-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 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>

.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-field.inline
  .tls-field--label-group
    label.tls-label Label
  .tls-field--area
    .tls-input-check-group
      input.tls-input-check#val4(type='radio', name='rb')
      label.tls-input-check--label(for='val4') Value 1
    .tls-input-check-group
      input.tls-input-check#val5(type='radio', name='rb')
      label.tls-input-check--label(for='val5') Value 2
    .tls-input-check-group
      input.tls-input-check#val6(type='radio', name='rb')
      label.tls-input-check--label(for='val6') Value 3
.tls-field
  .tls-field--label-group
    label.tls-label Label
  .tls-field--area
    .tls-input-check-group
      input.tls-input-check#val11(type='checkbox')
      label.tls-input-check--label(for='val11') Value 1
    .tls-input-check-group
      input.tls-input-check#val22(type='checkbox')
      label.tls-input-check--label(for='val22') Value 2
    .tls-input-check-group
      input.tls-input-check#val33(type='checkbox')
      label.tls-input-check--label(for='val33') Value 3
.tls-field
  .tls-field--label-group
    label.tls-label Label
  .tls-field--area
    .tls-input-check-group
      input.tls-input-check#val44(type='radio', name='rb')
      label.tls-input-check--label(for='val44') Value 1
    .tls-input-check-group
      input.tls-input-check#val55(type='radio', name='rb')
      label.tls-input-check--label(for='val55') Value 2
    .tls-input-check-group
      input.tls-input-check#val66(type='radio', name='rb')
      label.tls-input-check--label(for='val66') Value 3
.tls-field
  .tls-field--label
    label.tls-label Label
  .tls-field--area
    input.tls-input-text.valid(type='text')
.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-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

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

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

Heading 2 secondary

Heading 2 with subheading

<div class="tls-heading-2-secondary--group">
  <h2 class="tls-heading-2">Heading level 2</h2>
  <div class="tls-simple-text -size-17">Subtitle
  </div>
</div>

.tls-heading-2-secondary--group
  h2.tls-heading-2 Heading level 2
  .tls-simple-text.-size-17.
    Subtitle

Home text group

Slogan and main title

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

.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

Image info

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

.tls-image-info
  img.tls-image-info--img(src='/molecule/image-info/work.png')
  .tls-simple-text.
    Simple Text

Img title description

<div class="tls-img-title-desc">
  <div class="tls-img-title-desc-heading"><img class="tls-img-title-desc-img" src="/molecule/image-title-desc/step1.png"/>
    <h2 class="tls-heading-2">Heading level 2</h2>
  </div>
  <div class="tls-img-title-desc-desc">
    <div class="tls-simple-text -size-16">Read the <a href="page.php?pid=travel_purpose" target="_blank">list of documents</a> which need to be submitted with your visa application based on your travel purpose and prepare the documents carefully. Please always choose the correct travel purpose. <ul><li>list item</li></ul>
    </div>
  </div>
</div>

.tls-img-title-desc
  .tls-img-title-desc-heading
    img.tls-img-title-desc-img(src='/molecule/image-title-desc/step1.png')
    h2.tls-heading-2 Heading level 2
  .tls-img-title-desc-desc
    .tls-simple-text.-size-16
      | Read the 
      a(href='page.php?pid=travel_purpose', target='_blank') list of documents
      |  which need to be submitted with your visa application based on your travel purpose and prepare the documents carefully. Please always choose the correct travel purpose.
      ul
        li list item

Label mandatory

Label with mandatory star

<div class="tls-label-mandatory">
  <label class="tls-label">Label</label><span class="tls-simple-text -color-danger -weight-bold -size-16">*</span>
</div>

.tls-label-mandatory
  label.tls-label Label
  span.tls-simple-text.-color-danger.-weight-bold.-size-16 *

Legend

Legend mixin

<div class="tls-legend">
  <div class="tls-legend--bloc -color-main"></div>
  <div class="tls-simple-text -color-main -weight-bold -size-16">Legend with color
  </div>
</div>
<div class="tls-legend">
  <div class="tls-legend--bloc -color-primetime"></div>
  <div class="tls-simple-text -color-main -weight-bold -size-16">Legend with color
  </div>
</div>

.tls-legend
  .tls-legend--bloc.-color-main
  .tls-simple-text.-color-main.-weight-bold.-size-16.
    Legend with color
    
.tls-legend
  .tls-legend--bloc.-color-primetime
  .tls-simple-text.-color-main.-weight-bold.-size-16.
    Legend with color

Link-description

Link with a description

<a class="tls-link">My Link</a>
<div class="tls-simple-text -size-16">
  <p>A simple description</p>
</div>

a.tls-link My Link
.tls-simple-text.-size-16
  p A simple description

Link-group

<div class="tls-link-group">
  <div class="tls-link-group--slot"><a class="tls-link">My Link</a></div>
  <div class="tls-link-group--slot"><a class="tls-link">My Link</a></div>
</div>

.tls-link-group
  .tls-link-group--slot
    a.tls-link My Link
  .tls-link-group--slot
    a.tls-link My Link

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

ul.tls-link-list
  li.tls-link-list--slot
    a.tls-link My Link
  li.tls-link-list--slot
    a.tls-link My Link

Loading Component

Loading component

<div class="tls-loading-component">
  <div class="tls-loading-component--spinner"><i class="fas fa-spinner fa-pulse tls-loading-spinner"></i></div>
  <div class="tls-loading-component--text">
    <div class="tls-simple-text -color-main -weight-bold -size-16">Loading component...
    </div>
  </div>
</div>

.tls-loading-component
  .tls-loading-component--spinner
    i.fas.fa-spinner.fa-pulse.tls-loading-spinner
  .tls-loading-component--text
    .tls-simple-text.-color-main.-weight-bold.-size-16.
      Loading component...

Options

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

.tls-option-dropdown
  .tls-option-dropdown-title
    .tls-simple-text.-color-white.
      Show less
      
  .tls-option-dropdown-action
    .tls-simple-text.-color-white.
      -

Option item

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

.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

Pills

Pill image

<!-- Active-->
<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>
<!-- Inactive-->
<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>

//  Active
.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
    
//  Inactive
.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

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>

.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 ×

Social logo group

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

.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

Summary

Summary list item

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

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

Summary sublist item

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

.tls-summary-sublist-item
  .tls-summary-sublist-item--title
    .tls-simple-text.
      Sublist item
      
  .tls-summary-sublist-item--value
    .tls-simple-text.
      XX €

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>

.tls-summary-total-content
  .tls-summary-total--title
    .tls-simple-text.-color-white.
      Total
      
  .tls-summary-total--value
    .tls-simple-text.-color-white.
      XX €

Text underline

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

.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

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>

.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

Warning info

<div class="tls-warning-info">
  <div class="tls-simple-text -color-main -weight-bold">I show my fluffy belly but it's a trap! if you pet it i will tear up your hand. Shove bum in owner's face like camera lens meow meow we are 3 small kittens sleeping most of our time, we are around 15 weeks old i think, i don’t know i can’t count you call this cat food sleep everywhere, but not in my bed but my slave human didn't give me any food so i pooped on the floor attempt to leap between furniture but woefully miscalibrate and bellyflop onto the floor; what's your problem?
  </div>
</div>

.tls-warning-info
  .tls-simple-text.-color-main.-weight-bold.
    I show my fluffy belly but it's a trap! if you pet it i will tear up your hand. Shove bum in owner's face like camera lens meow meow we are 3 small kittens sleeping most of our time, we are around 15 weeks old i think, i don’t know i can’t count you call this cat food sleep everywhere, but not in my bed but my slave human didn't give me any food so i pooped on the floor attempt to leap between furniture but woefully miscalibrate and bellyflop onto the floor; what's your problem?

Dialog

Dialog content

<div>
  <h2>Content below</h2>
  <div class="ukvi-dialog-content">
    <div class="ukvi-text -s16">Text1</div>
    <div class="ukvi-text -s16">Text2</div>
  </div>
</div>

div
  h2 Content below
  .ukvi-dialog-content
    .ukvi-text.-s16 Text1
    .ukvi-text.-s16 Text2

Tabs

<div>
  <div class="ukvi-tabs-container">
    <div><span class="ukvi-tabs">first</span><span class="ukvi-tabs">second</span><span class="ukvi-tabs -active">third</span><span class="ukvi-tabs">fourth</span></div>
  </div>
</div>

div
  .ukvi-tabs-container
    div
      span.ukvi-tabs first
      span.ukvi-tabs second
      span.ukvi-tabs.-active third
      span.ukvi-tabs fourth

Ukvi tooltip

<div class="ukvi-tooltip">
  <div class="ukvi-tooltip-content">
    <div class="ukvi-text">Hover me</div>
    <div class="ukvi-tooltip-text">
      <div class="ukvi-text -s-14 -f-400 -color-white">My message</div>
    </div>
  </div>
</div>

.ukvi-tooltip
  .ukvi-tooltip-content
    .ukvi-text Hover me
    .ukvi-tooltip-text
      .ukvi-text.-s-14.-f-400.-color-white My message

UKVI Card

<div class="tls-ukvi-card">
  <div class="tls-ukvi-card-header">
    <div class="tls-ukvi-card-title">Sample Card Title</div>
  </div>
  <div class="tls-ukvi-card-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>
</div>

.tls-ukvi-card
  .tls-ukvi-card-header
    .tls-ukvi-card-title Sample Card Title
  .tls-ukvi-card-content
    .tls-simple-text.-color-main.-weight-bold.-size-16.
      Simple text
      
    .tls-simple-text.-weight-bold.-size-16.
      Simple text