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

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

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

Address

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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?