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

Card

Default card component. You can change the title background and text with regular colors classes (ex: .-positive .color-light)

There are three distinct parts:

  • .prismea-card--title
  • .prismea-card--slot / card body (.-scrollable add an overflow-y and a max-height of 176px)
  • .prismea-card--footer / card footer (used to add actions)
<div class="prismea-card">
  <div class="prismea-card--title">Card
  </div>
  <div class="prismea-card--slot">
    <div class="prismea-vertical-spacing-15">
      <div class="prismea-vertical-spacing-15--slot">
        <p class="prismea-text -text-sm -text-multiline">
          A text under
          two lines
        </p>
      </div>
      <div class="prismea-vertical-spacing-15--slot">
        <hr class="prismea-line"/>
      </div>
      <div class="prismea-vertical-spacing-15--slot">
        <ul class="prismea-vertical-spacing-15">
          <li class="prismea-vertical-spacing-15--slot">
            <div class="prismea-tuple -text-sm" style="margin-bottom: 10px;">
              <div class="prismea-tuple--slot">Left</div>
              <div class="prismea-tuple--slot">Right</div>
            </div>
          </li>
          <li class="prismea-vertical-spacing-15--slot">
            <div class="prismea-tuple -text-sm" style="margin-bottom: 10px;">
              <div class="prismea-tuple--slot">Left</div>
              <div class="prismea-tuple--slot"><span class="prismea-numeral">+33 8 36 65 65 65</span>
              </div>
            </div>
          </li>
          <li class="prismea-vertical-spacing-15--slot">
            <div class="prismea-tuple -text-sm" style="margin-bottom: 10px;">
              <div class="prismea-tuple--slot">Left</div>
              <div class="prismea-tuple--slot">Right</div>
            </div>
          </li>
        </ul>
      </div>
    </div>
  </div>
</div>
<div class="prismea-card">
  <div class="prismea-card--title">Card (with scrollable content)
  </div>
  <div class="prismea-card--slot -scrollable">
    <div class="prismea-vertical-spacing-15">
      <div class="prismea-vertical-spacing-15--slot">
        <p class="prismea-text -text-sm -text-multiline"><span>January (scroll me)</span>
        </p>
      </div>
      <div class="prismea-vertical-spacing-15--slot">
        <p class="prismea-text -text-sm -text-multiline"><span>February</span>
        </p>
      </div>
      <div class="prismea-vertical-spacing-15--slot">
        <p class="prismea-text -text-sm -text-multiline"><span>March</span>
        </p>
      </div>
      <div class="prismea-vertical-spacing-15--slot">
        <p class="prismea-text -text-sm -text-multiline"><span>April</span>
        </p>
      </div>
      <div class="prismea-vertical-spacing-15--slot">
        <p class="prismea-text -text-sm -text-multiline"><span>May</span>
        </p>
      </div>
      <div class="prismea-vertical-spacing-15--slot">
        <p class="prismea-text -text-sm -text-multiline"><span>June</span>
        </p>
      </div>
      <div class="prismea-vertical-spacing-15--slot">
        <p class="prismea-text -text-sm -text-multiline"><span>July</span>
        </p>
      </div>
      <div class="prismea-vertical-spacing-15--slot">
        <p class="prismea-text -text-sm -text-multiline"><span>August</span>
        </p>
      </div>
    </div>
  </div>
</div>
<div class="prismea-card">
  <div class="prismea-card--title -color-light -positive">Card (colored)
  </div>
  <div class="prismea-card--slot">
    <div class="prismea-vertical-spacing-15">
      <div class="prismea-vertical-spacing-15--slot">
        <p class="prismea-text -text-sm -text-multiline">
          A text under
          two lines
        </p>
      </div>
      <div class="prismea-vertical-spacing-15--slot">
        <hr class="prismea-line"/>
      </div>
      <div class="prismea-vertical-spacing-15--slot">
        <ul class="prismea-vertical-spacing-15">
          <li class="prismea-vertical-spacing-15--slot">
            <div class="prismea-tuple -text-sm" style="margin-bottom: 10px;">
              <div class="prismea-tuple--slot">Left</div>
              <div class="prismea-tuple--slot">Right</div>
            </div>
          </li>
          <li class="prismea-vertical-spacing-15--slot">
            <div class="prismea-tuple -text-sm" style="margin-bottom: 10px;">
              <div class="prismea-tuple--slot">Left</div>
              <div class="prismea-tuple--slot"><span class="prismea-numeral">+33 8 36 65 65 65</span>
              </div>
            </div>
          </li>
          <li class="prismea-vertical-spacing-15--slot">
            <div class="prismea-tuple -text-sm" style="margin-bottom: 10px;">
              <div class="prismea-tuple--slot">Left</div>
              <div class="prismea-tuple--slot">Right</div>
            </div>
          </li>
        </ul>
      </div>
    </div>
  </div>
</div>
<div class="prismea-card">
  <div class="prismea-card--title -color-light -negative">Card<span class="prismea-card--title-status">Blocked</span>
  </div>
  <div class="prismea-card--slot">
    <div class="prismea-vertical-spacing-15">
      <div class="prismea-vertical-spacing-15--slot">
        <p class="prismea-text -text-sm -text-multiline">
          A text under
          two lines
        </p>
      </div>
      <div class="prismea-vertical-spacing-15--slot">
        <hr class="prismea-line"/>
      </div>
      <div class="prismea-vertical-spacing-15--slot">
        <ul class="prismea-vertical-spacing-15">
          <li class="prismea-vertical-spacing-15--slot">
            <div class="prismea-tuple -text-sm" style="margin-bottom: 10px;">
              <div class="prismea-tuple--slot">Left</div>
              <div class="prismea-tuple--slot">Right</div>
            </div>
          </li>
          <li class="prismea-vertical-spacing-15--slot">
            <div class="prismea-tuple -text-sm" style="margin-bottom: 10px;">
              <div class="prismea-tuple--slot">Left</div>
              <div class="prismea-tuple--slot"><span class="prismea-numeral">+33 8 36 65 65 65</span>
              </div>
            </div>
          </li>
          <li class="prismea-vertical-spacing-15--slot">
            <div class="prismea-tuple -text-sm" style="margin-bottom: 10px;">
              <div class="prismea-tuple--slot">Left</div>
              <div class="prismea-tuple--slot">Right</div>
            </div>
          </li>
        </ul>
      </div>
    </div>
  </div>
</div>
<div class="prismea-card">
  <div class="prismea-card--title">Card with footer
  </div>
  <div class="prismea-card--slot">
    <div class="prismea-vertical-spacing-15">
      <div class="prismea-vertical-spacing-15--slot">
        <p class="prismea-text -text-sm -text-multiline">
          A text under
          two lines
        </p>
      </div>
      <div class="prismea-vertical-spacing-15--slot">
        <hr class="prismea-line"/>
      </div>
      <div class="prismea-vertical-spacing-15--slot">
        <ul class="prismea-vertical-spacing-15">
          <li class="prismea-vertical-spacing-15--slot">
            <div class="prismea-tuple -text-sm" style="margin-bottom: 10px;">
              <div class="prismea-tuple--slot">Left</div>
              <div class="prismea-tuple--slot">Right</div>
            </div>
          </li>
          <li class="prismea-vertical-spacing-15--slot">
            <div class="prismea-tuple -text-sm" style="margin-bottom: 10px;">
              <div class="prismea-tuple--slot">Left</div>
              <div class="prismea-tuple--slot"><span class="prismea-numeral">+33 8 36 65 65 65</span>
              </div>
            </div>
          </li>
          <li class="prismea-vertical-spacing-15--slot">
            <div class="prismea-tuple -text-sm" style="margin-bottom: 10px;">
              <div class="prismea-tuple--slot">Left</div>
              <div class="prismea-tuple--slot">Right</div>
            </div>
          </li>
        </ul>
      </div>
    </div>
  </div>
  <div class="prismea-card--footer -color-negative">
    <div class="prismea-horizontal-spacing-10 -middle -justify-middle">
      <div class="prismea-horizontal-spacing-10--slot"><i class="prismea-icon -x1 prismea-glyph-40_delete"></i>
      </div>
      <div class="prismea-horizontal-spacing-10--slot">
        <p class="prismea-text">Push the red button
        </p>
      </div>
    </div>
    <div class="prismea-card--footer-hidden-text">
      <div class="prismea-vertical-spacing-10 -middle -justify-middle">
        <div class="prismea-vertical-spacing-10--slot">
          <p class="prismea-text">You're about to push the red button, are you sure?
          </p>
        </div>
        <div class="prismea-vertical-spacing-10--slot">
          <div class="prismea-horizontal-spacing-10 -justify-middle">
            <div class="prismea-horizontal-spacing-10--slot">
              <button class="prismea-button -short  -pill">Yes
              </button>
            </div>
            <div class="prismea-horizontal-spacing-10--slot">
              <button class="prismea-button -short  -pill">No
              </button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
<div class="prismea-card">
  <div class="prismea-card--title">Card with footer
  </div>
  <div class="prismea-card--slot">
    <div class="prismea-vertical-spacing-15">
      <div class="prismea-vertical-spacing-15--slot">
        <p class="prismea-text -text-sm -text-multiline">
          A text under
          two lines
        </p>
      </div>
      <div class="prismea-vertical-spacing-15--slot">
        <hr class="prismea-line"/>
      </div>
      <div class="prismea-vertical-spacing-15--slot">
        <ul class="prismea-vertical-spacing-15">
          <li class="prismea-vertical-spacing-15--slot">
            <div class="prismea-tuple -text-sm" style="margin-bottom: 10px;">
              <div class="prismea-tuple--slot">Left</div>
              <div class="prismea-tuple--slot">Right</div>
            </div>
          </li>
          <li class="prismea-vertical-spacing-15--slot">
            <div class="prismea-tuple -text-sm" style="margin-bottom: 10px;">
              <div class="prismea-tuple--slot">Left</div>
              <div class="prismea-tuple--slot"><span class="prismea-numeral">+33 8 36 65 65 65</span>
              </div>
            </div>
          </li>
          <li class="prismea-vertical-spacing-15--slot">
            <div class="prismea-tuple -text-sm" style="margin-bottom: 10px;">
              <div class="prismea-tuple--slot">Left</div>
              <div class="prismea-tuple--slot">Right</div>
            </div>
          </li>
        </ul>
      </div>
    </div>
  </div>
  <div class="prismea-card--footer -open -color-negative">
    <div class="prismea-horizontal-spacing-10 -middle -justify-middle">
      <div class="prismea-horizontal-spacing-10--slot"><i class="prismea-icon -x1 prismea-glyph-40_delete"></i>
      </div>
      <div class="prismea-horizontal-spacing-10--slot">
        <p class="prismea-text">Push the red button
        </p>
      </div>
    </div>
    <div class="prismea-card--footer-hidden-text">
      <div class="prismea-vertical-spacing-10 -middle -justify-middle">
        <div class="prismea-vertical-spacing-10--slot">
          <p class="prismea-text">You're about to push the red button, are you sure?
          </p>
        </div>
        <div class="prismea-vertical-spacing-10--slot">
          <div class="prismea-horizontal-spacing-10 -justify-middle">
            <div class="prismea-horizontal-spacing-10--slot">
              <button class="prismea-button -short  -pill">Yes
              </button>
            </div>
            <div class="prismea-horizontal-spacing-10--slot">
              <button class="prismea-button -short  -pill">No
              </button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
.prismea-card
  .prismea-card--title.
    Card
    
  .prismea-card--slot
    .prismea-vertical-spacing-15
      .prismea-vertical-spacing-15--slot
        p.prismea-text.-text-sm.-text-multiline.
          
          A text under two lines
          
      .prismea-vertical-spacing-15--slot
        hr.prismea-line
      .prismea-vertical-spacing-15--slot
        ul.prismea-vertical-spacing-15
          li.prismea-vertical-spacing-15--slot
            .prismea-tuple.-text-sm(style='margin-bottom: 10px;')
              .prismea-tuple--slot Left
              .prismea-tuple--slot Right
          li.prismea-vertical-spacing-15--slot
            .prismea-tuple.-text-sm(style='margin-bottom: 10px;')
              .prismea-tuple--slot Left
              .prismea-tuple--slot
                span.prismea-numeral +33 8 36 65 65 65
          li.prismea-vertical-spacing-15--slot
            .prismea-tuple.-text-sm(style='margin-bottom: 10px;')
              .prismea-tuple--slot Left
              .prismea-tuple--slot Right
.prismea-card
  .prismea-card--title.
    Card (with scrollable content)
    
  .prismea-card--slot.-scrollable
    .prismea-vertical-spacing-15
      .prismea-vertical-spacing-15--slot
        p.prismea-text.-text-sm.-text-multiline
          span January (scroll me)
      .prismea-vertical-spacing-15--slot
        p.prismea-text.-text-sm.-text-multiline
          span February
      .prismea-vertical-spacing-15--slot
        p.prismea-text.-text-sm.-text-multiline
          span March
      .prismea-vertical-spacing-15--slot
        p.prismea-text.-text-sm.-text-multiline
          span April
      .prismea-vertical-spacing-15--slot
        p.prismea-text.-text-sm.-text-multiline
          span May
      .prismea-vertical-spacing-15--slot
        p.prismea-text.-text-sm.-text-multiline
          span June
      .prismea-vertical-spacing-15--slot
        p.prismea-text.-text-sm.-text-multiline
          span July
      .prismea-vertical-spacing-15--slot
        p.prismea-text.-text-sm.-text-multiline
          span August
.prismea-card
  .prismea-card--title.-color-light.-positive.
    Card (colored)
    
  .prismea-card--slot
    .prismea-vertical-spacing-15
      .prismea-vertical-spacing-15--slot
        p.prismea-text.-text-sm.-text-multiline.
          
          A text under two lines
          
      .prismea-vertical-spacing-15--slot
        hr.prismea-line
      .prismea-vertical-spacing-15--slot
        ul.prismea-vertical-spacing-15
          li.prismea-vertical-spacing-15--slot
            .prismea-tuple.-text-sm(style='margin-bottom: 10px;')
              .prismea-tuple--slot Left
              .prismea-tuple--slot Right
          li.prismea-vertical-spacing-15--slot
            .prismea-tuple.-text-sm(style='margin-bottom: 10px;')
              .prismea-tuple--slot Left
              .prismea-tuple--slot
                span.prismea-numeral +33 8 36 65 65 65
          li.prismea-vertical-spacing-15--slot
            .prismea-tuple.-text-sm(style='margin-bottom: 10px;')
              .prismea-tuple--slot Left
              .prismea-tuple--slot Right
.prismea-card
  .prismea-card--title.-color-light.-negative
    | Card
    span.prismea-card--title-status Blocked
  .prismea-card--slot
    .prismea-vertical-spacing-15
      .prismea-vertical-spacing-15--slot
        p.prismea-text.-text-sm.-text-multiline.
          
          A text under two lines
          
      .prismea-vertical-spacing-15--slot
        hr.prismea-line
      .prismea-vertical-spacing-15--slot
        ul.prismea-vertical-spacing-15
          li.prismea-vertical-spacing-15--slot
            .prismea-tuple.-text-sm(style='margin-bottom: 10px;')
              .prismea-tuple--slot Left
              .prismea-tuple--slot Right
          li.prismea-vertical-spacing-15--slot
            .prismea-tuple.-text-sm(style='margin-bottom: 10px;')
              .prismea-tuple--slot Left
              .prismea-tuple--slot
                span.prismea-numeral +33 8 36 65 65 65
          li.prismea-vertical-spacing-15--slot
            .prismea-tuple.-text-sm(style='margin-bottom: 10px;')
              .prismea-tuple--slot Left
              .prismea-tuple--slot Right
.prismea-card
  .prismea-card--title.
    Card with footer
    
  .prismea-card--slot
    .prismea-vertical-spacing-15
      .prismea-vertical-spacing-15--slot
        p.prismea-text.-text-sm.-text-multiline.
          
          A text under two lines
          
      .prismea-vertical-spacing-15--slot
        hr.prismea-line
      .prismea-vertical-spacing-15--slot
        ul.prismea-vertical-spacing-15
          li.prismea-vertical-spacing-15--slot
            .prismea-tuple.-text-sm(style='margin-bottom: 10px;')
              .prismea-tuple--slot Left
              .prismea-tuple--slot Right
          li.prismea-vertical-spacing-15--slot
            .prismea-tuple.-text-sm(style='margin-bottom: 10px;')
              .prismea-tuple--slot Left
              .prismea-tuple--slot
                span.prismea-numeral +33 8 36 65 65 65
          li.prismea-vertical-spacing-15--slot
            .prismea-tuple.-text-sm(style='margin-bottom: 10px;')
              .prismea-tuple--slot Left
              .prismea-tuple--slot Right
  .prismea-card--footer.-color-negative
    .prismea-horizontal-spacing-10.-middle.-justify-middle
      .prismea-horizontal-spacing-10--slot
        i.prismea-icon.-x1.prismea-glyph-40_delete
      .prismea-horizontal-spacing-10--slot
        p.prismea-text.
          Push the red button
          
    .prismea-card--footer-hidden-text
      .prismea-vertical-spacing-10.-middle.-justify-middle
        .prismea-vertical-spacing-10--slot
          p.prismea-text.
            You're about to push the red button, are you sure?
            
        .prismea-vertical-spacing-10--slot
          .prismea-horizontal-spacing-10.-justify-middle
            .prismea-horizontal-spacing-10--slot
              button.prismea-button.-short.-pill.
                Yes
                
            .prismea-horizontal-spacing-10--slot
              button.prismea-button.-short.-pill.
                No
                
.prismea-card
  .prismea-card--title.
    Card with footer
    
  .prismea-card--slot
    .prismea-vertical-spacing-15
      .prismea-vertical-spacing-15--slot
        p.prismea-text.-text-sm.-text-multiline.
          
          A text under two lines
          
      .prismea-vertical-spacing-15--slot
        hr.prismea-line
      .prismea-vertical-spacing-15--slot
        ul.prismea-vertical-spacing-15
          li.prismea-vertical-spacing-15--slot
            .prismea-tuple.-text-sm(style='margin-bottom: 10px;')
              .prismea-tuple--slot Left
              .prismea-tuple--slot Right
          li.prismea-vertical-spacing-15--slot
            .prismea-tuple.-text-sm(style='margin-bottom: 10px;')
              .prismea-tuple--slot Left
              .prismea-tuple--slot
                span.prismea-numeral +33 8 36 65 65 65
          li.prismea-vertical-spacing-15--slot
            .prismea-tuple.-text-sm(style='margin-bottom: 10px;')
              .prismea-tuple--slot Left
              .prismea-tuple--slot Right
  .prismea-card--footer.-open.-color-negative
    .prismea-horizontal-spacing-10.-middle.-justify-middle
      .prismea-horizontal-spacing-10--slot
        i.prismea-icon.-x1.prismea-glyph-40_delete
      .prismea-horizontal-spacing-10--slot
        p.prismea-text.
          Push the red button
          
    .prismea-card--footer-hidden-text
      .prismea-vertical-spacing-10.-middle.-justify-middle
        .prismea-vertical-spacing-10--slot
          p.prismea-text.
            You're about to push the red button, are you sure?
            
        .prismea-vertical-spacing-10--slot
          .prismea-horizontal-spacing-10.-justify-middle
            .prismea-horizontal-spacing-10--slot
              button.prismea-button.-short.-pill.
                Yes
                
            .prismea-horizontal-spacing-10--slot
              button.prismea-button.-short.-pill.
                No
                

Contextual menu

<div class="prismea-contextual-menu ion--close">
  <div class="prismea-contextual-menu--button">
    <button class="prismea-contextual-button"><i class="prismea-contextual-button--icon prismea-glyph-16_document"></i></button>
  </div>
  <ul class="prismea-contextual-menu--menu">
    <li>
      <button class="prismea-contextual-menu--item">First</button>
    </li>
    <li>
      <button class="prismea-contextual-menu--item">Second</button>
    </li>
    <li>
      <button class="prismea-contextual-menu--item">Third</button>
    </li>
  </ul>
</div>
<div class="prismea-contextual-menu ion--open">
  <div class="prismea-contextual-menu--button">
    <button class="prismea-contextual-button"><i class="prismea-contextual-button--icon prismea-glyph-16_document"></i></button>
  </div>
  <ul class="prismea-contextual-menu--menu">
    <li>
      <button class="prismea-contextual-menu--item -disabled">First</button>
    </li>
    <li>
      <button class="prismea-contextual-menu--item">Second</button>
    </li>
    <li>
      <button class="prismea-contextual-menu--item">Third</button>
    </li>
  </ul>
</div>
.prismea-contextual-menu.ion--close
  .prismea-contextual-menu--button
    button.prismea-contextual-button
      i.prismea-contextual-button--icon.prismea-glyph-16_document
  ul.prismea-contextual-menu--menu
    li
      button.prismea-contextual-menu--item First
    li
      button.prismea-contextual-menu--item Second
    li
      button.prismea-contextual-menu--item Third
.prismea-contextual-menu.ion--open
  .prismea-contextual-menu--button
    button.prismea-contextual-button
      i.prismea-contextual-button--icon.prismea-glyph-16_document
  ul.prismea-contextual-menu--menu
    li
      button.prismea-contextual-menu--item.-disabled First
    li
      button.prismea-contextual-menu--item Second
    li
      button.prismea-contextual-menu--item Third

Contextual Profile Menu

Has the same feature of the default contextual menu.

<div class="prismea-contextual-profile-menu">
  <div class="prismea-contextual-menu ion--close">
    <div class="prismea-contextual-menu--button">
      <div class="prismea-contextual-profile-menu--card">
        <div>
          <div class="prismea-avatar -rounded"><img src="https://images.unsplash.com/photo-1541298645675-6cc8e127934d?ixlib=rb-1.2.1&amp;auto=format&amp;fit=crop&amp;w=400&amp;h=400&amp;q=80"/>
          </div><span class="prismea-contextual-profile-menu--username">Miles Morales</span>
          <div class="prismea-contextual-profile-menu--caret"><i class="prismea-glyph-12_caret-down"></i></div>
        </div>
      </div>
    </div>
    <ul class="prismea-contextual-menu--menu">
      <li>
        <button class="prismea-contextual-menu--item">First</button>
      </li>
      <li>
        <button class="prismea-contextual-menu--item">Second</button>
      </li>
      <li>
        <button class="prismea-contextual-menu--item">Third</button>
      </li>
    </ul>
  </div>
</div>
<div class="prismea-contextual-profile-menu">
  <div class="prismea-contextual-menu ion--close">
    <div class="prismea-contextual-menu--button">
      <div class="prismea-contextual-profile-menu--card">
        <div>
          <div class="prismea-avatar -circle">
            <p class="prismea-text">AL</p>
          </div><span class="prismea-contextual-profile-menu--username">Miles Morales</span>
          <div class="prismea-contextual-profile-menu--caret"><i class="prismea-glyph-12_caret-down"></i></div>
        </div>
      </div>
    </div>
    <ul class="prismea-contextual-menu--menu">
      <li>
        <button class="prismea-contextual-menu--item">First</button>
      </li>
      <li>
        <button class="prismea-contextual-menu--item">Second</button>
      </li>
      <li>
        <button class="prismea-contextual-menu--item">Third</button>
      </li>
    </ul>
  </div>
</div>
<div class="prismea-contextual-profile-menu">
  <div class="prismea-contextual-menu ion--open">
    <div class="prismea-contextual-menu--button">
      <div class="prismea-contextual-profile-menu--card">
        <div>
          <div class="prismea-avatar -rounded">
            <p class="prismea-text">AL</p>
          </div><span class="prismea-contextual-profile-menu--username">Miles Morales</span>
          <div class="prismea-contextual-profile-menu--caret"><i class="prismea-glyph-12_caret-down"></i></div>
        </div>
      </div>
    </div>
    <ul class="prismea-contextual-menu--menu">
      <li>
        <button class="prismea-contextual-menu--item">First</button>
      </li>
      <li>
        <button class="prismea-contextual-menu--item">Second</button>
      </li>
      <li>
        <button class="prismea-contextual-menu--item">Third</button>
      </li>
    </ul>
  </div>
</div>
.prismea-contextual-profile-menu
  .prismea-contextual-menu.ion--close
    .prismea-contextual-menu--button
      .prismea-contextual-profile-menu--card
        div
          .prismea-avatar.-rounded
            img(src='https://images.unsplash.com/photo-1541298645675-6cc8e127934d?ixlib=rb-1.2.1&auto=format&fit=crop&w=400&h=400&q=80')
          span.prismea-contextual-profile-menu--username Miles Morales
          .prismea-contextual-profile-menu--caret
            i.prismea-glyph-12_caret-down
    ul.prismea-contextual-menu--menu
      li
        button.prismea-contextual-menu--item First
      li
        button.prismea-contextual-menu--item Second
      li
        button.prismea-contextual-menu--item Third
.prismea-contextual-profile-menu
  .prismea-contextual-menu.ion--close
    .prismea-contextual-menu--button
      .prismea-contextual-profile-menu--card
        div
          .prismea-avatar.-circle
            p.prismea-text AL
          span.prismea-contextual-profile-menu--username Miles Morales
          .prismea-contextual-profile-menu--caret
            i.prismea-glyph-12_caret-down
    ul.prismea-contextual-menu--menu
      li
        button.prismea-contextual-menu--item First
      li
        button.prismea-contextual-menu--item Second
      li
        button.prismea-contextual-menu--item Third
.prismea-contextual-profile-menu
  .prismea-contextual-menu.ion--open
    .prismea-contextual-menu--button
      .prismea-contextual-profile-menu--card
        div
          .prismea-avatar.-rounded
            p.prismea-text AL
          span.prismea-contextual-profile-menu--username Miles Morales
          .prismea-contextual-profile-menu--caret
            i.prismea-glyph-12_caret-down
    ul.prismea-contextual-menu--menu
      li
        button.prismea-contextual-menu--item First
      li
        button.prismea-contextual-menu--item Second
      li
        button.prismea-contextual-menu--item Third

Field

<div class="prismea-field">
  <div class="prismea-field--slot">
    <label class="prismea-label">Label</label>
  </div>
  <div class="prismea-field--slot">
    <input class="prismea-input-text  " type="text" placeholder="Mighty text"/>
  </div>
</div>
<div class="prismea-field">
  <div class="prismea-field--slot">
    <label class="prismea-label">Label</label>
  </div>
  <div class="prismea-field--slot">
    <textarea class="prismea-textarea" placeholder="Textarea" rows="4"></textarea>
  </div>
</div>
.prismea-field
  .prismea-field--slot
    label.prismea-label Label
  .prismea-field--slot
    input.prismea-input-text(type='text', placeholder='Mighty text')
.prismea-field
  .prismea-field--slot
    label.prismea-label Label
  .prismea-field--slot
    textarea.prismea-textarea(placeholder='Textarea', rows='4')

Input group

States ion--unfocus and ion--focus should be set dynamically by a JavaScript framework to manage focus.

<div class="prismea-input-group ion--unfocus">
  <div class="prismea-input-group--slot -expand ion--slot-left">
    <input class="prismea-input-text  " type="text" placeholder="Mighty text"/>
  </div>
  <div class="prismea-input-group--slot ion--slot-right">
    <button class="prismea-button">Button
    </button>
  </div>
</div>
<div class="prismea-input-group ion--focus">
  <div class="prismea-input-group--slot -expand ion--slot-left">
    <input class="prismea-input-text  " type="text" placeholder="Mighty text"/>
  </div>
  <div class="prismea-input-group--slot ion--slot-right">
    <button class="prismea-button">Button
    </button>
  </div>
</div>
<div class="prismea-input-group ion--unfocus ion--sm">
  <div class="prismea-input-group--slot -expand ion--slot-left">
    <input class="prismea-input-text -secondary  " type="search" placeholder="Mighty text"/>
  </div>
  <div class="prismea-input-group--slot ion--slot-right">
    <button class="prismea-button -icon "><i class="prismea-glyph-12_search"></i>
    </button>
  </div>
</div>
<div class="prismea-input-group ion--focus ion--sm">
  <div class="prismea-input-group--slot -expand ion--slot-left">
    <input class="prismea-input-text -secondary  " type="search" placeholder="Mighty text"/>
  </div>
  <div class="prismea-input-group--slot ion--slot-right">
    <button class="prismea-button -icon "><i class="prismea-glyph-12_search"></i>
    </button>
  </div>
</div>
.prismea-input-group.ion--unfocus
  .prismea-input-group--slot.-expand.ion--slot-left
    input.prismea-input-text(type='text', placeholder='Mighty text')
  .prismea-input-group--slot.ion--slot-right
    button.prismea-button.
      Button
      
.prismea-input-group.ion--focus
  .prismea-input-group--slot.-expand.ion--slot-left
    input.prismea-input-text(type='text', placeholder='Mighty text')
  .prismea-input-group--slot.ion--slot-right
    button.prismea-button.
      Button
      
.prismea-input-group.ion--unfocus.ion--sm
  .prismea-input-group--slot.-expand.ion--slot-left
    input.prismea-input-text.-secondary(type='search', placeholder='Mighty text')
  .prismea-input-group--slot.ion--slot-right
    button.prismea-button.-icon
      i.prismea-glyph-12_search
.prismea-input-group.ion--focus.ion--sm
  .prismea-input-group--slot.-expand.ion--slot-left
    input.prismea-input-text.-secondary(type='search', placeholder='Mighty text')
  .prismea-input-group--slot.ion--slot-right
    button.prismea-button.-icon
      i.prismea-glyph-12_search

Log line

<div class="prismea-log-line">
  <div class="prismea-log-line--uri">/api/v1/path/to/a/specific/resource</div>
  <div class="prismea-log-line--date">21 / 12 / 2019 - 09:38 (654ms)
  </div>
</div>
<div class="prismea-log-line">
  <div class="prismea-log-line--uri">/api/v1/path/to/a/specific/resource</div>
  <div class="prismea-log-line--date">21 / 12 / 2019 - 09:38 (654ms) <span class="prismea-log-line--date--icon"><i class="prismea-icon prismea-glyph-12_pending"></i></span>
  </div>
</div>
.prismea-log-line
  .prismea-log-line--uri /api/v1/path/to/a/specific/resource
  .prismea-log-line--date.
    21 / 12 / 2019 - 09:38 (654ms)
    
.prismea-log-line
  .prismea-log-line--uri /api/v1/path/to/a/specific/resource
  .prismea-log-line--date
    | 21 / 12 / 2019 - 09:38 (654ms) 
    span.prismea-log-line--date--icon
      i.prismea-icon.prismea-glyph-12_pending

Label Switch

<div class="prismea-label-switch">
  <div class="prismea-label-switch--label">
    <p class="prismea-text">In gravida diam eu felis pharetra, eget iaculis mauris finibus.</p>
  </div>
  <div class="prismea-label-switch--switch">
    <button class="prismea-switch -off -with-label" role="switch" aria-checked="false" aria-label="Switch"><span class="prismea-switch--label -color-light">Off</span><i class="prismea-switch--button"></i>
    </button>
  </div>
</div>
.prismea-label-switch
  .prismea-label-switch--label
    p.prismea-text In gravida diam eu felis pharetra, eget iaculis mauris finibus.
  .prismea-label-switch--switch
    button.prismea-switch.-off.-with-label(role='switch', aria-checked='false', aria-label='Switch')
      span.prismea-switch--label.-color-light Off
      i.prismea-switch--button

Table

Table

A table can be:

  • -equivalent: all cells have the same proportions, if not, it will be automatic
  • -striped: odd body lines are in another color than even

Table rows can have a pending status if some requests are done for the entire row. For that you can add the class -pending to the prismea-table--cell

You can set an expandable row by adding a second tr with ion--expandable class. However the behaviour will be set on the JS side.

A table cell content element can have a search-text-filter class that has an effect on the cursor shape and on an eventual icon's color.
The same element can also have an is-focused or an is-set class, corresponding to possible search states.

<h2>Auto</h2>
<table class="prismea-table -text-sm">
  <thead class="prismea-table--head">
    <tr class="prismea-table--line">
      <th class="prismea-table--cell">Column A</th>
      <th class="prismea-table--cell -center">Column B</th>
      <th class="prismea-table--cell -center">Column C</th>
      <th class="prismea-table--cell -center">Column D</th>
      <th class="prismea-table--cell -center">Column E</th>
      <th class="prismea-table--cell -center"></th>
    </tr>
  </thead>
  <tbody class="prismea-table--body">
    <tr class="ion--hoverable prismea-table--line prismea-table--line .">
      <td class="prismea-table--cell"><a class="prismea-link -hoverable" href="#">Line A1</a>
      </td>
      <td class="prismea-table--cell -center"><span class="prismea-numeral">Line B1 numeral</span></td>
      <td class="prismea-table--cell -center">
        <button class="prismea-switch -on " role="switch" aria-checked="true" aria-label="Switch"><i class="prismea-switch--button"></i>
        </button>
      </td>
      <td class="prismea-table--cell -center"><span class="prismea-numeral prismea-color -color-positive">Line D1</span></td>
      <td class="prismea-table--cell -center">
        <div class="prismea-contextual-menu ion--close">
          <div class="prismea-contextual-menu--button">
            <button class="prismea-contextual-button"><i class="prismea-contextual-button--icon prismea-glyph-16_document"></i></button>
          </div>
          <ul class="prismea-contextual-menu--menu">
            <li>
              <button class="prismea-contextual-menu--item">First</button>
            </li>
            <li>
              <button class="prismea-contextual-menu--item">Second</button>
            </li>
            <li>
              <button class="prismea-contextual-menu--item">Third</button>
            </li>
          </ul>
        </div>
      </td>
      <td class="prismea-table--cell -center -action--cell">
        <div>
          <button class="prismea-icon-button"><i class="prismea-icon-button--icon prismea-glyph-24_download"></i></button>
          <button class="prismea-icon-button"><i class="prismea-icon-button--icon prismea-glyph-24_update"></i></button>
          <button class="prismea-icon-button"><i class="prismea-icon-button--icon prismea-glyph-24_tools"></i></button>
        </div>
      </td>
    </tr>
    <tr class="prismea-table--line ion--hoverable">
      <td class="prismea-table--cell">Line A2</td>
      <td class="prismea-table--cell -center"><span class="prismea-numeral">Line B2 numeral</span></td>
      <td class="prismea-table--cell -center">
        <button class="prismea-switch -off -pending " role="switch" aria-checked="false" aria-label="Switch" title="Pending …"><i class="prismea-switch--button"></i>
        </button>
      </td>
      <td class="prismea-table--cell -center"><span class="prismea-numeral prismea-color -color-negative">Line D2</span></td>
      <td class="prismea-table--cell -center">
        <div class="prismea-contextual-menu ion--close">
          <div class="prismea-contextual-menu--button">
            <button class="prismea-contextual-button -faded"><i class="prismea-contextual-button--icon prismea-glyph-16_document"></i></button>
          </div>
          <ul class="prismea-contextual-menu--menu">
            <li>
              <button class="prismea-contextual-menu--item">First</button>
            </li>
            <li>
              <button class="prismea-contextual-menu--item">Second</button>
            </li>
            <li>
              <button class="prismea-contextual-menu--item">Third</button>
            </li>
          </ul>
        </div>
      </td>
      <td class="prismea-table--cell -center -action--cell">
        <div>
          <button class="prismea-icon-button"><i class="prismea-icon-button--icon prismea-glyph-24_download"></i></button>
          <button class="prismea-icon-button"><i class="prismea-icon-button--icon prismea-glyph-24_update"></i></button>
          <button class="prismea-icon-button"><i class="prismea-icon-button--icon prismea-glyph-24_tools"></i></button>
        </div>
      </td>
    </tr>
    <tr class="prismea-table--line ion--hoverable -ion--staggered-4">
      <td class="prismea-table--cell">Line A3</td>
      <td class="prismea-table--cell -center"><span class="prismea-numeral">Line B3 numeral</span></td>
      <td class="prismea-table--cell -center">
        <button class="prismea-switch -off " role="switch" aria-checked="false" aria-label="Switch"><i class="prismea-switch--button"></i>
        </button>
      </td>
      <td class="prismea-table--cell -center"><span class="prismea-numeral prismea-color -color-neutral">Line D3</span></td>
      <td class="prismea-table--cell -center">
        <div class="prismea-contextual-menu ion--close">
          <div class="prismea-contextual-menu--button">
            <button class="prismea-contextual-button -invisible"><i class="prismea-contextual-button--icon prismea-glyph-16_document"></i></button>
          </div>
          <ul class="prismea-contextual-menu--menu">
            <li>
              <button class="prismea-contextual-menu--item">First</button>
            </li>
            <li>
              <button class="prismea-contextual-menu--item">Second</button>
            </li>
            <li>
              <button class="prismea-contextual-menu--item">Third</button>
            </li>
          </ul>
        </div>
      </td>
      <td class="prismea-table--cell -center -action--cell">
        <div>
          <button class="prismea-icon-button -invisible -selected"><i class="prismea-icon-button--icon prismea-glyph-24_download"></i></button>
          <button class="prismea-icon-button -invisible"><i class="prismea-icon-button--icon prismea-glyph-24_update"></i></button>
          <button class="prismea-icon-button -invisible"><i class="prismea-icon-button--icon prismea-glyph-24_tools"></i></button>
        </div>
      </td>
    </tr>
  </tbody>
</table>
<h2>Disabled Table</h2>
<table class="prismea-table -text-sm -disabled">
  <thead class="prismea-table--head">
    <tr class="prismea-table--line">
      <th class="prismea-table--cell">Column A</th>
      <th class="prismea-table--cell -center">Column B</th>
      <th class="prismea-table--cell -center">Column C</th>
      <th class="prismea-table--cell -center">Column D</th>
      <th class="prismea-table--cell -center">Column E</th>
      <th class="prismea-table--cell -center"></th>
    </tr>
  </thead>
  <tbody class="prismea-table--body">
    <tr class="ion--hoverable prismea-table--line prismea-table--line .">
      <td class="prismea-table--cell"><a class="prismea-link -hoverable" href="#">Line A1</a>
      </td>
      <td class="prismea-table--cell -center"><span class="prismea-numeral">Line B1 numeral</span></td>
      <td class="prismea-table--cell -center">
        <button class="prismea-switch -on " role="switch" aria-checked="true" aria-label="Switch"><i class="prismea-switch--button"></i>
        </button>
      </td>
      <td class="prismea-table--cell -center"><span class="prismea-numeral prismea-color -color-positive">Line D1</span></td>
      <td class="prismea-table--cell -center">
        <div class="prismea-contextual-menu ion--close">
          <div class="prismea-contextual-menu--button">
            <button class="prismea-contextual-button"><i class="prismea-contextual-button--icon prismea-glyph-16_document"></i></button>
          </div>
          <ul class="prismea-contextual-menu--menu">
            <li>
              <button class="prismea-contextual-menu--item">First</button>
            </li>
            <li>
              <button class="prismea-contextual-menu--item">Second</button>
            </li>
            <li>
              <button class="prismea-contextual-menu--item">Third</button>
            </li>
          </ul>
        </div>
      </td>
      <td class="prismea-table--cell -center -action--cell">
        <div>
          <button class="prismea-icon-button"><i class="prismea-icon-button--icon prismea-glyph-24_download"></i></button>
          <button class="prismea-icon-button"><i class="prismea-icon-button--icon prismea-glyph-24_update"></i></button>
          <button class="prismea-icon-button"><i class="prismea-icon-button--icon prismea-glyph-24_tools"></i></button>
        </div>
      </td>
    </tr>
    <tr class="prismea-table--line ion--hoverable">
      <td class="prismea-table--cell">Line A2</td>
      <td class="prismea-table--cell -center"><span class="prismea-numeral">Line B2 numeral</span></td>
      <td class="prismea-table--cell -center">
        <button class="prismea-switch -off -pending " role="switch" aria-checked="false" aria-label="Switch" title="Pending …"><i class="prismea-switch--button"></i>
        </button>
      </td>
      <td class="prismea-table--cell -center"><span class="prismea-numeral prismea-color -color-negative">Line D2</span></td>
      <td class="prismea-table--cell -center">
        <div class="prismea-contextual-menu ion--close">
          <div class="prismea-contextual-menu--button">
            <button class="prismea-contextual-button -faded"><i class="prismea-contextual-button--icon prismea-glyph-16_document"></i></button>
          </div>
          <ul class="prismea-contextual-menu--menu">
            <li>
              <button class="prismea-contextual-menu--item">First</button>
            </li>
            <li>
              <button class="prismea-contextual-menu--item">Second</button>
            </li>
            <li>
              <button class="prismea-contextual-menu--item">Third</button>
            </li>
          </ul>
        </div>
      </td>
      <td class="prismea-table--cell -center -action--cell">
        <div>
          <button class="prismea-icon-button"><i class="prismea-icon-button--icon prismea-glyph-24_download"></i></button>
          <button class="prismea-icon-button"><i class="prismea-icon-button--icon prismea-glyph-24_update"></i></button>
          <button class="prismea-icon-button"><i class="prismea-icon-button--icon prismea-glyph-24_tools"></i></button>
        </div>
      </td>
    </tr>
    <tr class="prismea-table--line ion--hoverable -ion--staggered-4">
      <td class="prismea-table--cell">Line A3</td>
      <td class="prismea-table--cell -center"><span class="prismea-numeral">Line B3 numeral</span></td>
      <td class="prismea-table--cell -center">
        <button class="prismea-switch -off " role="switch" aria-checked="false" aria-label="Switch"><i class="prismea-switch--button"></i>
        </button>
      </td>
      <td class="prismea-table--cell -center"><span class="prismea-numeral prismea-color -color-neutral">Line D3</span></td>
      <td class="prismea-table--cell -center">
        <div class="prismea-contextual-menu ion--close">
          <div class="prismea-contextual-menu--button">
            <button class="prismea-contextual-button -invisible"><i class="prismea-contextual-button--icon prismea-glyph-16_document"></i></button>
          </div>
          <ul class="prismea-contextual-menu--menu">
            <li>
              <button class="prismea-contextual-menu--item">First</button>
            </li>
            <li>
              <button class="prismea-contextual-menu--item">Second</button>
            </li>
            <li>
              <button class="prismea-contextual-menu--item">Third</button>
            </li>
          </ul>
        </div>
      </td>
      <td class="prismea-table--cell -center -action--cell">
        <div>
          <button class="prismea-icon-button -invisible -selected"><i class="prismea-icon-button--icon prismea-glyph-24_download"></i></button>
          <button class="prismea-icon-button -invisible"><i class="prismea-icon-button--icon prismea-glyph-24_update"></i></button>
          <button class="prismea-icon-button -invisible"><i class="prismea-icon-button--icon prismea-glyph-24_tools"></i></button>
        </div>
      </td>
    </tr>
  </tbody>
</table>
<h2>Disabled Line</h2>
<table class="prismea-table -text-sm">
  <thead class="prismea-table--head">
    <tr class="prismea-table--line">
      <th class="prismea-table--cell">Column A</th>
      <th class="prismea-table--cell -center">Column B</th>
      <th class="prismea-table--cell -center">Column C</th>
      <th class="prismea-table--cell -center">Column D</th>
      <th class="prismea-table--cell -center">Column E</th>
      <th class="prismea-table--cell -center"></th>
    </tr>
  </thead>
  <tbody class="prismea-table--body">
    <tr class="ion--hoverable prismea-table--line prismea-table--line .ion--disabled">
      <td class="prismea-table--cell"><a class="prismea-link -hoverable" href="#">Line A1</a><span class="prismea-table--alert-text prismea-text prismea-color -color-alert">Deleted</span>
      </td>
      <td class="prismea-table--cell -center"><span class="prismea-numeral">Line B1 numeral</span></td>
      <td class="prismea-table--cell -center">
        <button class="prismea-switch -on " role="switch" aria-checked="true" aria-label="Switch"><i class="prismea-switch--button"></i>
        </button>
      </td>
      <td class="prismea-table--cell -center"><span class="prismea-numeral prismea-color -color-positive">Line D1</span></td>
      <td class="prismea-table--cell -center">
        <div class="prismea-contextual-menu ion--close">
          <div class="prismea-contextual-menu--button">
            <button class="prismea-contextual-button"><i class="prismea-contextual-button--icon prismea-glyph-16_document"></i></button>
          </div>
          <ul class="prismea-contextual-menu--menu">
            <li>
              <button class="prismea-contextual-menu--item">First</button>
            </li>
            <li>
              <button class="prismea-contextual-menu--item">Second</button>
            </li>
            <li>
              <button class="prismea-contextual-menu--item">Third</button>
            </li>
          </ul>
        </div>
      </td>
      <td class="prismea-table--cell -center -action--cell">
        <div>
          <button class="prismea-icon-button"><i class="prismea-icon-button--icon prismea-glyph-24_download"></i></button>
          <button class="prismea-icon-button"><i class="prismea-icon-button--icon prismea-glyph-24_update"></i></button>
          <button class="prismea-icon-button"><i class="prismea-icon-button--icon prismea-glyph-24_tools"></i></button>
        </div>
      </td>
    </tr>
    <tr class="prismea-table--line ion--hoverable">
      <td class="prismea-table--cell">Line A2</td>
      <td class="prismea-table--cell -center"><span class="prismea-numeral">Line B2 numeral</span></td>
      <td class="prismea-table--cell -center">
        <button class="prismea-switch -off -pending " role="switch" aria-checked="false" aria-label="Switch" title="Pending …"><i class="prismea-switch--button"></i>
        </button>
      </td>
      <td class="prismea-table--cell -center"><span class="prismea-numeral prismea-color -color-negative">Line D2</span></td>
      <td class="prismea-table--cell -center">
        <div class="prismea-contextual-menu ion--close">
          <div class="prismea-contextual-menu--button">
            <button class="prismea-contextual-button -faded"><i class="prismea-contextual-button--icon prismea-glyph-16_document"></i></button>
          </div>
          <ul class="prismea-contextual-menu--menu">
            <li>
              <button class="prismea-contextual-menu--item">First</button>
            </li>
            <li>
              <button class="prismea-contextual-menu--item">Second</button>
            </li>
            <li>
              <button class="prismea-contextual-menu--item">Third</button>
            </li>
          </ul>
        </div>
      </td>
      <td class="prismea-table--cell -center -action--cell">
        <div>
          <button class="prismea-icon-button"><i class="prismea-icon-button--icon prismea-glyph-24_download"></i></button>
          <button class="prismea-icon-button"><i class="prismea-icon-button--icon prismea-glyph-24_update"></i></button>
          <button class="prismea-icon-button"><i class="prismea-icon-button--icon prismea-glyph-24_tools"></i></button>
        </div>
      </td>
    </tr>
    <tr class="prismea-table--line ion--hoverable -ion--staggered-4">
      <td class="prismea-table--cell">Line A3</td>
      <td class="prismea-table--cell -center"><span class="prismea-numeral">Line B3 numeral</span></td>
      <td class="prismea-table--cell -center">
        <button class="prismea-switch -off " role="switch" aria-checked="false" aria-label="Switch"><i class="prismea-switch--button"></i>
        </button>
      </td>
      <td class="prismea-table--cell -center"><span class="prismea-numeral prismea-color -color-neutral">Line D3</span></td>
      <td class="prismea-table--cell -center">
        <div class="prismea-contextual-menu ion--close">
          <div class="prismea-contextual-menu--button">
            <button class="prismea-contextual-button -invisible"><i class="prismea-contextual-button--icon prismea-glyph-16_document"></i></button>
          </div>
          <ul class="prismea-contextual-menu--menu">
            <li>
              <button class="prismea-contextual-menu--item">First</button>
            </li>
            <li>
              <button class="prismea-contextual-menu--item">Second</button>
            </li>
            <li>
              <button class="prismea-contextual-menu--item">Third</button>
            </li>
          </ul>
        </div>
      </td>
      <td class="prismea-table--cell -center -action--cell">
        <div>
          <button class="prismea-icon-button -invisible -selected"><i class="prismea-icon-button--icon prismea-glyph-24_download"></i></button>
          <button class="prismea-icon-button -invisible"><i class="prismea-icon-button--icon prismea-glyph-24_update"></i></button>
          <button class="prismea-icon-button -invisible"><i class="prismea-icon-button--icon prismea-glyph-24_tools"></i></button>
        </div>
      </td>
    </tr>
  </tbody>
</table>
<h2>Equivalent / Line Neutral</h2>
<table class="prismea-table -equivalent -text-sm">
  <thead class="prismea-table--head">
    <tr class="prismea-table--line">
      <th class="prismea-table--cell">Column A</th>
      <th class="prismea-table--cell -center">Column B</th>
      <th class="prismea-table--cell -center">Column C</th>
      <th class="prismea-table--cell -center">Column D</th>
      <th class="prismea-table--cell -center">Column E</th>
      <th class="prismea-table--cell -center"></th>
    </tr>
  </thead>
  <tbody class="prismea-table--body">
    <tr class="ion--hoverable prismea-table--line prismea-table--line--colored-first-line -neutral">
      <td class="prismea-table--cell"><a class="prismea-link -hoverable" href="#">Line A1</a>
      </td>
      <td class="prismea-table--cell -center"><span class="prismea-numeral">Line B1 numeral</span></td>
      <td class="prismea-table--cell -center">
        <button class="prismea-switch -on " role="switch" aria-checked="true" aria-label="Switch"><i class="prismea-switch--button"></i>
        </button>
      </td>
      <td class="prismea-table--cell -center"><span class="prismea-numeral prismea-color -color-positive">Line D1</span></td>
      <td class="prismea-table--cell -center">
        <div class="prismea-contextual-menu ion--open">
          <div class="prismea-contextual-menu--button">
            <button class="prismea-contextual-button"><i class="prismea-contextual-button--icon prismea-glyph-16_document"></i></button>
          </div>
          <ul class="prismea-contextual-menu--menu">
            <li>
              <button class="prismea-contextual-menu--item">First</button>
            </li>
            <li>
              <button class="prismea-contextual-menu--item">Second</button>
            </li>
            <li>
              <button class="prismea-contextual-menu--item">Third</button>
            </li>
          </ul>
        </div>
      </td>
      <td class="prismea-table--cell -center -action--cell">
        <div>
          <button class="prismea-icon-button"><i class="prismea-icon-button--icon prismea-glyph-24_download"></i></button>
          <button class="prismea-icon-button"><i class="prismea-icon-button--icon prismea-glyph-24_update"></i></button>
          <button class="prismea-icon-button"><i class="prismea-icon-button--icon prismea-glyph-24_tools"></i></button>
        </div>
      </td>
    </tr>
    <tr class="prismea-table--line ion--hoverable">
      <td class="prismea-table--cell">Line A2</td>
      <td class="prismea-table--cell -center"><span class="prismea-numeral">Line B2 numeral</span></td>
      <td class="prismea-table--cell -center">
        <button class="prismea-switch -off -pending " role="switch" aria-checked="false" aria-label="Switch" title="Pending …"><i class="prismea-switch--button"></i>
        </button>
      </td>
      <td class="prismea-table--cell -center"><span class="prismea-numeral prismea-color -color-negative">Line D2</span></td>
      <td class="prismea-table--cell -center">
        <div class="prismea-contextual-menu ion--close">
          <div class="prismea-contextual-menu--button">
            <button class="prismea-contextual-button -faded"><i class="prismea-contextual-button--icon prismea-glyph-16_document"></i></button>
          </div>
          <ul class="prismea-contextual-menu--menu">
            <li>
              <button class="prismea-contextual-menu--item">First</button>
            </li>
            <li>
              <button class="prismea-contextual-menu--item">Second</button>
            </li>
            <li>
              <button class="prismea-contextual-menu--item">Third</button>
            </li>
          </ul>
        </div>
      </td>
      <td class="prismea-table--cell -center -action--cell">
        <div>
          <button class="prismea-icon-button"><i class="prismea-icon-button--icon prismea-glyph-24_download"></i></button>
          <button class="prismea-icon-button"><i class="prismea-icon-button--icon prismea-glyph-24_update"></i></button>
          <button class="prismea-icon-button"><i class="prismea-icon-button--icon prismea-glyph-24_tools"></i></button>
        </div>
      </td>
    </tr>
    <tr class="prismea-table--line ion--hoverable -ion--staggered-4">
      <td class="prismea-table--cell">Line A3</td>
      <td class="prismea-table--cell -center"><span class="prismea-numeral">Line B3 numeral</span></td>
      <td class="prismea-table--cell -center">
        <button class="prismea-switch -off " role="switch" aria-checked="false" aria-label="Switch"><i class="prismea-switch--button"></i>
        </button>
      </td>
      <td class="prismea-table--cell -center"><span class="prismea-numeral prismea-color -color-neutral">Line D3</span></td>
      <td class="prismea-table--cell -center">
        <div class="prismea-contextual-menu ion--close">
          <div class="prismea-contextual-menu--button">
            <button class="prismea-contextual-button -invisible"><i class="prismea-contextual-button--icon prismea-glyph-16_document"></i></button>
          </div>
          <ul class="prismea-contextual-menu--menu">
            <li>
              <button class="prismea-contextual-menu--item">First</button>
            </li>
            <li>
              <button class="prismea-contextual-menu--item">Second</button>
            </li>
            <li>
              <button class="prismea-contextual-menu--item">Third</button>
            </li>
          </ul>
        </div>
      </td>
      <td class="prismea-table--cell -center -action--cell">
        <div>
          <button class="prismea-icon-button -invisible -selected"><i class="prismea-icon-button--icon prismea-glyph-24_download"></i></button>
          <button class="prismea-icon-button -invisible"><i class="prismea-icon-button--icon prismea-glyph-24_update"></i></button>
          <button class="prismea-icon-button -invisible"><i class="prismea-icon-button--icon prismea-glyph-24_tools"></i></button>
        </div>
      </td>
    </tr>
  </tbody>
</table>
<h2>Equivalent / Stripped / First column 400</h2>
<table class="prismea-table -striped -equivalent -text-sm">
  <thead class="prismea-table--head">
    <tr class="prismea-table--line">
      <th class="prismea-table--cell -width-400">Column A</th>
      <th class="prismea-table--cell -center">Column B</th>
      <th class="prismea-table--cell -center">Column C</th>
      <th class="prismea-table--cell -center">Column D</th>
      <th class="prismea-table--cell -center">Column E</th>
      <th class="prismea-table--cell -center"></th>
    </tr>
  </thead>
  <tbody class="prismea-table--body">
    <tr class="ion--hoverable prismea-table--line prismea-table--line .ion--disabled">
      <td class="prismea-table--cell"><a class="prismea-link -hoverable" href="#">Line A1</a><span class="prismea-table--alert-text prismea-text prismea-color -color-alert">Deleted</span>
      </td>
      <td class="prismea-table--cell -center"><span class="prismea-numeral">Line B1 numeral</span></td>
      <td class="prismea-table--cell -center">
        <button class="prismea-switch -on " role="switch" aria-checked="true" aria-label="Switch"><i class="prismea-switch--button"></i>
        </button>
      </td>
      <td class="prismea-table--cell -center"><span class="prismea-numeral prismea-color -color-positive">Line D1</span></td>
      <td class="prismea-table--cell -center">
        <div class="prismea-contextual-menu ion--close">
          <div class="prismea-contextual-menu--button">
            <button class="prismea-contextual-button"><i class="prismea-contextual-button--icon prismea-glyph-16_document"></i></button>
          </div>
          <ul class="prismea-contextual-menu--menu">
            <li>
              <button class="prismea-contextual-menu--item">First</button>
            </li>
            <li>
              <button class="prismea-contextual-menu--item">Second</button>
            </li>
            <li>
              <button class="prismea-contextual-menu--item">Third</button>
            </li>
          </ul>
        </div>
      </td>
      <td class="prismea-table--cell -center -action--cell">
        <div>
          <button class="prismea-icon-button"><i class="prismea-icon-button--icon prismea-glyph-24_download"></i></button>
          <button class="prismea-icon-button"><i class="prismea-icon-button--icon prismea-glyph-24_update"></i></button>
          <button class="prismea-icon-button"><i class="prismea-icon-button--icon prismea-glyph-24_tools"></i></button>
        </div>
      </td>
    </tr>
    <tr class="prismea-table--line ion--hoverable">
      <td class="prismea-table--cell">Line A2</td>
      <td class="prismea-table--cell -center"><span class="prismea-numeral">Line B2 numeral</span></td>
      <td class="prismea-table--cell -center">
        <button class="prismea-switch -off -pending " role="switch" aria-checked="false" aria-label="Switch" title="Pending …"><i class="prismea-switch--button"></i>
        </button>
      </td>
      <td class="prismea-table--cell -center"><span class="prismea-numeral prismea-color -color-negative">Line D2</span></td>
      <td class="prismea-table--cell -center">
        <div class="prismea-contextual-menu ion--close">
          <div class="prismea-contextual-menu--button">
            <button class="prismea-contextual-button -faded"><i class="prismea-contextual-button--icon prismea-glyph-16_document"></i></button>
          </div>
          <ul class="prismea-contextual-menu--menu">
            <li>
              <button class="prismea-contextual-menu--item">First</button>
            </li>
            <li>
              <button class="prismea-contextual-menu--item">Second</button>
            </li>
            <li>
              <button class="prismea-contextual-menu--item">Third</button>
            </li>
          </ul>
        </div>
      </td>
      <td class="prismea-table--cell -center -action--cell">
        <div>
          <button class="prismea-icon-button"><i class="prismea-icon-button--icon prismea-glyph-24_download"></i></button>
          <button class="prismea-icon-button"><i class="prismea-icon-button--icon prismea-glyph-24_update"></i></button>
          <button class="prismea-icon-button"><i class="prismea-icon-button--icon prismea-glyph-24_tools"></i></button>
        </div>
      </td>
    </tr>
    <tr class="prismea-table--line ion--hoverable -ion--staggered-4">
      <td class="prismea-table--cell">Line A3</td>
      <td class="prismea-table--cell -center"><span class="prismea-numeral">Line B3 numeral</span></td>
      <td class="prismea-table--cell -center">
        <button class="prismea-switch -off " role="switch" aria-checked="false" aria-label="Switch"><i class="prismea-switch--button"></i>
        </button>
      </td>
      <td class="prismea-table--cell -center"><span class="prismea-numeral prismea-color -color-neutral">Line D3</span></td>
      <td class="prismea-table--cell -center">
        <div class="prismea-contextual-menu ion--close">
          <div class="prismea-contextual-menu--button">
            <button class="prismea-contextual-button -invisible"><i class="prismea-contextual-button--icon prismea-glyph-16_document"></i></button>
          </div>
          <ul class="prismea-contextual-menu--menu">
            <li>
              <button class="prismea-contextual-menu--item">First</button>
            </li>
            <li>
              <button class="prismea-contextual-menu--item">Second</button>
            </li>
            <li>
              <button class="prismea-contextual-menu--item">Third</button>
            </li>
          </ul>
        </div>
      </td>
      <td class="prismea-table--cell -center -action--cell">
        <div>
          <button class="prismea-icon-button -invisible -selected"><i class="prismea-icon-button--icon prismea-glyph-24_download"></i></button>
          <button class="prismea-icon-button -invisible"><i class="prismea-icon-button--icon prismea-glyph-24_update"></i></button>
          <button class="prismea-icon-button -invisible"><i class="prismea-icon-button--icon prismea-glyph-24_tools"></i></button>
        </div>
      </td>
    </tr>
  </tbody>
</table>
<h2>Equivalent / Stripped / First column 400 / Row pending</h2>
<table class="prismea-table -striped -equivalent -text-sm">
  <thead class="prismea-table--head">
    <tr class="prismea-table--line">
      <th class="prismea-table--cell -width-400">Column A</th>
      <th class="prismea-table--cell -center">Column B</th>
      <th class="prismea-table--cell -center">Column C</th>
      <th class="prismea-table--cell -center">Column D</th>
      <th class="prismea-table--cell -center">Column E</th>
      <th class="prismea-table--cell -center"></th>
    </tr>
  </thead>
  <tbody class="prismea-table--body">
    <tr class="ion--hoverable prismea-table--line prismea-table--line .-pending">
      <td class="prismea-table--cell"><a class="prismea-link -hoverable" href="#">Line A1</a>
      </td>
      <td class="prismea-table--cell -center"><span class="prismea-numeral">Line B1 numeral</span></td>
      <td class="prismea-table--cell -center">
        <button class="prismea-switch -on " role="switch" aria-checked="true" aria-label="Switch"><i class="prismea-switch--button"></i>
        </button>
      </td>
      <td class="prismea-table--cell -center"><span class="prismea-numeral prismea-color -color-positive">Line D1</span></td>
      <td class="prismea-table--cell -center">
        <div class="prismea-contextual-menu ion--close">
          <div class="prismea-contextual-menu--button">
            <button class="prismea-contextual-button"><i class="prismea-contextual-button--icon prismea-glyph-16_document"></i></button>
          </div>
          <ul class="prismea-contextual-menu--menu">
            <li>
              <button class="prismea-contextual-menu--item">First</button>
            </li>
            <li>
              <button class="prismea-contextual-menu--item">Second</button>
            </li>
            <li>
              <button class="prismea-contextual-menu--item">Third</button>
            </li>
          </ul>
        </div>
      </td>
      <td class="prismea-table--cell -center -action--cell">
        <div>
          <button class="prismea-icon-button"><i class="prismea-icon-button--icon prismea-glyph-24_download"></i></button>
          <button class="prismea-icon-button"><i class="prismea-icon-button--icon prismea-glyph-24_update"></i></button>
          <button class="prismea-icon-button"><i class="prismea-icon-button--icon prismea-glyph-24_tools"></i></button>
        </div>
      </td>
    </tr>
    <tr class="prismea-table--line ion--hoverable">
      <td class="prismea-table--cell">Line A2</td>
      <td class="prismea-table--cell -center"><span class="prismea-numeral">Line B2 numeral</span></td>
      <td class="prismea-table--cell -center">
        <button class="prismea-switch -off -pending " role="switch" aria-checked="false" aria-label="Switch" title="Pending …"><i class="prismea-switch--button"></i>
        </button>
      </td>
      <td class="prismea-table--cell -center"><span class="prismea-numeral prismea-color -color-negative">Line D2</span></td>
      <td class="prismea-table--cell -center">
        <div class="prismea-contextual-menu ion--close">
          <div class="prismea-contextual-menu--button">
            <button class="prismea-contextual-button -faded"><i class="prismea-contextual-button--icon prismea-glyph-16_document"></i></button>
          </div>
          <ul class="prismea-contextual-menu--menu">
            <li>
              <button class="prismea-contextual-menu--item">First</button>
            </li>
            <li>
              <button class="prismea-contextual-menu--item">Second</button>
            </li>
            <li>
              <button class="prismea-contextual-menu--item">Third</button>
            </li>
          </ul>
        </div>
      </td>
      <td class="prismea-table--cell -center -action--cell">
        <div>
          <button class="prismea-icon-button"><i class="prismea-icon-button--icon prismea-glyph-24_download"></i></button>
          <button class="prismea-icon-button"><i class="prismea-icon-button--icon prismea-glyph-24_update"></i></button>
          <button class="prismea-icon-button"><i class="prismea-icon-button--icon prismea-glyph-24_tools"></i></button>
        </div>
      </td>
    </tr>
    <tr class="prismea-table--line ion--hoverable -ion--staggered-4">
      <td class="prismea-table--cell">Line A3</td>
      <td class="prismea-table--cell -center"><span class="prismea-numeral">Line B3 numeral</span></td>
      <td class="prismea-table--cell -center">
        <button class="prismea-switch -off " role="switch" aria-checked="false" aria-label="Switch"><i class="prismea-switch--button"></i>
        </button>
      </td>
      <td class="prismea-table--cell -center"><span class="prismea-numeral prismea-color -color-neutral">Line D3</span></td>
      <td class="prismea-table--cell -center">
        <div class="prismea-contextual-menu ion--close">
          <div class="prismea-contextual-menu--button">
            <button class="prismea-contextual-button -invisible"><i class="prismea-contextual-button--icon prismea-glyph-16_document"></i></button>
          </div>
          <ul class="prismea-contextual-menu--menu">
            <li>
              <button class="prismea-contextual-menu--item">First</button>
            </li>
            <li>
              <button class="prismea-contextual-menu--item">Second</button>
            </li>
            <li>
              <button class="prismea-contextual-menu--item">Third</button>
            </li>
          </ul>
        </div>
      </td>
      <td class="prismea-table--cell -center -action--cell">
        <div>
          <button class="prismea-icon-button -invisible -selected"><i class="prismea-icon-button--icon prismea-glyph-24_download"></i></button>
          <button class="prismea-icon-button -invisible"><i class="prismea-icon-button--icon prismea-glyph-24_update"></i></button>
          <button class="prismea-icon-button -invisible"><i class="prismea-icon-button--icon prismea-glyph-24_tools"></i></button>
        </div>
      </td>
    </tr>
  </tbody>
</table>
<h2>Equivalent / Stripped / First column 400 / expandable / Line Black</h2>
<table class="prismea-table -striped -equivalent -text-sm">
  <thead class="prismea-table--head">
    <tr class="prismea-table--line">
      <th class="prismea-table--cell -width-400">Column A</th>
      <th class="prismea-table--cell -center">Column B</th>
      <th class="prismea-table--cell -center">Column C</th>
      <th class="prismea-table--cell -center">Column D</th>
      <th class="prismea-table--cell -center">Column E</th>
      <th class="prismea-table--cell -center"></th>
    </tr>
  </thead>
  <tbody class="prismea-table--body">
    <tr class="ion--hoverable prismea-table--line prismea-table--line--colored-first-line -black">
      <td class="prismea-table--cell"><a class="prismea-link -hoverable" href="#">Line A1</a>
      </td>
      <td class="prismea-table--cell -center"><span class="prismea-numeral">Line B1 numeral</span></td>
      <td class="prismea-table--cell -center">
        <button class="prismea-switch -on " role="switch" aria-checked="true" aria-label="Switch"><i class="prismea-switch--button"></i>
        </button>
      </td>
      <td class="prismea-table--cell -center"><span class="prismea-numeral prismea-color -color-positive">Line D1</span></td>
      <td class="prismea-table--cell -center">
        <div class="prismea-contextual-menu ion--close">
          <div class="prismea-contextual-menu--button">
            <button class="prismea-contextual-button"><i class="prismea-contextual-button--icon prismea-glyph-16_document"></i></button>
          </div>
          <ul class="prismea-contextual-menu--menu">
            <li>
              <button class="prismea-contextual-menu--item">First</button>
            </li>
            <li>
              <button class="prismea-contextual-menu--item">Second</button>
            </li>
            <li>
              <button class="prismea-contextual-menu--item">Third</button>
            </li>
          </ul>
        </div>
      </td>
      <td class="prismea-table--cell -center -action--cell">
        <div>
          <button class="prismea-icon-button"><i class="prismea-icon-button--icon prismea-glyph-24_download"></i></button>
          <button class="prismea-icon-button"><i class="prismea-icon-button--icon prismea-glyph-24_update"></i></button>
          <button class="prismea-icon-button"><i class="prismea-icon-button--icon prismea-glyph-24_tools"></i></button>
        </div>
      </td>
    </tr>
    <tr class="prismea-table--line ion--hoverable">
      <td class="prismea-table--cell">Line A2</td>
      <td class="prismea-table--cell -center"><span class="prismea-numeral">Line B2 numeral</span></td>
      <td class="prismea-table--cell -center">
        <button class="prismea-switch -off -pending " role="switch" aria-checked="false" aria-label="Switch" title="Pending …"><i class="prismea-switch--button"></i>
        </button>
      </td>
      <td class="prismea-table--cell -center"><span class="prismea-numeral prismea-color -color-negative">Line D2</span></td>
      <td class="prismea-table--cell -center">
        <div class="prismea-contextual-menu ion--close">
          <div class="prismea-contextual-menu--button">
            <button class="prismea-contextual-button -faded"><i class="prismea-contextual-button--icon prismea-glyph-16_document"></i></button>
          </div>
          <ul class="prismea-contextual-menu--menu">
            <li>
              <button class="prismea-contextual-menu--item">First</button>
            </li>
            <li>
              <button class="prismea-contextual-menu--item">Second</button>
            </li>
            <li>
              <button class="prismea-contextual-menu--item">Third</button>
            </li>
          </ul>
        </div>
      </td>
      <td class="prismea-table--cell -center -action--cell">
        <div>
          <button class="prismea-icon-button"><i class="prismea-icon-button--icon prismea-glyph-24_download"></i></button>
          <button class="prismea-icon-button"><i class="prismea-icon-button--icon prismea-glyph-24_update"></i></button>
          <button class="prismea-icon-button"><i class="prismea-icon-button--icon prismea-glyph-24_tools"></i></button>
        </div>
      </td>
    </tr>
    <tr class="prismea-table--line ion--hoverable -ion--staggered-4 -ion--expanded">
      <td class="prismea-table--cell">Line A3</td>
      <td class="prismea-table--cell -center"><span class="prismea-numeral">Line B3 numeral</span></td>
      <td class="prismea-table--cell -center">
        <button class="prismea-switch -off " role="switch" aria-checked="false" aria-label="Switch"><i class="prismea-switch--button"></i>
        </button>
      </td>
      <td class="prismea-table--cell -center"><span class="prismea-numeral prismea-color -color-neutral">Line D3</span></td>
      <td class="prismea-table--cell -center">
        <div class="prismea-contextual-menu ion--close">
          <div class="prismea-contextual-menu--button">
            <button class="prismea-contextual-button -invisible"><i class="prismea-contextual-button--icon prismea-glyph-16_document"></i></button>
          </div>
          <ul class="prismea-contextual-menu--menu">
            <li>
              <button class="prismea-contextual-menu--item">First</button>
            </li>
            <li>
              <button class="prismea-contextual-menu--item">Second</button>
            </li>
            <li>
              <button class="prismea-contextual-menu--item">Third</button>
            </li>
          </ul>
        </div>
      </td>
      <td class="prismea-table--cell -center -action--cell">
        <div>
          <button class="prismea-icon-button -selected"><i class="prismea-icon-button--icon prismea-glyph-24_download"></i></button>
          <button class="prismea-icon-button"><i class="prismea-icon-button--icon prismea-glyph-24_update"></i></button>
          <button class="prismea-icon-button"><i class="prismea-icon-button--icon prismea-glyph-24_tools"></i></button>
        </div>
      </td>
    </tr>
    <tr class="prismea-table--line ion--expandable">
      <td class="prismea-table--cell">
        <div class="prismea-table--expanded-cell">
          <div class="prismea-vertical-spacing-15">
            <div class="prismea-tuple -text-sm">sample.png</div>
            <div class="prismea-tuple -text-sm">myawesomefile.component.ts</div>
          </div>
        </div>
      </td>
      <td class="prismea-table--cell -center">
        <div class="prismea-table--expanded-cell">
          <div class="prismea-vertical-spacing-15">
            <div>0</div>
            <div>1</div>
          </div>
        </div>
      </td>
      <td class="prismea-table--cell -center">
        <div class="prismea-table--expanded-cell">
          <div class="prismea-vertical-spacing-15">
            <div>abc</div>
            <div>jkl</div>
          </div>
        </div>
      </td>
      <td class="prismea-table--cell -center">
        <div class="prismea-table--expanded-cell">
          <div class="prismea-vertical-spacing-15">
            <div>def</div>
            <div>mno</div>
          </div>
        </div>
      </td>
      <td class="prismea-table--cell -center">
        <div class="prismea-table--expanded-cell">
          <div class="prismea-vertical-spacing-15">
            <div>ghi</div>
            <div>pqr</div>
          </div>
        </div>
      </td>
      <td class="prismea-table--cell -action--cell">
        <div class="prismea-table--expanded-cell">
          <div class="prismea-vertical-spacing-15">
            <button class="prismea-icon-button -block" title="Download"><i class="prismea-icon-button--icon prismea-glyph-24_download"></i></button>
            <button class="prismea-icon-button -block" title="Download"><i class="prismea-icon-button--icon prismea-glyph-24_download"></i></button>
          </div>
        </div>
      </td>
    </tr>
  </tbody>
</table>
<h2>Searchable headers</h2>
<h3>Label input</h3>
<table class="prismea-table -text-sm">
  <thead class="prismea-table--head">
    <tr class="prismea-table--line" style="display: flex">
      <th class="prismea-table--cell">
        <div class="search-text-filter"><i class="prismea-icon prismea-glyph-12_search"></i><span>Hover over me</span></div>
      </th>
      <th class="prismea-table--cell">
        <div class="search-text-filter is-focused" style="width: 120px"><i class="prismea-icon prismea-glyph-12_search"></i>
          <input placeholder="input mode" style="width: 80px"/>
        </div>
      </th>
      <th class="prismea-table--cell">
        <div class="search-text-filter is-set" style="width: 120px"><i class="prismea-icon prismea-glyph-12_delete"></i>
          <input value="I am &quot;set&quot;" style="width: 80px"/>
        </div>
      </th>
    </tr>
  </thead>
</table>
<h3>Select input</h3>
<table class="prismea-table -text-sm">
  <thead class="prismea-table--head">
    <tr class="prismea-table--line" style="display: flex">
      <th class="prismea-table--cell">
        <div class="search-select-filter">
          <div class="select-head"><i class="prismea-icon prismea-glyph-12_caret-down"></i><span>Hover over me</span></div>
        </div>
      </th>
      <th class="prismea-table--cell" style="width: 180px">
        <div class="search-select-filter is-open">
          <div class="select-head"><i class="prismea-icon prismea-glyph-12_caret-up"></i><span>open mode</span></div>
          <div class="options">
            <ul>
              <li><i class="prismea-icon prismea-glyph-16_document"></i><span>Option with an icon</span></li>
              <li><span>Second option</span></li>
            </ul>
          </div>
        </div>
      </th>
      <th class="prismea-table--cell">
        <div class="search-select-filter is-set">
          <div class="select-head"><i class="prismea-icon prismea-glyph-12_delete"></i><span style="width: 80px">I am "set"</span></div>
        </div>
      </th>
    </tr>
  </thead>
</table>
h2 Auto
table.prismea-table.-text-sm
  thead.prismea-table--head
    tr.prismea-table--line
      th.prismea-table--cell Column A
      th.prismea-table--cell.-center Column B
      th.prismea-table--cell.-center Column C
      th.prismea-table--cell.-center Column D
      th.prismea-table--cell.-center Column E
      th.prismea-table--cell.-center
  tbody.prismea-table--body
    tr.ion--hoverable.prismea-table--line.prismea-table--line..
      td.prismea-table--cell
        a.prismea-link.-hoverable(href='#') Line A1
      td.prismea-table--cell.-center
        span.prismea-numeral Line B1 numeral
      td.prismea-table--cell.-center
        button.prismea-switch.-on(role='switch', aria-checked='true', aria-label='Switch')
          i.prismea-switch--button
      td.prismea-table--cell.-center
        span.prismea-numeral.prismea-color.-color-positive Line D1
      td.prismea-table--cell.-center
        .prismea-contextual-menu.ion--close
          .prismea-contextual-menu--button
            button.prismea-contextual-button
              i.prismea-contextual-button--icon.prismea-glyph-16_document
          ul.prismea-contextual-menu--menu
            li
              button.prismea-contextual-menu--item First
            li
              button.prismea-contextual-menu--item Second
            li
              button.prismea-contextual-menu--item Third
      td.prismea-table--cell.-center.-action--cell
        div
          button.prismea-icon-button
            i.prismea-icon-button--icon.prismea-glyph-24_download
          button.prismea-icon-button
            i.prismea-icon-button--icon.prismea-glyph-24_update
          button.prismea-icon-button
            i.prismea-icon-button--icon.prismea-glyph-24_tools
    tr.prismea-table--line.ion--hoverable
      td.prismea-table--cell Line A2
      td.prismea-table--cell.-center
        span.prismea-numeral Line B2 numeral
      td.prismea-table--cell.-center
        button.prismea-switch.-off.-pending(role='switch', aria-checked='false', aria-label='Switch', title='Pending …')
          i.prismea-switch--button
      td.prismea-table--cell.-center
        span.prismea-numeral.prismea-color.-color-negative Line D2
      td.prismea-table--cell.-center
        .prismea-contextual-menu.ion--close
          .prismea-contextual-menu--button
            button.prismea-contextual-button.-faded
              i.prismea-contextual-button--icon.prismea-glyph-16_document
          ul.prismea-contextual-menu--menu
            li
              button.prismea-contextual-menu--item First
            li
              button.prismea-contextual-menu--item Second
            li
              button.prismea-contextual-menu--item Third
      td.prismea-table--cell.-center.-action--cell
        div
          button.prismea-icon-button
            i.prismea-icon-button--icon.prismea-glyph-24_download
          button.prismea-icon-button
            i.prismea-icon-button--icon.prismea-glyph-24_update
          button.prismea-icon-button
            i.prismea-icon-button--icon.prismea-glyph-24_tools
    tr.prismea-table--line.ion--hoverable.-ion--staggered-4
      td.prismea-table--cell Line A3
      td.prismea-table--cell.-center
        span.prismea-numeral Line B3 numeral
      td.prismea-table--cell.-center
        button.prismea-switch.-off(role='switch', aria-checked='false', aria-label='Switch')
          i.prismea-switch--button
      td.prismea-table--cell.-center
        span.prismea-numeral.prismea-color.-color-neutral Line D3
      td.prismea-table--cell.-center
        .prismea-contextual-menu.ion--close
          .prismea-contextual-menu--button
            button.prismea-contextual-button.-invisible
              i.prismea-contextual-button--icon.prismea-glyph-16_document
          ul.prismea-contextual-menu--menu
            li
              button.prismea-contextual-menu--item First
            li
              button.prismea-contextual-menu--item Second
            li
              button.prismea-contextual-menu--item Third
      td.prismea-table--cell.-center.-action--cell
        div
          button.prismea-icon-button.-invisible.-selected
            i.prismea-icon-button--icon.prismea-glyph-24_download
          button.prismea-icon-button.-invisible
            i.prismea-icon-button--icon.prismea-glyph-24_update
          button.prismea-icon-button.-invisible
            i.prismea-icon-button--icon.prismea-glyph-24_tools
h2 Disabled Table
table.prismea-table.-text-sm.-disabled
  thead.prismea-table--head
    tr.prismea-table--line
      th.prismea-table--cell Column A
      th.prismea-table--cell.-center Column B
      th.prismea-table--cell.-center Column C
      th.prismea-table--cell.-center Column D
      th.prismea-table--cell.-center Column E
      th.prismea-table--cell.-center
  tbody.prismea-table--body
    tr.ion--hoverable.prismea-table--line.prismea-table--line..
      td.prismea-table--cell
        a.prismea-link.-hoverable(href='#') Line A1
      td.prismea-table--cell.-center
        span.prismea-numeral Line B1 numeral
      td.prismea-table--cell.-center
        button.prismea-switch.-on(role='switch', aria-checked='true', aria-label='Switch')
          i.prismea-switch--button
      td.prismea-table--cell.-center
        span.prismea-numeral.prismea-color.-color-positive Line D1
      td.prismea-table--cell.-center
        .prismea-contextual-menu.ion--close
          .prismea-contextual-menu--button
            button.prismea-contextual-button
              i.prismea-contextual-button--icon.prismea-glyph-16_document
          ul.prismea-contextual-menu--menu
            li
              button.prismea-contextual-menu--item First
            li
              button.prismea-contextual-menu--item Second
            li
              button.prismea-contextual-menu--item Third
      td.prismea-table--cell.-center.-action--cell
        div
          button.prismea-icon-button
            i.prismea-icon-button--icon.prismea-glyph-24_download
          button.prismea-icon-button
            i.prismea-icon-button--icon.prismea-glyph-24_update
          button.prismea-icon-button
            i.prismea-icon-button--icon.prismea-glyph-24_tools
    tr.prismea-table--line.ion--hoverable
      td.prismea-table--cell Line A2
      td.prismea-table--cell.-center
        span.prismea-numeral Line B2 numeral
      td.prismea-table--cell.-center
        button.prismea-switch.-off.-pending(role='switch', aria-checked='false', aria-label='Switch', title='Pending …')
          i.prismea-switch--button
      td.prismea-table--cell.-center
        span.prismea-numeral.prismea-color.-color-negative Line D2
      td.prismea-table--cell.-center
        .prismea-contextual-menu.ion--close
          .prismea-contextual-menu--button
            button.prismea-contextual-button.-faded
              i.prismea-contextual-button--icon.prismea-glyph-16_document
          ul.prismea-contextual-menu--menu
            li
              button.prismea-contextual-menu--item First
            li
              button.prismea-contextual-menu--item Second
            li
              button.prismea-contextual-menu--item Third
      td.prismea-table--cell.-center.-action--cell
        div
          button.prismea-icon-button
            i.prismea-icon-button--icon.prismea-glyph-24_download
          button.prismea-icon-button
            i.prismea-icon-button--icon.prismea-glyph-24_update
          button.prismea-icon-button
            i.prismea-icon-button--icon.prismea-glyph-24_tools
    tr.prismea-table--line.ion--hoverable.-ion--staggered-4
      td.prismea-table--cell Line A3
      td.prismea-table--cell.-center
        span.prismea-numeral Line B3 numeral
      td.prismea-table--cell.-center
        button.prismea-switch.-off(role='switch', aria-checked='false', aria-label='Switch')
          i.prismea-switch--button
      td.prismea-table--cell.-center
        span.prismea-numeral.prismea-color.-color-neutral Line D3
      td.prismea-table--cell.-center
        .prismea-contextual-menu.ion--close
          .prismea-contextual-menu--button
            button.prismea-contextual-button.-invisible
              i.prismea-contextual-button--icon.prismea-glyph-16_document
          ul.prismea-contextual-menu--menu
            li
              button.prismea-contextual-menu--item First
            li
              button.prismea-contextual-menu--item Second
            li
              button.prismea-contextual-menu--item Third
      td.prismea-table--cell.-center.-action--cell
        div
          button.prismea-icon-button.-invisible.-selected
            i.prismea-icon-button--icon.prismea-glyph-24_download
          button.prismea-icon-button.-invisible
            i.prismea-icon-button--icon.prismea-glyph-24_update
          button.prismea-icon-button.-invisible
            i.prismea-icon-button--icon.prismea-glyph-24_tools
h2 Disabled Line
table.prismea-table.-text-sm
  thead.prismea-table--head
    tr.prismea-table--line
      th.prismea-table--cell Column A
      th.prismea-table--cell.-center Column B
      th.prismea-table--cell.-center Column C
      th.prismea-table--cell.-center Column D
      th.prismea-table--cell.-center Column E
      th.prismea-table--cell.-center
  tbody.prismea-table--body
    tr.ion--hoverable.prismea-table--line.prismea-table--line..ion--disabled
      td.prismea-table--cell
        a.prismea-link.-hoverable(href='#') Line A1
        span.prismea-table--alert-text.prismea-text.prismea-color.-color-alert Deleted
      td.prismea-table--cell.-center
        span.prismea-numeral Line B1 numeral
      td.prismea-table--cell.-center
        button.prismea-switch.-on(role='switch', aria-checked='true', aria-label='Switch')
          i.prismea-switch--button
      td.prismea-table--cell.-center
        span.prismea-numeral.prismea-color.-color-positive Line D1
      td.prismea-table--cell.-center
        .prismea-contextual-menu.ion--close
          .prismea-contextual-menu--button
            button.prismea-contextual-button
              i.prismea-contextual-button--icon.prismea-glyph-16_document
          ul.prismea-contextual-menu--menu
            li
              button.prismea-contextual-menu--item First
            li
              button.prismea-contextual-menu--item Second
            li
              button.prismea-contextual-menu--item Third
      td.prismea-table--cell.-center.-action--cell
        div
          button.prismea-icon-button
            i.prismea-icon-button--icon.prismea-glyph-24_download
          button.prismea-icon-button
            i.prismea-icon-button--icon.prismea-glyph-24_update
          button.prismea-icon-button
            i.prismea-icon-button--icon.prismea-glyph-24_tools
    tr.prismea-table--line.ion--hoverable
      td.prismea-table--cell Line A2
      td.prismea-table--cell.-center
        span.prismea-numeral Line B2 numeral
      td.prismea-table--cell.-center
        button.prismea-switch.-off.-pending(role='switch', aria-checked='false', aria-label='Switch', title='Pending …')
          i.prismea-switch--button
      td.prismea-table--cell.-center
        span.prismea-numeral.prismea-color.-color-negative Line D2
      td.prismea-table--cell.-center
        .prismea-contextual-menu.ion--close
          .prismea-contextual-menu--button
            button.prismea-contextual-button.-faded
              i.prismea-contextual-button--icon.prismea-glyph-16_document
          ul.prismea-contextual-menu--menu
            li
              button.prismea-contextual-menu--item First
            li
              button.prismea-contextual-menu--item Second
            li
              button.prismea-contextual-menu--item Third
      td.prismea-table--cell.-center.-action--cell
        div
          button.prismea-icon-button
            i.prismea-icon-button--icon.prismea-glyph-24_download
          button.prismea-icon-button
            i.prismea-icon-button--icon.prismea-glyph-24_update
          button.prismea-icon-button
            i.prismea-icon-button--icon.prismea-glyph-24_tools
    tr.prismea-table--line.ion--hoverable.-ion--staggered-4
      td.prismea-table--cell Line A3
      td.prismea-table--cell.-center
        span.prismea-numeral Line B3 numeral
      td.prismea-table--cell.-center
        button.prismea-switch.-off(role='switch', aria-checked='false', aria-label='Switch')
          i.prismea-switch--button
      td.prismea-table--cell.-center
        span.prismea-numeral.prismea-color.-color-neutral Line D3
      td.prismea-table--cell.-center
        .prismea-contextual-menu.ion--close
          .prismea-contextual-menu--button
            button.prismea-contextual-button.-invisible
              i.prismea-contextual-button--icon.prismea-glyph-16_document
          ul.prismea-contextual-menu--menu
            li
              button.prismea-contextual-menu--item First
            li
              button.prismea-contextual-menu--item Second
            li
              button.prismea-contextual-menu--item Third
      td.prismea-table--cell.-center.-action--cell
        div
          button.prismea-icon-button.-invisible.-selected
            i.prismea-icon-button--icon.prismea-glyph-24_download
          button.prismea-icon-button.-invisible
            i.prismea-icon-button--icon.prismea-glyph-24_update
          button.prismea-icon-button.-invisible
            i.prismea-icon-button--icon.prismea-glyph-24_tools
h2 Equivalent / Line Neutral
table.prismea-table.-equivalent.-text-sm
  thead.prismea-table--head
    tr.prismea-table--line
      th.prismea-table--cell Column A
      th.prismea-table--cell.-center Column B
      th.prismea-table--cell.-center Column C
      th.prismea-table--cell.-center Column D
      th.prismea-table--cell.-center Column E
      th.prismea-table--cell.-center
  tbody.prismea-table--body
    tr.ion--hoverable.prismea-table--line.prismea-table--line--colored-first-line.-neutral
      td.prismea-table--cell
        a.prismea-link.-hoverable(href='#') Line A1
      td.prismea-table--cell.-center
        span.prismea-numeral Line B1 numeral
      td.prismea-table--cell.-center
        button.prismea-switch.-on(role='switch', aria-checked='true', aria-label='Switch')
          i.prismea-switch--button
      td.prismea-table--cell.-center
        span.prismea-numeral.prismea-color.-color-positive Line D1
      td.prismea-table--cell.-center
        .prismea-contextual-menu.ion--open
          .prismea-contextual-menu--button
            button.prismea-contextual-button
              i.prismea-contextual-button--icon.prismea-glyph-16_document
          ul.prismea-contextual-menu--menu
            li
              button.prismea-contextual-menu--item First
            li
              button.prismea-contextual-menu--item Second
            li
              button.prismea-contextual-menu--item Third
      td.prismea-table--cell.-center.-action--cell
        div
          button.prismea-icon-button
            i.prismea-icon-button--icon.prismea-glyph-24_download
          button.prismea-icon-button
            i.prismea-icon-button--icon.prismea-glyph-24_update
          button.prismea-icon-button
            i.prismea-icon-button--icon.prismea-glyph-24_tools
    tr.prismea-table--line.ion--hoverable
      td.prismea-table--cell Line A2
      td.prismea-table--cell.-center
        span.prismea-numeral Line B2 numeral
      td.prismea-table--cell.-center
        button.prismea-switch.-off.-pending(role='switch', aria-checked='false', aria-label='Switch', title='Pending …')
          i.prismea-switch--button
      td.prismea-table--cell.-center
        span.prismea-numeral.prismea-color.-color-negative Line D2
      td.prismea-table--cell.-center
        .prismea-contextual-menu.ion--close
          .prismea-contextual-menu--button
            button.prismea-contextual-button.-faded
              i.prismea-contextual-button--icon.prismea-glyph-16_document
          ul.prismea-contextual-menu--menu
            li
              button.prismea-contextual-menu--item First
            li
              button.prismea-contextual-menu--item Second
            li
              button.prismea-contextual-menu--item Third
      td.prismea-table--cell.-center.-action--cell
        div
          button.prismea-icon-button
            i.prismea-icon-button--icon.prismea-glyph-24_download
          button.prismea-icon-button
            i.prismea-icon-button--icon.prismea-glyph-24_update
          button.prismea-icon-button
            i.prismea-icon-button--icon.prismea-glyph-24_tools
    tr.prismea-table--line.ion--hoverable.-ion--staggered-4
      td.prismea-table--cell Line A3
      td.prismea-table--cell.-center
        span.prismea-numeral Line B3 numeral
      td.prismea-table--cell.-center
        button.prismea-switch.-off(role='switch', aria-checked='false', aria-label='Switch')
          i.prismea-switch--button
      td.prismea-table--cell.-center
        span.prismea-numeral.prismea-color.-color-neutral Line D3
      td.prismea-table--cell.-center
        .prismea-contextual-menu.ion--close
          .prismea-contextual-menu--button
            button.prismea-contextual-button.-invisible
              i.prismea-contextual-button--icon.prismea-glyph-16_document
          ul.prismea-contextual-menu--menu
            li
              button.prismea-contextual-menu--item First
            li
              button.prismea-contextual-menu--item Second
            li
              button.prismea-contextual-menu--item Third
      td.prismea-table--cell.-center.-action--cell
        div
          button.prismea-icon-button.-invisible.-selected
            i.prismea-icon-button--icon.prismea-glyph-24_download
          button.prismea-icon-button.-invisible
            i.prismea-icon-button--icon.prismea-glyph-24_update
          button.prismea-icon-button.-invisible
            i.prismea-icon-button--icon.prismea-glyph-24_tools
h2 Equivalent / Stripped / First column 400
table.prismea-table.-striped.-equivalent.-text-sm
  thead.prismea-table--head
    tr.prismea-table--line
      th.prismea-table--cell.-width-400 Column A
      th.prismea-table--cell.-center Column B
      th.prismea-table--cell.-center Column C
      th.prismea-table--cell.-center Column D
      th.prismea-table--cell.-center Column E
      th.prismea-table--cell.-center
  tbody.prismea-table--body
    tr.ion--hoverable.prismea-table--line.prismea-table--line..ion--disabled
      td.prismea-table--cell
        a.prismea-link.-hoverable(href='#') Line A1
        span.prismea-table--alert-text.prismea-text.prismea-color.-color-alert Deleted
      td.prismea-table--cell.-center
        span.prismea-numeral Line B1 numeral
      td.prismea-table--cell.-center
        button.prismea-switch.-on(role='switch', aria-checked='true', aria-label='Switch')
          i.prismea-switch--button
      td.prismea-table--cell.-center
        span.prismea-numeral.prismea-color.-color-positive Line D1
      td.prismea-table--cell.-center
        .prismea-contextual-menu.ion--close
          .prismea-contextual-menu--button
            button.prismea-contextual-button
              i.prismea-contextual-button--icon.prismea-glyph-16_document
          ul.prismea-contextual-menu--menu
            li
              button.prismea-contextual-menu--item First
            li
              button.prismea-contextual-menu--item Second
            li
              button.prismea-contextual-menu--item Third
      td.prismea-table--cell.-center.-action--cell
        div
          button.prismea-icon-button
            i.prismea-icon-button--icon.prismea-glyph-24_download
          button.prismea-icon-button
            i.prismea-icon-button--icon.prismea-glyph-24_update
          button.prismea-icon-button
            i.prismea-icon-button--icon.prismea-glyph-24_tools
    tr.prismea-table--line.ion--hoverable
      td.prismea-table--cell Line A2
      td.prismea-table--cell.-center
        span.prismea-numeral Line B2 numeral
      td.prismea-table--cell.-center
        button.prismea-switch.-off.-pending(role='switch', aria-checked='false', aria-label='Switch', title='Pending …')
          i.prismea-switch--button
      td.prismea-table--cell.-center
        span.prismea-numeral.prismea-color.-color-negative Line D2
      td.prismea-table--cell.-center
        .prismea-contextual-menu.ion--close
          .prismea-contextual-menu--button
            button.prismea-contextual-button.-faded
              i.prismea-contextual-button--icon.prismea-glyph-16_document
          ul.prismea-contextual-menu--menu
            li
              button.prismea-contextual-menu--item First
            li
              button.prismea-contextual-menu--item Second
            li
              button.prismea-contextual-menu--item Third
      td.prismea-table--cell.-center.-action--cell
        div
          button.prismea-icon-button
            i.prismea-icon-button--icon.prismea-glyph-24_download
          button.prismea-icon-button
            i.prismea-icon-button--icon.prismea-glyph-24_update
          button.prismea-icon-button
            i.prismea-icon-button--icon.prismea-glyph-24_tools
    tr.prismea-table--line.ion--hoverable.-ion--staggered-4
      td.prismea-table--cell Line A3
      td.prismea-table--cell.-center
        span.prismea-numeral Line B3 numeral
      td.prismea-table--cell.-center
        button.prismea-switch.-off(role='switch', aria-checked='false', aria-label='Switch')
          i.prismea-switch--button
      td.prismea-table--cell.-center
        span.prismea-numeral.prismea-color.-color-neutral Line D3
      td.prismea-table--cell.-center
        .prismea-contextual-menu.ion--close
          .prismea-contextual-menu--button
            button.prismea-contextual-button.-invisible
              i.prismea-contextual-button--icon.prismea-glyph-16_document
          ul.prismea-contextual-menu--menu
            li
              button.prismea-contextual-menu--item First
            li
              button.prismea-contextual-menu--item Second
            li
              button.prismea-contextual-menu--item Third
      td.prismea-table--cell.-center.-action--cell
        div
          button.prismea-icon-button.-invisible.-selected
            i.prismea-icon-button--icon.prismea-glyph-24_download
          button.prismea-icon-button.-invisible
            i.prismea-icon-button--icon.prismea-glyph-24_update
          button.prismea-icon-button.-invisible
            i.prismea-icon-button--icon.prismea-glyph-24_tools
h2 Equivalent / Stripped / First column 400 / Row pending
table.prismea-table.-striped.-equivalent.-text-sm
  thead.prismea-table--head
    tr.prismea-table--line
      th.prismea-table--cell.-width-400 Column A
      th.prismea-table--cell.-center Column B
      th.prismea-table--cell.-center Column C
      th.prismea-table--cell.-center Column D
      th.prismea-table--cell.-center Column E
      th.prismea-table--cell.-center
  tbody.prismea-table--body
    tr.ion--hoverable.prismea-table--line.prismea-table--line..-pending
      td.prismea-table--cell
        a.prismea-link.-hoverable(href='#') Line A1
      td.prismea-table--cell.-center
        span.prismea-numeral Line B1 numeral
      td.prismea-table--cell.-center
        button.prismea-switch.-on(role='switch', aria-checked='true', aria-label='Switch')
          i.prismea-switch--button
      td.prismea-table--cell.-center
        span.prismea-numeral.prismea-color.-color-positive Line D1
      td.prismea-table--cell.-center
        .prismea-contextual-menu.ion--close
          .prismea-contextual-menu--button
            button.prismea-contextual-button
              i.prismea-contextual-button--icon.prismea-glyph-16_document
          ul.prismea-contextual-menu--menu
            li
              button.prismea-contextual-menu--item First
            li
              button.prismea-contextual-menu--item Second
            li
              button.prismea-contextual-menu--item Third
      td.prismea-table--cell.-center.-action--cell
        div
          button.prismea-icon-button
            i.prismea-icon-button--icon.prismea-glyph-24_download
          button.prismea-icon-button
            i.prismea-icon-button--icon.prismea-glyph-24_update
          button.prismea-icon-button
            i.prismea-icon-button--icon.prismea-glyph-24_tools
    tr.prismea-table--line.ion--hoverable
      td.prismea-table--cell Line A2
      td.prismea-table--cell.-center
        span.prismea-numeral Line B2 numeral
      td.prismea-table--cell.-center
        button.prismea-switch.-off.-pending(role='switch', aria-checked='false', aria-label='Switch', title='Pending …')
          i.prismea-switch--button
      td.prismea-table--cell.-center
        span.prismea-numeral.prismea-color.-color-negative Line D2
      td.prismea-table--cell.-center
        .prismea-contextual-menu.ion--close
          .prismea-contextual-menu--button
            button.prismea-contextual-button.-faded
              i.prismea-contextual-button--icon.prismea-glyph-16_document
          ul.prismea-contextual-menu--menu
            li
              button.prismea-contextual-menu--item First
            li
              button.prismea-contextual-menu--item Second
            li
              button.prismea-contextual-menu--item Third
      td.prismea-table--cell.-center.-action--cell
        div
          button.prismea-icon-button
            i.prismea-icon-button--icon.prismea-glyph-24_download
          button.prismea-icon-button
            i.prismea-icon-button--icon.prismea-glyph-24_update
          button.prismea-icon-button
            i.prismea-icon-button--icon.prismea-glyph-24_tools
    tr.prismea-table--line.ion--hoverable.-ion--staggered-4
      td.prismea-table--cell Line A3
      td.prismea-table--cell.-center
        span.prismea-numeral Line B3 numeral
      td.prismea-table--cell.-center
        button.prismea-switch.-off(role='switch', aria-checked='false', aria-label='Switch')
          i.prismea-switch--button
      td.prismea-table--cell.-center
        span.prismea-numeral.prismea-color.-color-neutral Line D3
      td.prismea-table--cell.-center
        .prismea-contextual-menu.ion--close
          .prismea-contextual-menu--button
            button.prismea-contextual-button.-invisible
              i.prismea-contextual-button--icon.prismea-glyph-16_document
          ul.prismea-contextual-menu--menu
            li
              button.prismea-contextual-menu--item First
            li
              button.prismea-contextual-menu--item Second
            li
              button.prismea-contextual-menu--item Third
      td.prismea-table--cell.-center.-action--cell
        div
          button.prismea-icon-button.-invisible.-selected
            i.prismea-icon-button--icon.prismea-glyph-24_download
          button.prismea-icon-button.-invisible
            i.prismea-icon-button--icon.prismea-glyph-24_update
          button.prismea-icon-button.-invisible
            i.prismea-icon-button--icon.prismea-glyph-24_tools
h2 Equivalent / Stripped / First column 400 / expandable / Line Black
table.prismea-table.-striped.-equivalent.-text-sm
  thead.prismea-table--head
    tr.prismea-table--line
      th.prismea-table--cell.-width-400 Column A
      th.prismea-table--cell.-center Column B
      th.prismea-table--cell.-center Column C
      th.prismea-table--cell.-center Column D
      th.prismea-table--cell.-center Column E
      th.prismea-table--cell.-center
  tbody.prismea-table--body
    tr.ion--hoverable.prismea-table--line.prismea-table--line--colored-first-line.-black
      td.prismea-table--cell
        a.prismea-link.-hoverable(href='#') Line A1
      td.prismea-table--cell.-center
        span.prismea-numeral Line B1 numeral
      td.prismea-table--cell.-center
        button.prismea-switch.-on(role='switch', aria-checked='true', aria-label='Switch')
          i.prismea-switch--button
      td.prismea-table--cell.-center
        span.prismea-numeral.prismea-color.-color-positive Line D1
      td.prismea-table--cell.-center
        .prismea-contextual-menu.ion--close
          .prismea-contextual-menu--button
            button.prismea-contextual-button
              i.prismea-contextual-button--icon.prismea-glyph-16_document
          ul.prismea-contextual-menu--menu
            li
              button.prismea-contextual-menu--item First
            li
              button.prismea-contextual-menu--item Second
            li
              button.prismea-contextual-menu--item Third
      td.prismea-table--cell.-center.-action--cell
        div
          button.prismea-icon-button
            i.prismea-icon-button--icon.prismea-glyph-24_download
          button.prismea-icon-button
            i.prismea-icon-button--icon.prismea-glyph-24_update
          button.prismea-icon-button
            i.prismea-icon-button--icon.prismea-glyph-24_tools
    tr.prismea-table--line.ion--hoverable
      td.prismea-table--cell Line A2
      td.prismea-table--cell.-center
        span.prismea-numeral Line B2 numeral
      td.prismea-table--cell.-center
        button.prismea-switch.-off.-pending(role='switch', aria-checked='false', aria-label='Switch', title='Pending …')
          i.prismea-switch--button
      td.prismea-table--cell.-center
        span.prismea-numeral.prismea-color.-color-negative Line D2
      td.prismea-table--cell.-center
        .prismea-contextual-menu.ion--close
          .prismea-contextual-menu--button
            button.prismea-contextual-button.-faded
              i.prismea-contextual-button--icon.prismea-glyph-16_document
          ul.prismea-contextual-menu--menu
            li
              button.prismea-contextual-menu--item First
            li
              button.prismea-contextual-menu--item Second
            li
              button.prismea-contextual-menu--item Third
      td.prismea-table--cell.-center.-action--cell
        div
          button.prismea-icon-button
            i.prismea-icon-button--icon.prismea-glyph-24_download
          button.prismea-icon-button
            i.prismea-icon-button--icon.prismea-glyph-24_update
          button.prismea-icon-button
            i.prismea-icon-button--icon.prismea-glyph-24_tools
    tr.prismea-table--line.ion--hoverable.-ion--staggered-4.-ion--expanded
      td.prismea-table--cell Line A3
      td.prismea-table--cell.-center
        span.prismea-numeral Line B3 numeral
      td.prismea-table--cell.-center
        button.prismea-switch.-off(role='switch', aria-checked='false', aria-label='Switch')
          i.prismea-switch--button
      td.prismea-table--cell.-center
        span.prismea-numeral.prismea-color.-color-neutral Line D3
      td.prismea-table--cell.-center
        .prismea-contextual-menu.ion--close
          .prismea-contextual-menu--button
            button.prismea-contextual-button.-invisible
              i.prismea-contextual-button--icon.prismea-glyph-16_document
          ul.prismea-contextual-menu--menu
            li
              button.prismea-contextual-menu--item First
            li
              button.prismea-contextual-menu--item Second
            li
              button.prismea-contextual-menu--item Third
      td.prismea-table--cell.-center.-action--cell
        div
          button.prismea-icon-button.-selected
            i.prismea-icon-button--icon.prismea-glyph-24_download
          button.prismea-icon-button
            i.prismea-icon-button--icon.prismea-glyph-24_update
          button.prismea-icon-button
            i.prismea-icon-button--icon.prismea-glyph-24_tools
    tr.prismea-table--line.ion--expandable
      td.prismea-table--cell
        .prismea-table--expanded-cell
          .prismea-vertical-spacing-15
            .prismea-tuple.-text-sm sample.png
            .prismea-tuple.-text-sm myawesomefile.component.ts
      td.prismea-table--cell.-center
        .prismea-table--expanded-cell
          .prismea-vertical-spacing-15
            div 0
            div 1
      td.prismea-table--cell.-center
        .prismea-table--expanded-cell
          .prismea-vertical-spacing-15
            div abc
            div jkl
      td.prismea-table--cell.-center
        .prismea-table--expanded-cell
          .prismea-vertical-spacing-15
            div def
            div mno
      td.prismea-table--cell.-center
        .prismea-table--expanded-cell
          .prismea-vertical-spacing-15
            div ghi
            div pqr
      td.prismea-table--cell.-action--cell
        .prismea-table--expanded-cell
          .prismea-vertical-spacing-15
            button.prismea-icon-button.-block(title='Download')
              i.prismea-icon-button--icon.prismea-glyph-24_download
            button.prismea-icon-button.-block(title='Download')
              i.prismea-icon-button--icon.prismea-glyph-24_download
h2 Searchable headers
h3 Label input
table.prismea-table.-text-sm
  thead.prismea-table--head
    tr.prismea-table--line(style='display: flex')
      th.prismea-table--cell
        .search-text-filter
          i.prismea-icon.prismea-glyph-12_search
          span Hover over me
      th.prismea-table--cell
        .search-text-filter.is-focused(style='width: 120px')
          i.prismea-icon.prismea-glyph-12_search
          input(placeholder='input mode', style='width: 80px')
      th.prismea-table--cell
        .search-text-filter.is-set(style='width: 120px')
          i.prismea-icon.prismea-glyph-12_delete
          input(value='I am "set"', style='width: 80px')
h3 Select input
table.prismea-table.-text-sm
  thead.prismea-table--head
    tr.prismea-table--line(style='display: flex')
      th.prismea-table--cell
        .search-select-filter
          .select-head
            i.prismea-icon.prismea-glyph-12_caret-down
            span Hover over me
      th.prismea-table--cell(style='width: 180px')
        .search-select-filter.is-open
          .select-head
            i.prismea-icon.prismea-glyph-12_caret-up
            span open mode
          .options
            ul
              li
                i.prismea-icon.prismea-glyph-16_document
                span Option with an icon
              li
                span Second option
      th.prismea-table--cell
        .search-select-filter.is-set
          .select-head
            i.prismea-icon.prismea-glyph-12_delete
            span(style='width: 80px') I am "set"

Table log

List of logs.

<table class="prismea-table-log -text-sm">
  <tbody>
    <tr class="prismea-table-log--line ion--hoverable">
      <td class="prismea-table-log--line--slot -width-50">
        <div class="prismea-badge -block -positive">POST
        </div>
        <div class="prismea-badge -block">404
        </div>
      </td>
      <td class="prismea-table-log--line--slot -expand">
        <div class="prismea-log-line">
          <div class="prismea-log-line--uri">/api/v1/path/to/a/specific/resource</div>
          <div class="prismea-log-line--date">21 / 12 / 2019 - 09:38 (654ms)
          </div>
        </div>
      </td>
      <td class="prismea-table-log--line--slot -width-25 -right"><i class="prismea-icon -x1 prismea-glyph-16_warning -color-warning"></i>
      </td>
    </tr>
    <tr class="prismea-table-log--line ion--hoverable">
      <td class="prismea-table-log--line--slot -width-50">
        <div class="prismea-badge -block -classic">GET
        </div>
        <div class="prismea-badge -block">500
        </div>
      </td>
      <td class="prismea-table-log--line--slot -expand">
        <div class="prismea-log-line">
          <div class="prismea-log-line--uri">/api/v1/path/to/a/specific/resource</div>
          <div class="prismea-log-line--date">21 / 12 / 2019 - 09:38 (654ms)
          </div>
        </div>
      </td>
      <td class="prismea-table-log--line--slot -width-25 -right"><i class="prismea-icon -x1 prismea-glyph-16_error -color-negative"></i>
      </td>
    </tr>
    <tr class="prismea-table-log--line ion--hoverable">
      <td class="prismea-table-log--line--slot -width-50">
        <div class="prismea-badge -block -neutral">PUT
        </div>
        <div class="prismea-badge -block">200
        </div>
      </td>
      <td class="prismea-table-log--line--slot -expand">
        <div class="prismea-log-line">
          <div class="prismea-log-line--uri">/api/v1/path/to/a/specific/resource</div>
          <div class="prismea-log-line--date">21 / 12 / 2019 - 09:38 (654ms)
          </div>
        </div>
      </td>
      <td class="prismea-table-log--line--slot -width-25 -right"></td>
    </tr>
    <tr class="prismea-table-log--line ion--hoverable">
      <td class="prismea-table-log--line--slot -width-50">
        <div class="prismea-badge -block -special">PATCH
        </div>
        <div class="prismea-badge -block">200
        </div>
      </td>
      <td class="prismea-table-log--line--slot -expand">
        <div class="prismea-log-line">
          <div class="prismea-log-line--uri">/api/v1/path/to/a/specific/resource</div>
          <div class="prismea-log-line--date">21 / 12 / 2019 - 09:38 (654ms)
          </div>
        </div>
      </td>
      <td class="prismea-table-log--line--slot -width-25 -right"></td>
    </tr>
    <tr class="prismea-table-log--line ion--hoverable">
      <td class="prismea-table-log--line--slot -width-50">
        <div class="prismea-badge -block -negative">DELETE
        </div>
        <div class="prismea-badge -block">200
        </div>
      </td>
      <td class="prismea-table-log--line--slot -expand">
        <div class="prismea-log-line">
          <div class="prismea-log-line--uri">/api/v1/path/to/a/specific/resource</div>
          <div class="prismea-log-line--date">21 / 12 / 2019 - 09:38 (654ms) <span class="prismea-log-line--date--icon"><i class="prismea-icon prismea-glyph-12_pending"></i></span>
          </div>
        </div>
      </td>
      <td class="prismea-table-log--line--slot -width-25 -right"></td>
    </tr>
    <tr class="prismea-table-log--line ion--hoverable">
      <td class="prismea-table-log--line--slot -width-50">
        <div class="prismea-badge -block -classic-light">OPTIONS
        </div>
        <div class="prismea-badge -block">200
        </div>
      </td>
      <td class="prismea-table-log--line--slot -expand">
        <div class="prismea-log-line">
          <div class="prismea-log-line--uri">/api/v1/path/to/a/specific/resource</div>
          <div class="prismea-log-line--date">21 / 12 / 2019 - 09:38 (654ms)
          </div>
        </div>
      </td>
      <td class="prismea-table-log--line--slot -width-25 -right"></td>
    </tr>
  </tbody>
</table>
table.prismea-table-log.-text-sm
  tbody
    tr.prismea-table-log--line.ion--hoverable
      td.prismea-table-log--line--slot.-width-50
        .prismea-badge.-block.-positive.
          POST
          
        .prismea-badge.-block.
          404
          
      td.prismea-table-log--line--slot.-expand
        .prismea-log-line
          .prismea-log-line--uri /api/v1/path/to/a/specific/resource
          .prismea-log-line--date.
            21 / 12 / 2019 - 09:38 (654ms)
            
      td.prismea-table-log--line--slot.-width-25.-right
        i.prismea-icon.-x1.prismea-glyph-16_warning.-color-warning
    tr.prismea-table-log--line.ion--hoverable
      td.prismea-table-log--line--slot.-width-50
        .prismea-badge.-block.-classic.
          GET
          
        .prismea-badge.-block.
          500
          
      td.prismea-table-log--line--slot.-expand
        .prismea-log-line
          .prismea-log-line--uri /api/v1/path/to/a/specific/resource
          .prismea-log-line--date.
            21 / 12 / 2019 - 09:38 (654ms)
            
      td.prismea-table-log--line--slot.-width-25.-right
        i.prismea-icon.-x1.prismea-glyph-16_error.-color-negative
    tr.prismea-table-log--line.ion--hoverable
      td.prismea-table-log--line--slot.-width-50
        .prismea-badge.-block.-neutral.
          PUT
          
        .prismea-badge.-block.
          200
          
      td.prismea-table-log--line--slot.-expand
        .prismea-log-line
          .prismea-log-line--uri /api/v1/path/to/a/specific/resource
          .prismea-log-line--date.
            21 / 12 / 2019 - 09:38 (654ms)
            
      td.prismea-table-log--line--slot.-width-25.-right
    tr.prismea-table-log--line.ion--hoverable
      td.prismea-table-log--line--slot.-width-50
        .prismea-badge.-block.-special.
          PATCH
          
        .prismea-badge.-block.
          200
          
      td.prismea-table-log--line--slot.-expand
        .prismea-log-line
          .prismea-log-line--uri /api/v1/path/to/a/specific/resource
          .prismea-log-line--date.
            21 / 12 / 2019 - 09:38 (654ms)
            
      td.prismea-table-log--line--slot.-width-25.-right
    tr.prismea-table-log--line.ion--hoverable
      td.prismea-table-log--line--slot.-width-50
        .prismea-badge.-block.-negative.
          DELETE
          
        .prismea-badge.-block.
          200
          
      td.prismea-table-log--line--slot.-expand
        .prismea-log-line
          .prismea-log-line--uri /api/v1/path/to/a/specific/resource
          .prismea-log-line--date
            | 21 / 12 / 2019 - 09:38 (654ms) 
            span.prismea-log-line--date--icon
              i.prismea-icon.prismea-glyph-12_pending
      td.prismea-table-log--line--slot.-width-25.-right
    tr.prismea-table-log--line.ion--hoverable
      td.prismea-table-log--line--slot.-width-50
        .prismea-badge.-block.-classic-light.
          OPTIONS
          
        .prismea-badge.-block.
          200
          
      td.prismea-table-log--line--slot.-expand
        .prismea-log-line
          .prismea-log-line--uri /api/v1/path/to/a/specific/resource
          .prismea-log-line--date.
            21 / 12 / 2019 - 09:38 (654ms)
            
      td.prismea-table-log--line--slot.-width-25.-right

Tabs

<nav>
  <ul class="prismea-tabs">
    <li class="prismea-tabs--slot"><a class="prismea-tab" href="#">Some tab</a>
    </li>
    <li class="prismea-tabs--slot"><a class="prismea-tab -selected" href="#">Some tab</a>
    </li>
  </ul>
</nav>
nav
  ul.prismea-tabs
    li.prismea-tabs--slot
      a.prismea-tab(href='#') Some tab
    li.prismea-tabs--slot
      a.prismea-tab.-selected(href='#') Some tab

Toast

<div class="prismea-toast -negative">
  <div class="prismea-toast--header">
    <div class="prismea-toast--header--title">Toast</div>
    <div class="prismea-toast--header--close"><i class="prismea-glyph-12_cross"></i></div>
  </div>
  <div class="prismea-toast--content">A content inside the toast.</div>
</div>
<div class="prismea-toast -positive">
  <div class="prismea-toast--header">
    <div class="prismea-toast--header--title">Toast</div>
    <div class="prismea-toast--header--close"><i class="prismea-glyph-12_cross"></i></div>
  </div>
  <div class="prismea-toast--content">A content inside the toast.</div>
</div>
.prismea-toast.-negative
  .prismea-toast--header
    .prismea-toast--header--title Toast
    .prismea-toast--header--close
      i.prismea-glyph-12_cross
  .prismea-toast--content A content inside the toast.
.prismea-toast.-positive
  .prismea-toast--header
    .prismea-toast--header--title Toast
    .prismea-toast--header--close
      i.prismea-glyph-12_cross
  .prismea-toast--content A content inside the toast.

Tuple

<div class="prismea-tuple" style="margin-bottom: 10px;">
  <div class="prismea-tuple--slot">Left</div>
  <div class="prismea-tuple--slot">Right</div>
</div>
<div class="prismea-tuple" style="margin-bottom: 10px;">
  <div class="prismea-tuple--slot">Left</div>
  <div class="prismea-tuple--slot"><span class="prismea-numeral">+33 8 36 65 65 65</span>
  </div>
</div>
<div class="prismea-tuple -text-sm" style="margin-bottom: 10px;">
  <div class="prismea-tuple--slot">Left</div>
  <div class="prismea-tuple--slot">Right</div>
</div>
<div class="prismea-tuple -text-xl" style="margin-bottom: 10px;">
  <div class="prismea-tuple--slot">Left</div>
  <div class="prismea-tuple--slot">Right</div>
</div>
<div class="prismea-tuple" style="height: 100px; border: 1px solid grey; margin-bottom: 10px;">
  <div class="prismea-tuple--slot -start">Left (start)</div>
  <div class="prismea-tuple--slot">Right</div>
</div>
<div class="prismea-tuple" style="height: 100px; border: 1px solid grey; margin-bottom: 10px;">
  <div class="prismea-tuple--slot -center">Left (center)</div>
  <div class="prismea-tuple--slot">Right</div>
</div>
<div class="prismea-tuple" style="height: 100px; border: 1px solid grey; margin-bottom: 10px;">
  <div class="prismea-tuple--slot -end">Left (end)</div>
  <div class="prismea-tuple--slot">Right</div>
</div>
<div class="prismea-tuple" style="height: 100px; border: 1px solid grey; margin-bottom: 10px;">
  <div class="prismea-tuple--slot">Left</div>
  <div class="prismea-tuple--slot -start">Right (start)</div>
</div>
<div class="prismea-tuple" style="height: 100px; border: 1px solid grey; margin-bottom: 10px;">
  <div class="prismea-tuple--slot">Left</div>
  <div class="prismea-tuple--slot -center">Right (center)</div>
</div>
<div class="prismea-tuple" style="height: 100px; border: 1px solid grey; margin-bottom: 10px;">
  <div class="prismea-tuple--slot">Left</div>
  <div class="prismea-tuple--slot -end">Right (end)</div>
</div>
.prismea-tuple(style='margin-bottom: 10px;')
  .prismea-tuple--slot Left
  .prismea-tuple--slot Right
.prismea-tuple(style='margin-bottom: 10px;')
  .prismea-tuple--slot Left
  .prismea-tuple--slot
    span.prismea-numeral +33 8 36 65 65 65
.prismea-tuple.-text-sm(style='margin-bottom: 10px;')
  .prismea-tuple--slot Left
  .prismea-tuple--slot Right
.prismea-tuple.-text-xl(style='margin-bottom: 10px;')
  .prismea-tuple--slot Left
  .prismea-tuple--slot Right
.prismea-tuple(style='height: 100px; border: 1px solid grey; margin-bottom: 10px;')
  .prismea-tuple--slot.-start Left (start)
  .prismea-tuple--slot Right
.prismea-tuple(style='height: 100px; border: 1px solid grey; margin-bottom: 10px;')
  .prismea-tuple--slot.-center Left (center)
  .prismea-tuple--slot Right
.prismea-tuple(style='height: 100px; border: 1px solid grey; margin-bottom: 10px;')
  .prismea-tuple--slot.-end Left (end)
  .prismea-tuple--slot Right
.prismea-tuple(style='height: 100px; border: 1px solid grey; margin-bottom: 10px;')
  .prismea-tuple--slot Left
  .prismea-tuple--slot.-start Right (start)
.prismea-tuple(style='height: 100px; border: 1px solid grey; margin-bottom: 10px;')
  .prismea-tuple--slot Left
  .prismea-tuple--slot.-center Right (center)
.prismea-tuple(style='height: 100px; border: 1px solid grey; margin-bottom: 10px;')
  .prismea-tuple--slot Left
  .prismea-tuple--slot.-end Right (end)

Design System

<div class="breadcrumb"><a class="breadcrumb__previous">Previous route</a>
  <svg class="icon-16 breadcrumb__icon">
    <use href="/svg/16x16/line/chevron-right.svg#chevron-right-line-16"></use>
  </svg><span class="breadcrumb__current">Current route</span>
</div>
.breadcrumb
  a.breadcrumb__previous Previous route
  svg.icon-16.breadcrumb__icon
    use(href='/svg/16x16/line/chevron-right.svg#chevron-right-line-16')
  span.breadcrumb__current Current route

Button

<table>
  <thead>
    <tr>
      <th>Default</th>
      <th>Loading</th>
      <th>Disabled</th>
      <th></th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>
        <button class="btn btn--sm">Button</button>
      </td>
      <td>
        <button class="btn btn--loading btn--sm"></button>
      </td>
      <td>
        <button class="btn btn--sm" disabled="disabled">Button</button>
      </td>
      <td>SM - 40</td>
    </tr>
    <tr>
      <td>
        <button class="btn btn--sm btn--primary">Button</button>
      </td>
      <td>
        <button class="btn btn--loading btn--sm btn--primary"></button>
      </td>
      <td>
        <button class="btn btn--sm btn--primary" disabled="disabled">Button</button>
      </td>
      <td>SM - 40 Primary</td>
    </tr>
    <tr>
      <td>
        <button class="btn btn--sm btn--secondary">Button</button>
      </td>
      <td>
        <button class="btn btn--loading btn--sm btn--secondary"></button>
      </td>
      <td>
        <button class="btn btn--sm btn--secondary" disabled="disabled">Button</button>
      </td>
      <td>SM - 40 Secondary</td>
    </tr>
    <tr>
      <td>
        <button class="btn btn--sm btn--outlined">Button</button>
      </td>
      <td>
        <button class="btn btn--loading btn--sm btn--outlined"></button>
      </td>
      <td>
        <button class="btn btn--sm btn--outlined" disabled="disabled">Button</button>
      </td>
      <td>SM - 40 Outlined</td>
    </tr>
    <tr>
      <td colspan="4">
        <button class="btn">Button with long text because I'm mean</button>
      </td>
    </tr>
    <tr>
      <td class="pa-2" colspan="3" style="text-align: center">Size MD</td>
    </tr>
    <tr>
      <td>
        <button class="btn btn--md">Button</button>
      </td>
      <td>
        <button class="btn btn--loading btn--md"></button>
      </td>
      <td>
        <button class="btn btn--md" disabled="disabled">Button</button>
      </td>
      <td>MD - 48</td>
    </tr>
    <tr>
      <td>
        <button class="btn btn--md btn--primary">Button</button>
      </td>
      <td>
        <button class="btn btn--loading btn--md btn--primary"></button>
      </td>
      <td>
        <button class="btn btn--md btn--primary" disabled="disabled">Button</button>
      </td>
      <td>MD - 48 Primary</td>
    </tr>
    <tr>
      <td>
        <button class="btn btn--md btn--secondary">Button</button>
      </td>
      <td>
        <button class="btn btn--loading btn--md btn--secondary"></button>
      </td>
      <td>
        <button class="btn btn--md btn--secondary" disabled="disabled">Button</button>
      </td>
      <td>MD - 48 Secondary</td>
    </tr>
    <tr>
      <td>
        <button class="btn btn--md btn--outlined">Button</button>
      </td>
      <td>
        <button class="btn btn--loading btn--md btn--outlined"></button>
      </td>
      <td>
        <button class="btn btn--md btn--outlined" disabled="disabled">Button</button>
      </td>
      <td>MD - 48 Outlined</td>
    </tr>
    <tr>
      <td class="pa-2" colspan="3" style="text-align: center">Size L</td>
    </tr>
    <tr>
      <td>
        <button class="btn btn--lg">Button</button>
      </td>
      <td>
        <button class="btn btn--loading btn--lg"></button>
      </td>
      <td>
        <button class="btn btn--lg" disabled="disabled">Button</button>
      </td>
      <td>LG - 56</td>
    </tr>
    <tr>
      <td>
        <button class="btn btn--lg btn--primary">Button</button>
      </td>
      <td>
        <button class="btn btn--loading btn--lg btn--primary"></button>
      </td>
      <td>
        <button class="btn btn--lg btn--primary" disabled="disabled">Button</button>
      </td>
      <td>LG - 56 Primary</td>
    </tr>
    <tr>
      <td>
        <button class="btn btn--lg btn--secondary">Button</button>
      </td>
      <td>
        <button class="btn btn--loading btn--lg btn--secondary"></button>
      </td>
      <td>
        <button class="btn btn--lg btn--secondary" disabled="disabled">Button</button>
      </td>
      <td>LG - 56 Secondary</td>
    </tr>
    <tr>
      <td>
        <button class="btn btn--lg btn--outlined">Button</button>
      </td>
      <td>
        <button class="btn btn--loading btn--lg btn--outlined"></button>
      </td>
      <td>
        <button class="btn btn--lg btn--outlined" disabled="disabled">Button</button>
      </td>
      <td>LG - 56 Outlined</td>
    </tr>
    <tr>
      <td colspan="4">
        <button class="btn btn--lg btn--primary">Another button with long text for the lols</button>
      </td>
    </tr>
  </tbody>
</table>
<h3 class="title-3">Full Width</h3>
<table>
  <thead>
    <tr>
      <th></th>
      <th></th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td colspan="2">
        <button class="btn btn--sm w-full">
          <svg class="icon-32 icon-rotate-270 icon-color-grey--700">
            <use href="/svg/32x32/line/arrow-up.svg#arrow-up-line-32"></use>
          </svg>Button Full Width
        </button>
      </td>
      <td>SM - 40 Default</td>
    </tr>
    <tr>
      <td colspan="2">
        <button class="btn btn--md btn--primary w-full">Button Full Width
          <svg class="icon-32 icon-rotate-90 icon-color-white">
            <use href="/svg/32x32/line/arrow-up.svg#arrow-up-line-32"></use>
          </svg>
        </button>
      </td>
      <td>MD - 48 Primary</td>
    </tr>
    <tr>
      <td colspan="2">
        <button class="btn btn--lg btn--secondary btn--loading w-full"></button>
      </td>
      <td>LG - 56 Secondary</td>
    </tr>
  </tbody>
</table>
<h3 class="title-3">Icon Button</h3>
<table>
  <thead>
    <tr>
      <th>Default</th>
      <th>Disabled</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td class="pa-2" colspan="2" style="text-align: center">Size SM</td>
    </tr>
    <tr>
      <td>
        <button class="btn-icon btn-icon--sm">
          <svg class="icon-16">
            <use href="/svg/16x16/bold/close.svg#close-bold-16"></use>
          </svg>
        </button>
      </td>
      <td>
        <button class="btn-icon btn-icon--sm" disabled="disabled">
          <svg class="icon-16">
            <use href="/svg/16x16/bold/close.svg#close-bold-16"></use>
          </svg>
        </button>
      </td>
      <td>SM - 32 Default</td>
    </tr>
    <tr>
      <td>
        <button class="btn-icon btn-icon--sm btn-icon--outlined">
          <svg class="icon-16">
            <use href="/svg/16x16/bold/close.svg#close-bold-16"></use>
          </svg>
        </button>
      </td>
      <td>
        <button class="btn-icon btn-icon--sm btn-icon--outlined" disabled="disabled">
          <svg class="icon-16">
            <use href="/svg/16x16/bold/close.svg#close-bold-16"></use>
          </svg>
        </button>
      </td>
      <td>SM - 32 Outlined</td>
    </tr>
    <tr>
      <td class="pa-2" colspan="2" style="text-align: center">Size MD</td>
    </tr>
    <tr>
      <td>
        <button class="btn-icon btn-icon--md">
          <svg class="icon-32">
            <use href="/svg/32x32/line/close.svg#close-line-32"></use>
          </svg>
        </button>
      </td>
      <td>
        <button class="btn-icon btn-icon--md" disabled="disabled">
          <svg class="icon-32">
            <use href="/svg/32x32/line/close.svg#close-line-32"></use>
          </svg>
        </button>
      </td>
      <td>MD - 40 Default</td>
    </tr>
    <tr>
      <td>
        <button class="btn-icon btn-icon--md btn-icon--outlined">
          <svg class="icon-32">
            <use href="/svg/32x32/line/close.svg#close-line-32"></use>
          </svg>
        </button>
      </td>
      <td>
        <button class="btn-icon btn-icon--md btn-icon--outlined" disabled="disabled">
          <svg class="icon-32">
            <use href="/svg/32x32/line/close.svg#close-line-32"></use>
          </svg>
        </button>
      </td>
      <td>MD - 40 Outlined</td>
    </tr>
    <tr>
      <td class="pa-2" colspan="2" style="text-align: center">Size LG</td>
    </tr>
    <tr>
      <td>
        <button class="btn-icon btn-icon--lg">
          <svg class="icon-40">
            <use href="/svg/40x40/line/close.svg#close-line-40"></use>
          </svg>
        </button>
      </td>
      <td>
        <button class="btn-icon btn-icon--lg" disabled="disabled">
          <svg class="icon-40">
            <use href="/svg/40x40/line/close.svg#close-line-40"></use>
          </svg>
        </button>
      </td>
      <td>LG - 56 Default</td>
    </tr>
    <tr>
      <td>
        <button class="btn-icon btn-icon--lg btn-icon--outlined">
          <svg class="icon-40">
            <use href="/svg/40x40/line/close.svg#close-line-40"></use>
          </svg>
        </button>
      </td>
      <td>
        <button class="btn-icon btn-icon--lg btn-icon--outlined" disabled="disabled">
          <svg class="icon-40">
            <use href="/svg/40x40/line/close.svg#close-line-40"></use>
          </svg>
        </button>
      </td>
      <td>LG - 56 Outlined</td>
    </tr>
  </tbody>
</table>
table
  thead
    tr
      th Default
      th Loading
      th Disabled
      th
  tbody
    tr
      td
        button.btn.btn--sm Button
      td
        button.btn.btn--loading.btn--sm
      td
        button.btn.btn--sm(disabled) Button
      td SM - 40
    tr
      td
        button.btn.btn--sm.btn--primary Button
      td
        button.btn.btn--loading.btn--sm.btn--primary
      td
        button.btn.btn--sm.btn--primary(disabled) Button
      td SM - 40 Primary
    tr
      td
        button.btn.btn--sm.btn--secondary Button
      td
        button.btn.btn--loading.btn--sm.btn--secondary
      td
        button.btn.btn--sm.btn--secondary(disabled) Button
      td SM - 40 Secondary
    tr
      td
        button.btn.btn--sm.btn--outlined Button
      td
        button.btn.btn--loading.btn--sm.btn--outlined
      td
        button.btn.btn--sm.btn--outlined(disabled) Button
      td SM - 40 Outlined
    tr
      td(colspan='4')
        button.btn Button with long text because I'm mean
    tr
      td.pa-2(colspan='3', style='text-align: center') Size MD
    tr
      td
        button.btn.btn--md Button
      td
        button.btn.btn--loading.btn--md
      td
        button.btn.btn--md(disabled) Button
      td MD - 48
    tr
      td
        button.btn.btn--md.btn--primary Button
      td
        button.btn.btn--loading.btn--md.btn--primary
      td
        button.btn.btn--md.btn--primary(disabled) Button
      td MD - 48 Primary
    tr
      td
        button.btn.btn--md.btn--secondary Button
      td
        button.btn.btn--loading.btn--md.btn--secondary
      td
        button.btn.btn--md.btn--secondary(disabled) Button
      td MD - 48 Secondary
    tr
      td
        button.btn.btn--md.btn--outlined Button
      td
        button.btn.btn--loading.btn--md.btn--outlined
      td
        button.btn.btn--md.btn--outlined(disabled) Button
      td MD - 48 Outlined
    tr
      td.pa-2(colspan='3', style='text-align: center') Size L
    tr
      td
        button.btn.btn--lg Button
      td
        button.btn.btn--loading.btn--lg
      td
        button.btn.btn--lg(disabled) Button
      td LG - 56
    tr
      td
        button.btn.btn--lg.btn--primary Button
      td
        button.btn.btn--loading.btn--lg.btn--primary
      td
        button.btn.btn--lg.btn--primary(disabled) Button
      td LG - 56 Primary
    tr
      td
        button.btn.btn--lg.btn--secondary Button
      td
        button.btn.btn--loading.btn--lg.btn--secondary
      td
        button.btn.btn--lg.btn--secondary(disabled) Button
      td LG - 56 Secondary
    tr
      td
        button.btn.btn--lg.btn--outlined Button
      td
        button.btn.btn--loading.btn--lg.btn--outlined
      td
        button.btn.btn--lg.btn--outlined(disabled) Button
      td LG - 56 Outlined
    tr
      td(colspan='4')
        button.btn.btn--lg.btn--primary Another button with long text for the lols
h3.title-3 Full Width
table
  thead
    tr
      th
      th
  tbody
    tr
      td(colspan='2')
        button.btn.btn--sm.w-full
          svg.icon-32.icon-rotate-270.icon-color-grey--700
            use(href='/svg/32x32/line/arrow-up.svg#arrow-up-line-32')
          | Button Full Width

      td SM - 40 Default
    tr
      td(colspan='2')
        button.btn.btn--md.btn--primary.w-full
          | Button Full Width

          svg.icon-32.icon-rotate-90.icon-color-white
            use(href='/svg/32x32/line/arrow-up.svg#arrow-up-line-32')
      td MD - 48 Primary
    tr
      td(colspan='2')
        button.btn.btn--lg.btn--secondary.btn--loading.w-full
      td LG - 56 Secondary
h3.title-3 Icon Button
table
  thead
    tr
      th Default
      th Disabled
  tbody
    tr
      td.pa-2(colspan='2', style='text-align: center') Size SM
    tr
      td
        button.btn-icon.btn-icon--sm
          svg.icon-16
            use(href='/svg/16x16/bold/close.svg#close-bold-16')
      td
        button.btn-icon.btn-icon--sm(disabled)
          svg.icon-16
            use(href='/svg/16x16/bold/close.svg#close-bold-16')
      td SM - 32 Default
    tr
      td
        button.btn-icon.btn-icon--sm.btn-icon--outlined
          svg.icon-16
            use(href='/svg/16x16/bold/close.svg#close-bold-16')
      td
        button.btn-icon.btn-icon--sm.btn-icon--outlined(disabled)
          svg.icon-16
            use(href='/svg/16x16/bold/close.svg#close-bold-16')
      td SM - 32 Outlined
    tr
      td.pa-2(colspan='2', style='text-align: center') Size MD
    tr
      td
        button.btn-icon.btn-icon--md
          svg.icon-32
            use(href='/svg/32x32/line/close.svg#close-line-32')
      td
        button.btn-icon.btn-icon--md(disabled)
          svg.icon-32
            use(href='/svg/32x32/line/close.svg#close-line-32')
      td MD - 40 Default
    tr
      td
        button.btn-icon.btn-icon--md.btn-icon--outlined
          svg.icon-32
            use(href='/svg/32x32/line/close.svg#close-line-32')
      td
        button.btn-icon.btn-icon--md.btn-icon--outlined(disabled)
          svg.icon-32
            use(href='/svg/32x32/line/close.svg#close-line-32')
      td MD - 40 Outlined
    tr
      td.pa-2(colspan='2', style='text-align: center') Size LG
    tr
      td
        button.btn-icon.btn-icon--lg
          svg.icon-40
            use(href='/svg/40x40/line/close.svg#close-line-40')
      td
        button.btn-icon.btn-icon--lg(disabled)
          svg.icon-40
            use(href='/svg/40x40/line/close.svg#close-line-40')
      td LG - 56 Default
    tr
      td
        button.btn-icon.btn-icon--lg.btn-icon--outlined
          svg.icon-40
            use(href='/svg/40x40/line/close.svg#close-line-40')
      td
        button.btn-icon.btn-icon--lg.btn-icon--outlined(disabled)
          svg.icon-40
            use(href='/svg/40x40/line/close.svg#close-line-40')
      td LG - 56 Outlined

Checkbox

<h3 class="title-3">Checkbox without label</h3>
<table style="width: 50%;">
  <thead>
    <tr>
      <th>Default</th>
      <th>Disabled</th>
      <th>Indeterminate</th>
      <th>Checked ?</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>
        <div class="checkbox">
          <input type="checkbox" id="foo1" checked="checked"/>
          <label for="foo1">
            <svg class="icon-24 icon-color-white">
              <use href="/svg/24x24/line/validate-alt.svg#validate-alt-line-24"></use>
            </svg>
          </label>
        </div>
      </td>
      <td>
        <div class="checkbox">
          <input type="checkbox" id="foo2" checked="checked" disabled="disabled"/>
          <label for="foo2">
            <svg class="icon-24 icon-color-white">
              <use href="/svg/24x24/line/validate-alt.svg#validate-alt-line-24"></use>
            </svg>
          </label>
        </div>
      </td>
      <td>
        <div class="checkbox">
          <input type="checkbox" id="foo3" checked="checked"/>
          <label for="foo3">
            <svg class="icon-24 icon-color-white">
              <use href="/svg/24x24/line/remove-alt.svg#remove-alt-line-24"></use>
            </svg>
          </label>
        </div>
      </td>
      <th>No</th>
    </tr>
    <tr>
      <td>
        <div class="checkbox">
          <input type="checkbox" id="foo4" checked="checked"/>
          <label for="foo4">
            <svg class="icon-24 icon-color-white">
              <use href="/svg/24x24/line/validate-alt.svg#validate-alt-line-24"></use>
            </svg>
          </label>
        </div>
      </td>
      <td>
        <div class="checkbox">
          <input type="checkbox" id="foo5" checked="checked" disabled="disabled"/>
          <label for="foo5">
            <svg class="icon-24 icon-color-white">
              <use href="/svg/24x24/line/validate-alt.svg#validate-alt-line-24"></use>
            </svg>
          </label>
        </div>
      </td>
      <td></td>
      <th>Yes</th>
    </tr>
  </tbody>
</table>
<h3 class="title-3">Checkbox with label</h3>
<table style="width: 50%;">
  <thead>
    <tr>
      <th>Default</th>
      <th>Disabled</th>
      <th>Checked ?</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>
        <div class="checkbox checkbox--with-label">
          <input type="checkbox" id="foo5" checked="checked"/>
          <label for="foo5">
            <svg class="icon-24 icon-color-white">
              <use href="/svg/24x24/line/validate-alt.svg#validate-alt-line-24"></use>
            </svg><span class="text color-grey--900">Label</span>
          </label>
        </div>
      </td>
      <td>
        <div class="checkbox checkbox--with-label">
          <input type="checkbox" id="foo6" checked="checked" disabled="disabled"/>
          <label for="foo6">
            <svg class="icon-24 icon-color-white">
              <use href="/svg/24x24/line/validate-alt.svg#validate-alt-line-24"></use>
            </svg><span class="text color-grey--900">Label</span>
          </label>
        </div>
      </td>
      <th>No</th>
    </tr>
    <tr>
      <td>
        <div class="checkbox checkbox--with-label">
          <input type="checkbox" id="foo7" checked="checked"/>
          <label for="foo7">
            <svg class="icon-24 icon-color-white">
              <use href="/svg/24x24/line/validate-alt.svg#validate-alt-line-24"></use>
            </svg><span class="text color-grey--900">Label</span>
          </label>
        </div>
      </td>
      <td>
        <div class="checkbox checkbox--with-label">
          <input type="checkbox" id="foo8" checked="checked" disabled="disabled"/>
          <label for="foo8">
            <svg class="icon-24 icon-color-white">
              <use href="/svg/24x24/line/validate-alt.svg#validate-alt-line-24"></use>
            </svg><span class="text color-grey--900">Label</span>
          </label>
        </div>
      </td>
      <th>Yes</th>
    </tr>
  </tbody>
</table>
h3.title-3 Checkbox without label
table(style='width: 50%;')
  thead
    tr
      th Default
      th Disabled
      th Indeterminate
      th Checked ?
  tbody
    tr
      td
        .checkbox
          input#foo1(type='checkbox', checked)
          label(for='foo1')
            svg.icon-24.icon-color-white
              use(href='/svg/24x24/line/validate-alt.svg#validate-alt-line-24')
      td
        .checkbox
          input#foo2(type='checkbox', checked, disabled)
          label(for='foo2')
            svg.icon-24.icon-color-white
              use(href='/svg/24x24/line/validate-alt.svg#validate-alt-line-24')
      td
        .checkbox
          input#foo3(type='checkbox', checked)
          label(for='foo3')
            svg.icon-24.icon-color-white
              use(href='/svg/24x24/line/remove-alt.svg#remove-alt-line-24')
      th No
    tr
      td
        .checkbox
          input#foo4(type='checkbox', checked)
          label(for='foo4')
            svg.icon-24.icon-color-white
              use(href='/svg/24x24/line/validate-alt.svg#validate-alt-line-24')
      td
        .checkbox
          input#foo5(type='checkbox', checked, disabled)
          label(for='foo5')
            svg.icon-24.icon-color-white
              use(href='/svg/24x24/line/validate-alt.svg#validate-alt-line-24')
      td
      th Yes
h3.title-3 Checkbox with label
table(style='width: 50%;')
  thead
    tr
      th Default
      th Disabled
      th Checked ?
  tbody
    tr
      td
        .checkbox.checkbox--with-label
          input#foo5(type='checkbox', checked)
          label(for='foo5')
            svg.icon-24.icon-color-white
              use(href='/svg/24x24/line/validate-alt.svg#validate-alt-line-24')
            span.text.color-grey--900 Label
      td
        .checkbox.checkbox--with-label
          input#foo6(type='checkbox', checked, disabled)
          label(for='foo6')
            svg.icon-24.icon-color-white
              use(href='/svg/24x24/line/validate-alt.svg#validate-alt-line-24')
            span.text.color-grey--900 Label
      th No
    tr
      td
        .checkbox.checkbox--with-label
          input#foo7(type='checkbox', checked)
          label(for='foo7')
            svg.icon-24.icon-color-white
              use(href='/svg/24x24/line/validate-alt.svg#validate-alt-line-24')
            span.text.color-grey--900 Label
      td
        .checkbox.checkbox--with-label
          input#foo8(type='checkbox', checked, disabled)
          label(for='foo8')
            svg.icon-24.icon-color-white
              use(href='/svg/24x24/line/validate-alt.svg#validate-alt-line-24')
            span.text.color-grey--900 Label
      th Yes

Radio

<h3 class="title-3">Radio without label</h3>
<table style="width: 50%;">
  <thead>
    <tr>
      <th>Default</th>
      <th>Disabled</th>
      <th>Checked ?</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>
        <div class="radio">
          <input type="radio" id="foo1"/>
          <label for="foo1">
          </label>
        </div>
      </td>
      <td>
        <div class="radio">
          <input type="radio" id="foo2" disabled="disabled"/>
          <label for="foo2">
          </label>
        </div>
      </td>
      <th>No</th>
    </tr>
    <tr>
      <td>
        <div class="radio">
          <input type="radio" id="foo3" checked="checked"/>
          <label for="foo3">
          </label>
        </div>
      </td>
      <td>
        <div class="radio">
          <input type="radio" id="foo4" checked="checked" disabled="disabled"/>
          <label for="foo4">
          </label>
        </div>
      </td>
      <th>Yes</th>
    </tr>
  </tbody>
</table>
<h3 class="title-3">Radio with label</h3>
<table style="width: 50%;">
  <thead>
    <tr>
      <th>Default</th>
      <th>Disabled</th>
      <th>Checked ?</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>
        <div class="radio radio--with-label ">
          <input type="radio" id="foo5"/>
          <label for="foo5"><span class="text color-grey--900">Label</span>
          </label>
        </div>
      </td>
      <td>
        <div class="radio radio--with-label ">
          <input type="radio" id="foo6" disabled="disabled"/>
          <label for="foo6"><span class="text color-grey--900">Label</span>
          </label>
        </div>
      </td>
      <th>No</th>
    </tr>
    <tr>
      <td>
        <div class="radio radio--with-label ">
          <input type="radio" id="foo7" checked="checked"/>
          <label for="foo7"><span class="text color-grey--900">Label</span>
          </label>
        </div>
      </td>
      <td>
        <div class="radio radio--with-label ">
          <input type="radio" id="foo8" checked="checked" disabled="disabled"/>
          <label for="foo8"><span class="text color-grey--900">Label</span>
          </label>
        </div>
      </td>
      <th>Yes</th>
    </tr>
  </tbody>
</table>
h3.title-3 Radio without label
table(style='width: 50%;')
  thead
    tr
      th Default
      th Disabled
      th Checked ?
  tbody
    tr
      td
        .radio
          input#foo1(type='radio')
          label(for='foo1').
            
            
      td
        .radio
          input#foo2(type='radio', disabled)
          label(for='foo2').
            
            
      th No
    tr
      td
        .radio
          input#foo3(type='radio', checked)
          label(for='foo3').
            
            
      td
        .radio
          input#foo4(type='radio', checked, disabled)
          label(for='foo4').
            
            
      th Yes
h3.title-3 Radio with label
table(style='width: 50%;')
  thead
    tr
      th Default
      th Disabled
      th Checked ?
  tbody
    tr
      td
        .radio.radio--with-label
          input#foo5(type='radio')
          label(for='foo5')
            span.text.color-grey--900 Label
      td
        .radio.radio--with-label
          input#foo6(type='radio', disabled)
          label(for='foo6')
            span.text.color-grey--900 Label
      th No
    tr
      td
        .radio.radio--with-label
          input#foo7(type='radio', checked)
          label(for='foo7')
            span.text.color-grey--900 Label
      td
        .radio.radio--with-label
          input#foo8(type='radio', checked, disabled)
          label(for='foo8')
            span.text.color-grey--900 Label
      th Yes

Input

<div class="input mb-6">
  <label class="input__label" for="input">Input</label>
  <div class="input__container">
    <input type="text" id="input" placeholder="Input text goes here"/>
    <button class="btn-icon btn-icon--sm input__icon-suffix">
      <svg class="icon-16">
        <use href="/svg/16x16/line/close.svg#close-line-16"></use>
      </svg>
    </button>
  </div>
  <div class="input__helper"><span>Helper text or error</span></div>
</div>
<div class="input mb-6">
  <label class="input__label" for="input-w-icon">Input with icon</label>
  <div class="input__container">
    <svg class="icon-32 input__icon-prefix">
      <use href="/svg/32x32/line/search.svg#search-line-32"></use>
    </svg>
    <input type="text" id="input-w-icon" placeholder="Input text goes here"/>
    <button class="btn-icon btn-icon--sm input__icon-suffix">
      <svg class="icon-16">
        <use href="/svg/16x16/line/close.svg#close-line-16"></use>
      </svg>
    </button>
  </div>
  <div class="input__helper"><span>Helper text or error</span></div>
</div>
<div class="input input--disabled mb-6">
  <label class="input__label" for="input-disabled">Input disabled</label>
  <div class="input__container">
    <svg class="icon-32 input__icon-prefix">
      <use href="/svg/32x32/line/search.svg#search-line-32"></use>
    </svg>
    <input type="text" id="input-disabled" placeholder="Input text goes here" disabled="disabled"/>
  </div>
  <div class="input__helper"><span>Helper text or error</span></div>
</div>
<div class="input input--errormb-6">
  <label class="input__label" for="input-error">Input error</label>
  <div class="input__container">
    <svg class="icon-32 input__icon-prefix">
      <use href="/svg/32x32/line/search.svg#search-line-32"></use>
    </svg>
    <input type="text" id="input-error" placeholder="Input text goes here"/>
    <button class="btn-icon btn-icon--sm input__icon-suffix">
      <svg class="icon-16">
        <use href="/svg/16x16/line/close.svg#close-line-16"></use>
      </svg>
    </button>
  </div>
  <div class="input__helper"><span>Helper text or error</span></div>
</div>
<div class="input input--textarea mb-6">
  <label class="input__label" for="textarea">Textarea</label>
  <div class="input__container">
    <textarea id="textarea" placeholder="Ex: we are a company specialized in the development of financial applications. We would like to renew our physical assets and expand our services internationally"></textarea>
  </div>
</div>
.input.mb-6
  label.input__label(for='input') Input
  .input__container
    input#input(type='text', placeholder='Input text goes here')
    button.btn-icon.btn-icon--sm.input__icon-suffix
      svg.icon-16
        use(href='/svg/16x16/line/close.svg#close-line-16')
  .input__helper
    span Helper text or error
.input.mb-6
  label.input__label(for='input-w-icon') Input with icon
  .input__container
    svg.icon-32.input__icon-prefix
      use(href='/svg/32x32/line/search.svg#search-line-32')
    input#input-w-icon(type='text', placeholder='Input text goes here')
    button.btn-icon.btn-icon--sm.input__icon-suffix
      svg.icon-16
        use(href='/svg/16x16/line/close.svg#close-line-16')
  .input__helper
    span Helper text or error
.input.input--disabled.mb-6
  label.input__label(for='input-disabled') Input disabled
  .input__container
    svg.icon-32.input__icon-prefix
      use(href='/svg/32x32/line/search.svg#search-line-32')
    input#input-disabled(type='text', placeholder='Input text goes here', disabled)
  .input__helper
    span Helper text or error
.input.input--errormb-6
  label.input__label(for='input-error') Input error
  .input__container
    svg.icon-32.input__icon-prefix
      use(href='/svg/32x32/line/search.svg#search-line-32')
    input#input-error(type='text', placeholder='Input text goes here')
    button.btn-icon.btn-icon--sm.input__icon-suffix
      svg.icon-16
        use(href='/svg/16x16/line/close.svg#close-line-16')
  .input__helper
    span Helper text or error
.input.input--textarea.mb-6
  label.input__label(for='textarea') Textarea
  .input__container
    textarea#textarea(placeholder='Ex: we are a company specialized in the development of financial applications. We would like to renew our physical assets and expand our services internationally')

Input Amount

<div class="input-amount">
  <div class="input-amount__label">Amount</div>
  <input class="input-amount__input" value="4 000,00€"/>
</div>
<div class="input-amount input-amount--error">
  <div class="input-amount__label">Amount</div>
  <input class="input-amount__input" value="4 000,00€"/>
</div>
.input-amount
  .input-amount__label Amount
  input.input-amount__input(value='4 000,00€')
.input-amount.input-amount--error
  .input-amount__label Amount
  input.input-amount__input(value='4 000,00€')

Input Tel

<div class="input mb-6">
  <label class="input__label" for="input-tel">Input</label>
  <div class="input__container">
    <div class="input__dropdown-prefix select">
      <div class="select__input">
        <svg class="icon-32">
          <use href="/svg/32x32/line/flag-FR.svg#flag-FR-line-32"></use>
        </svg>
      </div>
      <svg class="icon-16 icon-rotate-180 select__chevron mx-2">
        <use href="/svg/16x16/line/chevron-up.svg#chevron-up-line-16"></use>
      </svg>
      <div class="select__options">
        <div class="select__option">
          <svg class="icon-32 mr-3">
            <use href="/svg/32x32/line/flag-DE.svg#flag-DE-line-32"></use>
          </svg><span>(+49) Allemagne</span>
        </div>
        <div class="select__option">
          <svg class="icon-32 mr-3">
            <use href="/svg/32x32/line/flag-BE.svg#flag-BE-line-32"></use>
          </svg><span>(+32) Belgique</span>
        </div>
        <div class="select__option">
          <svg class="icon-32 mr-3">
            <use href="/svg/32x32/line/flag-ES.svg#flag-ES-line-32"></use>
          </svg><span>(+34) Espagne</span>
        </div>
        <div class="select__option">
          <svg class="icon-32 mr-3">
            <use href="/svg/32x32/line/flag-US.svg#flag-US-line-32"></use>
          </svg><span>(+1) États-Unis</span>
        </div>
        <div class="select__option select__option--active">
          <svg class="icon-32 mr-3">
            <use href="/svg/32x32/line/flag-FR.svg#flag-FR-line-32"></use>
          </svg><span>(+33) France</span>
        </div>
        <div class="select__option">
          <svg class="icon-32 mr-3">
            <use href="/svg/32x32/line/flag-IT.svg#flag-IT-line-32"></use>
          </svg><span>(+39) Italie</span>
        </div>
        <div class="select__option">
          <svg class="icon-32 mr-3">
            <use href="/svg/32x32/line/flag-EN.svg#flag-EN-line-32"></use>
          </svg><span>(+44) Royaume-Uni</span>
        </div>
        <div class="select__option">
          <svg class="icon-32 mr-3">
            <use href="/svg/32x32/line/flag-SU.svg#flag-SU-line-32"></use>
          </svg><span>(+41) Suisse</span>
        </div>
      </div>
    </div>
    <input type="text" id="input-tel" placeholder="+33 6 78 90 12 34"/>
  </div>
  <div class="input__helper"><span>Helper text or error</span></div>
</div>
<div class="input mb-6 input--disabled">
  <label class="input__label" for="input-tel-disabled">Input disabled</label>
  <div class="input__container">
    <div class="input__dropdown-prefix select">
      <div class="select__input">
        <svg class="icon-32">
          <use href="/svg/32x32/line/flag-FR.svg#flag-FR-line-32"></use>
        </svg>
      </div>
      <svg class="icon-16 icon-rotate-180 select__chevron mx-2">
        <use href="/svg/16x16/line/chevron-up.svg#chevron-up-line-16"></use>
      </svg>
      <div class="select__options">
        <div class="select__option">
          <svg class="icon-32 mr-3">
            <use href="/svg/32x32/line/flag-DE.svg#flag-DE-line-32"></use>
          </svg><span>(+49) Allemagne</span>
        </div>
        <div class="select__option">
          <svg class="icon-32 mr-3">
            <use href="/svg/32x32/line/flag-BE.svg#flag-BE-line-32"></use>
          </svg><span>(+32) Belgique</span>
        </div>
        <div class="select__option">
          <svg class="icon-32 mr-3">
            <use href="/svg/32x32/line/flag-ES.svg#flag-ES-line-32"></use>
          </svg><span>(+34) Espagne</span>
        </div>
        <div class="select__option">
          <svg class="icon-32 mr-3">
            <use href="/svg/32x32/line/flag-US.svg#flag-US-line-32"></use>
          </svg><span>(+1) États-Unis</span>
        </div>
        <div class="select__option select__option--active">
          <svg class="icon-32 mr-3">
            <use href="/svg/32x32/line/flag-FR.svg#flag-FR-line-32"></use>
          </svg><span>(+33) France</span>
        </div>
        <div class="select__option">
          <svg class="icon-32 mr-3">
            <use href="/svg/32x32/line/flag-IT.svg#flag-IT-line-32"></use>
          </svg><span>(+39) Italie</span>
        </div>
        <div class="select__option">
          <svg class="icon-32 mr-3">
            <use href="/svg/32x32/line/flag-EN.svg#flag-EN-line-32"></use>
          </svg><span>(+44) Royaume-Uni</span>
        </div>
        <div class="select__option">
          <svg class="icon-32 mr-3">
            <use href="/svg/32x32/line/flag-SU.svg#flag-SU-line-32"></use>
          </svg><span>(+41) Suisse</span>
        </div>
      </div>
    </div>
    <input type="text" id="input-tel-disabled" placeholder="+33 6 78 90 12 34" disabled="disabled"/>
  </div>
  <div class="input__helper"><span>Helper text or error</span></div>
</div>
<div class="input mb-6 input--error">
  <label class="input__label" for="input-tel-error">Input error</label>
  <div class="input__container">
    <div class="input__dropdown-prefix select">
      <div class="select__input">
        <svg class="icon-32">
          <use href="/svg/32x32/line/flag-FR.svg#flag-FR-line-32"></use>
        </svg>
      </div>
      <svg class="icon-16 icon-rotate-180 select__chevron mx-2">
        <use href="/svg/16x16/line/chevron-up.svg#chevron-up-line-16"></use>
      </svg>
      <div class="select__options">
        <div class="select__option">
          <svg class="icon-32 mr-3">
            <use href="/svg/32x32/line/flag-DE.svg#flag-DE-line-32"></use>
          </svg><span>(+49) Allemagne</span>
        </div>
        <div class="select__option">
          <svg class="icon-32 mr-3">
            <use href="/svg/32x32/line/flag-BE.svg#flag-BE-line-32"></use>
          </svg><span>(+32) Belgique</span>
        </div>
        <div class="select__option">
          <svg class="icon-32 mr-3">
            <use href="/svg/32x32/line/flag-ES.svg#flag-ES-line-32"></use>
          </svg><span>(+34) Espagne</span>
        </div>
        <div class="select__option">
          <svg class="icon-32 mr-3">
            <use href="/svg/32x32/line/flag-US.svg#flag-US-line-32"></use>
          </svg><span>(+1) États-Unis</span>
        </div>
        <div class="select__option select__option--active">
          <svg class="icon-32 mr-3">
            <use href="/svg/32x32/line/flag-FR.svg#flag-FR-line-32"></use>
          </svg><span>(+33) France</span>
        </div>
        <div class="select__option">
          <svg class="icon-32 mr-3">
            <use href="/svg/32x32/line/flag-IT.svg#flag-IT-line-32"></use>
          </svg><span>(+39) Italie</span>
        </div>
        <div class="select__option">
          <svg class="icon-32 mr-3">
            <use href="/svg/32x32/line/flag-EN.svg#flag-EN-line-32"></use>
          </svg><span>(+44) Royaume-Uni</span>
        </div>
        <div class="select__option">
          <svg class="icon-32 mr-3">
            <use href="/svg/32x32/line/flag-SU.svg#flag-SU-line-32"></use>
          </svg><span>(+41) Suisse</span>
        </div>
      </div>
    </div>
    <input type="text" id="input-tel-error" placeholder="+33 6 78 90 12 34"/>
  </div>
  <div class="input__helper"><span>Helper text or error</span></div>
</div>
<div class="input mb-6">
  <label class="input__label" for="input-tel-open">Input</label>
  <div class="input__container">
    <div class="input__dropdown-prefix select select--open">
      <div class="select__input">
        <svg class="icon-32">
          <use href="/svg/32x32/line/flag-FR.svg#flag-FR-line-32"></use>
        </svg>
      </div>
      <svg class="icon-16 icon-rotate-180 select__chevron mx-2">
        <use href="/svg/16x16/line/chevron-up.svg#chevron-up-line-16"></use>
      </svg>
      <div class="select__options">
        <div class="select__option">
          <svg class="icon-32 mr-3">
            <use href="/svg/32x32/line/flag-DE.svg#flag-DE-line-32"></use>
          </svg><span>(+49) Allemagne</span>
        </div>
        <div class="select__option">
          <svg class="icon-32 mr-3">
            <use href="/svg/32x32/line/flag-BE.svg#flag-BE-line-32"></use>
          </svg><span>(+32) Belgique</span>
        </div>
        <div class="select__option">
          <svg class="icon-32 mr-3">
            <use href="/svg/32x32/line/flag-ES.svg#flag-ES-line-32"></use>
          </svg><span>(+34) Espagne</span>
        </div>
        <div class="select__option">
          <svg class="icon-32 mr-3">
            <use href="/svg/32x32/line/flag-US.svg#flag-US-line-32"></use>
          </svg><span>(+1) États-Unis</span>
        </div>
        <div class="select__option select__option--active">
          <svg class="icon-32 mr-3">
            <use href="/svg/32x32/line/flag-FR.svg#flag-FR-line-32"></use>
          </svg><span>(+33) France</span>
        </div>
        <div class="select__option">
          <svg class="icon-32 mr-3">
            <use href="/svg/32x32/line/flag-IT.svg#flag-IT-line-32"></use>
          </svg><span>(+39) Italie</span>
        </div>
        <div class="select__option">
          <svg class="icon-32 mr-3">
            <use href="/svg/32x32/line/flag-EN.svg#flag-EN-line-32"></use>
          </svg><span>(+44) Royaume-Uni</span>
        </div>
        <div class="select__option">
          <svg class="icon-32 mr-3">
            <use href="/svg/32x32/line/flag-SU.svg#flag-SU-line-32"></use>
          </svg><span>(+41) Suisse</span>
        </div>
      </div>
    </div>
    <input type="text" id="input-tel-open" placeholder="+33 6 78 90 12 34"/>
  </div>
  <div class="input__helper"><span>Helper text or error</span></div>
</div>
.input.mb-6
  label.input__label(for='input-tel') Input
  .input__container
    .input__dropdown-prefix.select
      .select__input
        svg.icon-32
          use(href='/svg/32x32/line/flag-FR.svg#flag-FR-line-32')
      svg.icon-16.icon-rotate-180.select__chevron.mx-2
        use(href='/svg/16x16/line/chevron-up.svg#chevron-up-line-16')
      .select__options
        .select__option
          svg.icon-32.mr-3
            use(href='/svg/32x32/line/flag-DE.svg#flag-DE-line-32')
          span (+49) Allemagne
        .select__option
          svg.icon-32.mr-3
            use(href='/svg/32x32/line/flag-BE.svg#flag-BE-line-32')
          span (+32) Belgique
        .select__option
          svg.icon-32.mr-3
            use(href='/svg/32x32/line/flag-ES.svg#flag-ES-line-32')
          span (+34) Espagne
        .select__option
          svg.icon-32.mr-3
            use(href='/svg/32x32/line/flag-US.svg#flag-US-line-32')
          span (+1) États-Unis
        .select__option.select__option--active
          svg.icon-32.mr-3
            use(href='/svg/32x32/line/flag-FR.svg#flag-FR-line-32')
          span (+33) France
        .select__option
          svg.icon-32.mr-3
            use(href='/svg/32x32/line/flag-IT.svg#flag-IT-line-32')
          span (+39) Italie
        .select__option
          svg.icon-32.mr-3
            use(href='/svg/32x32/line/flag-EN.svg#flag-EN-line-32')
          span (+44) Royaume-Uni
        .select__option
          svg.icon-32.mr-3
            use(href='/svg/32x32/line/flag-SU.svg#flag-SU-line-32')
          span (+41) Suisse
    input#input-tel(type='text', placeholder='+33 6 78 90 12 34')
  .input__helper
    span Helper text or error
.input.mb-6.input--disabled
  label.input__label(for='input-tel-disabled') Input disabled
  .input__container
    .input__dropdown-prefix.select
      .select__input
        svg.icon-32
          use(href='/svg/32x32/line/flag-FR.svg#flag-FR-line-32')
      svg.icon-16.icon-rotate-180.select__chevron.mx-2
        use(href='/svg/16x16/line/chevron-up.svg#chevron-up-line-16')
      .select__options
        .select__option
          svg.icon-32.mr-3
            use(href='/svg/32x32/line/flag-DE.svg#flag-DE-line-32')
          span (+49) Allemagne
        .select__option
          svg.icon-32.mr-3
            use(href='/svg/32x32/line/flag-BE.svg#flag-BE-line-32')
          span (+32) Belgique
        .select__option
          svg.icon-32.mr-3
            use(href='/svg/32x32/line/flag-ES.svg#flag-ES-line-32')
          span (+34) Espagne
        .select__option
          svg.icon-32.mr-3
            use(href='/svg/32x32/line/flag-US.svg#flag-US-line-32')
          span (+1) États-Unis
        .select__option.select__option--active
          svg.icon-32.mr-3
            use(href='/svg/32x32/line/flag-FR.svg#flag-FR-line-32')
          span (+33) France
        .select__option
          svg.icon-32.mr-3
            use(href='/svg/32x32/line/flag-IT.svg#flag-IT-line-32')
          span (+39) Italie
        .select__option
          svg.icon-32.mr-3
            use(href='/svg/32x32/line/flag-EN.svg#flag-EN-line-32')
          span (+44) Royaume-Uni
        .select__option
          svg.icon-32.mr-3
            use(href='/svg/32x32/line/flag-SU.svg#flag-SU-line-32')
          span (+41) Suisse
    input#input-tel-disabled(type='text', placeholder='+33 6 78 90 12 34', disabled)
  .input__helper
    span Helper text or error
.input.mb-6.input--error
  label.input__label(for='input-tel-error') Input error
  .input__container
    .input__dropdown-prefix.select
      .select__input
        svg.icon-32
          use(href='/svg/32x32/line/flag-FR.svg#flag-FR-line-32')
      svg.icon-16.icon-rotate-180.select__chevron.mx-2
        use(href='/svg/16x16/line/chevron-up.svg#chevron-up-line-16')
      .select__options
        .select__option
          svg.icon-32.mr-3
            use(href='/svg/32x32/line/flag-DE.svg#flag-DE-line-32')
          span (+49) Allemagne
        .select__option
          svg.icon-32.mr-3
            use(href='/svg/32x32/line/flag-BE.svg#flag-BE-line-32')
          span (+32) Belgique
        .select__option
          svg.icon-32.mr-3
            use(href='/svg/32x32/line/flag-ES.svg#flag-ES-line-32')
          span (+34) Espagne
        .select__option
          svg.icon-32.mr-3
            use(href='/svg/32x32/line/flag-US.svg#flag-US-line-32')
          span (+1) États-Unis
        .select__option.select__option--active
          svg.icon-32.mr-3
            use(href='/svg/32x32/line/flag-FR.svg#flag-FR-line-32')
          span (+33) France
        .select__option
          svg.icon-32.mr-3
            use(href='/svg/32x32/line/flag-IT.svg#flag-IT-line-32')
          span (+39) Italie
        .select__option
          svg.icon-32.mr-3
            use(href='/svg/32x32/line/flag-EN.svg#flag-EN-line-32')
          span (+44) Royaume-Uni
        .select__option
          svg.icon-32.mr-3
            use(href='/svg/32x32/line/flag-SU.svg#flag-SU-line-32')
          span (+41) Suisse
    input#input-tel-error(type='text', placeholder='+33 6 78 90 12 34')
  .input__helper
    span Helper text or error
.input.mb-6
  label.input__label(for='input-tel-open') Input
  .input__container
    .input__dropdown-prefix.select.select--open
      .select__input
        svg.icon-32
          use(href='/svg/32x32/line/flag-FR.svg#flag-FR-line-32')
      svg.icon-16.icon-rotate-180.select__chevron.mx-2
        use(href='/svg/16x16/line/chevron-up.svg#chevron-up-line-16')
      .select__options
        .select__option
          svg.icon-32.mr-3
            use(href='/svg/32x32/line/flag-DE.svg#flag-DE-line-32')
          span (+49) Allemagne
        .select__option
          svg.icon-32.mr-3
            use(href='/svg/32x32/line/flag-BE.svg#flag-BE-line-32')
          span (+32) Belgique
        .select__option
          svg.icon-32.mr-3
            use(href='/svg/32x32/line/flag-ES.svg#flag-ES-line-32')
          span (+34) Espagne
        .select__option
          svg.icon-32.mr-3
            use(href='/svg/32x32/line/flag-US.svg#flag-US-line-32')
          span (+1) États-Unis
        .select__option.select__option--active
          svg.icon-32.mr-3
            use(href='/svg/32x32/line/flag-FR.svg#flag-FR-line-32')
          span (+33) France
        .select__option
          svg.icon-32.mr-3
            use(href='/svg/32x32/line/flag-IT.svg#flag-IT-line-32')
          span (+39) Italie
        .select__option
          svg.icon-32.mr-3
            use(href='/svg/32x32/line/flag-EN.svg#flag-EN-line-32')
          span (+44) Royaume-Uni
        .select__option
          svg.icon-32.mr-3
            use(href='/svg/32x32/line/flag-SU.svg#flag-SU-line-32')
          span (+41) Suisse
    input#input-tel-open(type='text', placeholder='+33 6 78 90 12 34')
  .input__helper
    span Helper text or error

Input File

<div class="input-file">
  <div class="input-file__label">Label</div>
  <div class="file-drop">
    <input id="file" type="file" name="file"/>
    <div class="message">
      <svg class="icon-40 icon-color-primary--500">
        <use href="/svg/40x40/line/cloud.svg#cloud-line-40"></use>
      </svg>
      <p class="text-bold mt-2 mb-0">Déposer vos documents ici</p>
      <p class="mb-2 mt-0">ou</p>
    </div>
    <label for="file">Parcourir vos fichiers</label>
  </div>
  <div class="input-file__helper"><span>Formats acceptés : PDF, CSV, XML</span><span>Envoi sécurisé</span></div>
</div>
.input-file
  .input-file__label Label
  .file-drop
    input#file(type='file', name='file')
    .message
      svg.icon-40.icon-color-primary--500
        use(href='/svg/40x40/line/cloud.svg#cloud-line-40')
      p.text-bold.mt-2.mb-0 Déposer vos documents ici
      p.mb-2.mt-0 ou
    label(for='file') Parcourir vos fichiers
  .input-file__helper
    span Formats acceptés : PDF, CSV, XML
    span Envoi sécurisé

Select

<div class="select mb-6">
  <label class="select__label" for="select">Select</label>
  <div class="select__container">
    <div class="select__input color-grey--700"><span>Choisissez un pays</span></div>
    <svg class="icon-24 icon-rotate-180 select__chevron ml-4">
      <use href="/svg/24x24/line/chevron-up.svg#chevron-up-line-24"></use>
    </svg>
    <div class="select__options">
      <div class="select__option">
        <svg class="icon-32 mr-3">
          <use href="/svg/32x32/line/flag-DE.svg#flag-DE-line-32"></use>
        </svg><span>Allemagne</span>
      </div>
      <div class="select__option">
        <svg class="icon-32 mr-3">
          <use href="/svg/32x32/line/flag-BE.svg#flag-BE-line-32"></use>
        </svg><span>Belgique</span>
      </div>
      <div class="select__option">
        <svg class="icon-32 mr-3">
          <use href="/svg/32x32/line/flag-ES.svg#flag-ES-line-32"></use>
        </svg><span>Espagne</span>
      </div>
      <div class="select__option">
        <svg class="icon-32 mr-3">
          <use href="/svg/32x32/line/flag-US.svg#flag-US-line-32"></use>
        </svg><span>États-Unis</span>
      </div>
      <div class="select__option select__option--active">
        <svg class="icon-32 mr-3">
          <use href="/svg/32x32/line/flag-FR.svg#flag-FR-line-32"></use>
        </svg><span>France</span>
      </div>
      <div class="select__option">
        <svg class="icon-32 mr-3">
          <use href="/svg/32x32/line/flag-IT.svg#flag-IT-line-32"></use>
        </svg><span>Italie</span>
      </div>
      <div class="select__option">
        <svg class="icon-32 mr-3">
          <use href="/svg/32x32/line/flag-EN.svg#flag-EN-line-32"></use>
        </svg><span>Royaume-Uni</span>
      </div>
      <div class="select__option">
        <svg class="icon-32 mr-3">
          <use href="/svg/32x32/line/flag-SU.svg#flag-SU-line-32"></use>
        </svg><span>Suisse</span>
      </div>
    </div>
  </div>
  <div class="select__helper"><span>Helper text or error</span></div>
</div>
<div class="select mb-6">
  <label class="select__label" for="select-w-value">Select with value</label>
  <div class="select__container">
    <div class="select__input color-grey--900">
      <svg class="icon-32 mr-4">
        <use href="/svg/32x32/line/flag-FR.svg#flag-FR-line-32"></use>
      </svg><span>France</span>
    </div>
    <svg class="icon-24 icon-rotate-180 select__chevron ml-4">
      <use href="/svg/24x24/line/chevron-up.svg#chevron-up-line-24"></use>
    </svg>
    <div class="select__options">
      <div class="select__option">
        <svg class="icon-32 mr-3">
          <use href="/svg/32x32/line/flag-DE.svg#flag-DE-line-32"></use>
        </svg><span>Allemagne</span>
      </div>
      <div class="select__option">
        <svg class="icon-32 mr-3">
          <use href="/svg/32x32/line/flag-BE.svg#flag-BE-line-32"></use>
        </svg><span>Belgique</span>
      </div>
      <div class="select__option">
        <svg class="icon-32 mr-3">
          <use href="/svg/32x32/line/flag-ES.svg#flag-ES-line-32"></use>
        </svg><span>Espagne</span>
      </div>
      <div class="select__option">
        <svg class="icon-32 mr-3">
          <use href="/svg/32x32/line/flag-US.svg#flag-US-line-32"></use>
        </svg><span>États-Unis</span>
      </div>
      <div class="select__option select__option--active">
        <svg class="icon-32 mr-3">
          <use href="/svg/32x32/line/flag-FR.svg#flag-FR-line-32"></use>
        </svg><span>France</span>
      </div>
      <div class="select__option">
        <svg class="icon-32 mr-3">
          <use href="/svg/32x32/line/flag-IT.svg#flag-IT-line-32"></use>
        </svg><span>Italie</span>
      </div>
      <div class="select__option">
        <svg class="icon-32 mr-3">
          <use href="/svg/32x32/line/flag-EN.svg#flag-EN-line-32"></use>
        </svg><span>Royaume-Uni</span>
      </div>
      <div class="select__option">
        <svg class="icon-32 mr-3">
          <use href="/svg/32x32/line/flag-SU.svg#flag-SU-line-32"></use>
        </svg><span>Suisse</span>
      </div>
    </div>
  </div>
  <div class="select__helper"><span>Helper text or error</span></div>
</div>
<div class="select select--disabled mb-6">
  <label class="select__label" for="select-disabled">Select disabled</label>
  <div class="select__container">
    <div class="select__input color-grey--900">
      <svg class="icon-32 mr-4">
        <use href="/svg/32x32/line/flag-FR.svg#flag-FR-line-32"></use>
      </svg><span>France</span>
    </div>
    <svg class="icon-24 icon-rotate-180 select__chevron ml-4">
      <use href="/svg/24x24/line/chevron-up.svg#chevron-up-line-24"></use>
    </svg>
    <div class="select__options">
      <div class="select__option">
        <svg class="icon-32 mr-3">
          <use href="/svg/32x32/line/flag-DE.svg#flag-DE-line-32"></use>
        </svg><span>Allemagne</span>
      </div>
      <div class="select__option">
        <svg class="icon-32 mr-3">
          <use href="/svg/32x32/line/flag-BE.svg#flag-BE-line-32"></use>
        </svg><span>Belgique</span>
      </div>
      <div class="select__option">
        <svg class="icon-32 mr-3">
          <use href="/svg/32x32/line/flag-ES.svg#flag-ES-line-32"></use>
        </svg><span>Espagne</span>
      </div>
      <div class="select__option">
        <svg class="icon-32 mr-3">
          <use href="/svg/32x32/line/flag-US.svg#flag-US-line-32"></use>
        </svg><span>États-Unis</span>
      </div>
      <div class="select__option select__option--active">
        <svg class="icon-32 mr-3">
          <use href="/svg/32x32/line/flag-FR.svg#flag-FR-line-32"></use>
        </svg><span>France</span>
      </div>
      <div class="select__option">
        <svg class="icon-32 mr-3">
          <use href="/svg/32x32/line/flag-IT.svg#flag-IT-line-32"></use>
        </svg><span>Italie</span>
      </div>
      <div class="select__option">
        <svg class="icon-32 mr-3">
          <use href="/svg/32x32/line/flag-EN.svg#flag-EN-line-32"></use>
        </svg><span>Royaume-Uni</span>
      </div>
      <div class="select__option">
        <svg class="icon-32 mr-3">
          <use href="/svg/32x32/line/flag-SU.svg#flag-SU-line-32"></use>
        </svg><span>Suisse</span>
      </div>
    </div>
  </div>
  <div class="select__helper"><span>Helper text or error</span></div>
</div>
<div class="select select--error mb-6">
  <label class="select__label" for="select-error">Select error</label>
  <div class="select__container">
    <div class="select__input color-grey--900">
      <svg class="icon-32 mr-4">
        <use href="/svg/32x32/line/flag-FR.svg#flag-FR-line-32"></use>
      </svg><span>France</span>
    </div>
    <svg class="icon-24 icon-rotate-180 select__chevron ml-4">
      <use href="/svg/24x24/line/chevron-up.svg#chevron-up-line-24"></use>
    </svg>
    <div class="select__options">
      <div class="select__option">
        <svg class="icon-32 mr-3">
          <use href="/svg/32x32/line/flag-DE.svg#flag-DE-line-32"></use>
        </svg><span>Allemagne</span>
      </div>
      <div class="select__option">
        <svg class="icon-32 mr-3">
          <use href="/svg/32x32/line/flag-BE.svg#flag-BE-line-32"></use>
        </svg><span>Belgique</span>
      </div>
      <div class="select__option">
        <svg class="icon-32 mr-3">
          <use href="/svg/32x32/line/flag-ES.svg#flag-ES-line-32"></use>
        </svg><span>Espagne</span>
      </div>
      <div class="select__option">
        <svg class="icon-32 mr-3">
          <use href="/svg/32x32/line/flag-US.svg#flag-US-line-32"></use>
        </svg><span>États-Unis</span>
      </div>
      <div class="select__option select__option--active">
        <svg class="icon-32 mr-3">
          <use href="/svg/32x32/line/flag-FR.svg#flag-FR-line-32"></use>
        </svg><span>France</span>
      </div>
      <div class="select__option">
        <svg class="icon-32 mr-3">
          <use href="/svg/32x32/line/flag-IT.svg#flag-IT-line-32"></use>
        </svg><span>Italie</span>
      </div>
      <div class="select__option">
        <svg class="icon-32 mr-3">
          <use href="/svg/32x32/line/flag-EN.svg#flag-EN-line-32"></use>
        </svg><span>Royaume-Uni</span>
      </div>
      <div class="select__option">
        <svg class="icon-32 mr-3">
          <use href="/svg/32x32/line/flag-SU.svg#flag-SU-line-32"></use>
        </svg><span>Suisse</span>
      </div>
    </div>
  </div>
  <div class="select__helper"><span>Helper text or error</span></div>
</div>
<div class="select select--open mb-6">
  <label class="select__label" for="select-open">Select open</label>
  <div class="select__container">
    <div class="select__input color-grey--900">
      <svg class="icon-32 mr-4">
        <use href="/svg/32x32/line/flag-FR.svg#flag-FR-line-32"></use>
      </svg><span>France</span>
    </div>
    <svg class="icon-24 icon-rotate-180 select__chevron ml-4">
      <use href="/svg/24x24/line/chevron-up.svg#chevron-up-line-24"></use>
    </svg>
    <div class="select__options">
      <div class="select__option">
        <svg class="icon-32 mr-3">
          <use href="/svg/32x32/line/flag-DE.svg#flag-DE-line-32"></use>
        </svg><span>Allemagne</span>
      </div>
      <div class="select__option">
        <svg class="icon-32 mr-3">
          <use href="/svg/32x32/line/flag-BE.svg#flag-BE-line-32"></use>
        </svg><span>Belgique</span>
      </div>
      <div class="select__option">
        <svg class="icon-32 mr-3">
          <use href="/svg/32x32/line/flag-ES.svg#flag-ES-line-32"></use>
        </svg><span>Espagne</span>
      </div>
      <div class="select__option">
        <svg class="icon-32 mr-3">
          <use href="/svg/32x32/line/flag-US.svg#flag-US-line-32"></use>
        </svg><span>États-Unis</span>
      </div>
      <div class="select__option select__option--active">
        <svg class="icon-32 mr-3">
          <use href="/svg/32x32/line/flag-FR.svg#flag-FR-line-32"></use>
        </svg><span>France</span>
      </div>
      <div class="select__option">
        <svg class="icon-32 mr-3">
          <use href="/svg/32x32/line/flag-IT.svg#flag-IT-line-32"></use>
        </svg><span>Italie</span>
      </div>
      <div class="select__option">
        <svg class="icon-32 mr-3">
          <use href="/svg/32x32/line/flag-EN.svg#flag-EN-line-32"></use>
        </svg><span>Royaume-Uni</span>
      </div>
      <div class="select__option">
        <svg class="icon-32 mr-3">
          <use href="/svg/32x32/line/flag-SU.svg#flag-SU-line-32"></use>
        </svg><span>Suisse</span>
      </div>
    </div>
  </div>
  <div class="select__helper"><span>Helper text or error</span></div>
</div>
.select.mb-6
  label.select__label(for='select') Select
  .select__container
    .select__input.color-grey--700
      span Choisissez un pays
    svg.icon-24.icon-rotate-180.select__chevron.ml-4
      use(href='/svg/24x24/line/chevron-up.svg#chevron-up-line-24')
    .select__options
      .select__option
        svg.icon-32.mr-3
          use(href='/svg/32x32/line/flag-DE.svg#flag-DE-line-32')
        span Allemagne
      .select__option
        svg.icon-32.mr-3
          use(href='/svg/32x32/line/flag-BE.svg#flag-BE-line-32')
        span Belgique
      .select__option
        svg.icon-32.mr-3
          use(href='/svg/32x32/line/flag-ES.svg#flag-ES-line-32')
        span Espagne
      .select__option
        svg.icon-32.mr-3
          use(href='/svg/32x32/line/flag-US.svg#flag-US-line-32')
        span États-Unis
      .select__option.select__option--active
        svg.icon-32.mr-3
          use(href='/svg/32x32/line/flag-FR.svg#flag-FR-line-32')
        span France
      .select__option
        svg.icon-32.mr-3
          use(href='/svg/32x32/line/flag-IT.svg#flag-IT-line-32')
        span Italie
      .select__option
        svg.icon-32.mr-3
          use(href='/svg/32x32/line/flag-EN.svg#flag-EN-line-32')
        span Royaume-Uni
      .select__option
        svg.icon-32.mr-3
          use(href='/svg/32x32/line/flag-SU.svg#flag-SU-line-32')
        span Suisse
  .select__helper
    span Helper text or error
.select.mb-6
  label.select__label(for='select-w-value') Select with value
  .select__container
    .select__input.color-grey--900
      svg.icon-32.mr-4
        use(href='/svg/32x32/line/flag-FR.svg#flag-FR-line-32')
      span France
    svg.icon-24.icon-rotate-180.select__chevron.ml-4
      use(href='/svg/24x24/line/chevron-up.svg#chevron-up-line-24')
    .select__options
      .select__option
        svg.icon-32.mr-3
          use(href='/svg/32x32/line/flag-DE.svg#flag-DE-line-32')
        span Allemagne
      .select__option
        svg.icon-32.mr-3
          use(href='/svg/32x32/line/flag-BE.svg#flag-BE-line-32')
        span Belgique
      .select__option
        svg.icon-32.mr-3
          use(href='/svg/32x32/line/flag-ES.svg#flag-ES-line-32')
        span Espagne
      .select__option
        svg.icon-32.mr-3
          use(href='/svg/32x32/line/flag-US.svg#flag-US-line-32')
        span États-Unis
      .select__option.select__option--active
        svg.icon-32.mr-3
          use(href='/svg/32x32/line/flag-FR.svg#flag-FR-line-32')
        span France
      .select__option
        svg.icon-32.mr-3
          use(href='/svg/32x32/line/flag-IT.svg#flag-IT-line-32')
        span Italie
      .select__option
        svg.icon-32.mr-3
          use(href='/svg/32x32/line/flag-EN.svg#flag-EN-line-32')
        span Royaume-Uni
      .select__option
        svg.icon-32.mr-3
          use(href='/svg/32x32/line/flag-SU.svg#flag-SU-line-32')
        span Suisse
  .select__helper
    span Helper text or error
.select.select--disabled.mb-6
  label.select__label(for='select-disabled') Select disabled
  .select__container
    .select__input.color-grey--900
      svg.icon-32.mr-4
        use(href='/svg/32x32/line/flag-FR.svg#flag-FR-line-32')
      span France
    svg.icon-24.icon-rotate-180.select__chevron.ml-4
      use(href='/svg/24x24/line/chevron-up.svg#chevron-up-line-24')
    .select__options
      .select__option
        svg.icon-32.mr-3
          use(href='/svg/32x32/line/flag-DE.svg#flag-DE-line-32')
        span Allemagne
      .select__option
        svg.icon-32.mr-3
          use(href='/svg/32x32/line/flag-BE.svg#flag-BE-line-32')
        span Belgique
      .select__option
        svg.icon-32.mr-3
          use(href='/svg/32x32/line/flag-ES.svg#flag-ES-line-32')
        span Espagne
      .select__option
        svg.icon-32.mr-3
          use(href='/svg/32x32/line/flag-US.svg#flag-US-line-32')
        span États-Unis
      .select__option.select__option--active
        svg.icon-32.mr-3
          use(href='/svg/32x32/line/flag-FR.svg#flag-FR-line-32')
        span France
      .select__option
        svg.icon-32.mr-3
          use(href='/svg/32x32/line/flag-IT.svg#flag-IT-line-32')
        span Italie
      .select__option
        svg.icon-32.mr-3
          use(href='/svg/32x32/line/flag-EN.svg#flag-EN-line-32')
        span Royaume-Uni
      .select__option
        svg.icon-32.mr-3
          use(href='/svg/32x32/line/flag-SU.svg#flag-SU-line-32')
        span Suisse
  .select__helper
    span Helper text or error
.select.select--error.mb-6
  label.select__label(for='select-error') Select error
  .select__container
    .select__input.color-grey--900
      svg.icon-32.mr-4
        use(href='/svg/32x32/line/flag-FR.svg#flag-FR-line-32')
      span France
    svg.icon-24.icon-rotate-180.select__chevron.ml-4
      use(href='/svg/24x24/line/chevron-up.svg#chevron-up-line-24')
    .select__options
      .select__option
        svg.icon-32.mr-3
          use(href='/svg/32x32/line/flag-DE.svg#flag-DE-line-32')
        span Allemagne
      .select__option
        svg.icon-32.mr-3
          use(href='/svg/32x32/line/flag-BE.svg#flag-BE-line-32')
        span Belgique
      .select__option
        svg.icon-32.mr-3
          use(href='/svg/32x32/line/flag-ES.svg#flag-ES-line-32')
        span Espagne
      .select__option
        svg.icon-32.mr-3
          use(href='/svg/32x32/line/flag-US.svg#flag-US-line-32')
        span États-Unis
      .select__option.select__option--active
        svg.icon-32.mr-3
          use(href='/svg/32x32/line/flag-FR.svg#flag-FR-line-32')
        span France
      .select__option
        svg.icon-32.mr-3
          use(href='/svg/32x32/line/flag-IT.svg#flag-IT-line-32')
        span Italie
      .select__option
        svg.icon-32.mr-3
          use(href='/svg/32x32/line/flag-EN.svg#flag-EN-line-32')
        span Royaume-Uni
      .select__option
        svg.icon-32.mr-3
          use(href='/svg/32x32/line/flag-SU.svg#flag-SU-line-32')
        span Suisse
  .select__helper
    span Helper text or error
.select.select--open.mb-6
  label.select__label(for='select-open') Select open
  .select__container
    .select__input.color-grey--900
      svg.icon-32.mr-4
        use(href='/svg/32x32/line/flag-FR.svg#flag-FR-line-32')
      span France
    svg.icon-24.icon-rotate-180.select__chevron.ml-4
      use(href='/svg/24x24/line/chevron-up.svg#chevron-up-line-24')
    .select__options
      .select__option
        svg.icon-32.mr-3
          use(href='/svg/32x32/line/flag-DE.svg#flag-DE-line-32')
        span Allemagne
      .select__option
        svg.icon-32.mr-3
          use(href='/svg/32x32/line/flag-BE.svg#flag-BE-line-32')
        span Belgique
      .select__option
        svg.icon-32.mr-3
          use(href='/svg/32x32/line/flag-ES.svg#flag-ES-line-32')
        span Espagne
      .select__option
        svg.icon-32.mr-3
          use(href='/svg/32x32/line/flag-US.svg#flag-US-line-32')
        span États-Unis
      .select__option.select__option--active
        svg.icon-32.mr-3
          use(href='/svg/32x32/line/flag-FR.svg#flag-FR-line-32')
        span France
      .select__option
        svg.icon-32.mr-3
          use(href='/svg/32x32/line/flag-IT.svg#flag-IT-line-32')
        span Italie
      .select__option
        svg.icon-32.mr-3
          use(href='/svg/32x32/line/flag-EN.svg#flag-EN-line-32')
        span Royaume-Uni
      .select__option
        svg.icon-32.mr-3
          use(href='/svg/32x32/line/flag-SU.svg#flag-SU-line-32')
        span Suisse
  .select__helper
    span Helper text or error

Select alt

Alternative version of Select element

link to Figma file

<div class="select-alt ma-6">
  <div class="select-alt__border"></div>
  <div class="select-alt__input color-grey--700">
    <div class="title-3">Choisissez</div>
  </div>
  <svg class="icon-16 icon-rotate-180 select-alt__chevron">
    <use href="/svg/16x16/line/chevron-up.svg#chevron-up-line-16"></use>
  </svg>
  <div class="select-alt__options">
    <div class="list-item">
      <div class="text">Choix 1</div>
    </div>
    <div class="list-item list-item--active">
      <div class="text">Choix 2 (actif)</div>
    </div>
    <div class="list-item">
      <div class="text">Choix 1</div>
    </div>
    <div class="list-item">
      <div class="text">Choix 1</div>
    </div>
    <div class="list-item">
      <div class="text">Choix 1</div>
    </div>
  </div>
</div>
<div class="select-alt ma-6">
  <div class="select-alt__border"></div>
  <div class="select-alt__input color-grey--900">
    <div class="title-3">Choix 2</div>
  </div>
  <svg class="icon-16 icon-rotate-180 select-alt__chevron">
    <use href="/svg/16x16/line/chevron-up.svg#chevron-up-line-16"></use>
  </svg>
  <div class="select-alt__options">
    <div class="list-item">
      <div class="text">Choix 1</div>
    </div>
    <div class="list-item list-item--active">
      <div class="text">Choix 2 (actif)</div>
    </div>
    <div class="list-item">
      <div class="text">Choix 1</div>
    </div>
    <div class="list-item">
      <div class="text">Choix 1</div>
    </div>
    <div class="list-item">
      <div class="text">Choix 1</div>
    </div>
  </div>
</div>
<div class="select-alt ma-6 select-alt--disabled">
  <div class="select-alt__border"></div>
  <div class="select-alt__input color-grey--600">
    <div class="title-3">Choisissez (disabled)</div>
  </div>
  <svg class="icon-16 icon-rotate-180 select-alt__chevron">
    <use href="/svg/16x16/line/chevron-up.svg#chevron-up-line-16"></use>
  </svg>
  <div class="select-alt__options">
    <div class="list-item">
      <div class="text">Choix 1</div>
    </div>
    <div class="list-item list-item--active">
      <div class="text">Choix 2 (actif)</div>
    </div>
    <div class="list-item">
      <div class="text">Choix 1</div>
    </div>
    <div class="list-item">
      <div class="text">Choix 1</div>
    </div>
    <div class="list-item">
      <div class="text">Choix 1</div>
    </div>
  </div>
</div>
<div class="select-alt ma-6 select-alt--error">
  <div class="select-alt__border"></div>
  <div class="select-alt__input color-grey--900">
    <div class="title-3">Choisissez (error)</div>
  </div>
  <svg class="icon-16 icon-rotate-180 select-alt__chevron">
    <use href="/svg/16x16/line/chevron-up.svg#chevron-up-line-16"></use>
  </svg>
  <div class="select-alt__options">
    <div class="list-item">
      <div class="text">Choix 1</div>
    </div>
    <div class="list-item list-item--active">
      <div class="text">Choix 2 (actif)</div>
    </div>
    <div class="list-item">
      <div class="text">Choix 1</div>
    </div>
    <div class="list-item">
      <div class="text">Choix 1</div>
    </div>
    <div class="list-item">
      <div class="text">Choix 1</div>
    </div>
  </div>
</div>
<div class="select-alt ma-6 select-alt--open">
  <div class="select-alt__border"></div>
  <div class="select-alt__input color-grey--700">
    <div class="title-3">Choisissez (open)</div>
  </div>
  <svg class="icon-16 icon-rotate-180 select-alt__chevron">
    <use href="/svg/16x16/line/chevron-up.svg#chevron-up-line-16"></use>
  </svg>
  <div class="select-alt__options">
    <div class="list-item">
      <div class="text">Choix 1</div>
    </div>
    <div class="list-item list-item--active">
      <div class="text">Choix 2 (actif)</div>
    </div>
    <div class="list-item">
      <div class="text">Choix 1</div>
    </div>
    <div class="list-item">
      <div class="text">Choix 1</div>
    </div>
    <div class="list-item">
      <div class="text">Choix 1</div>
    </div>
  </div>
</div>
.select-alt.ma-6
  .select-alt__border
  .select-alt__input.color-grey--700
    .title-3 Choisissez
  svg.icon-16.icon-rotate-180.select-alt__chevron
    use(href='/svg/16x16/line/chevron-up.svg#chevron-up-line-16')
  .select-alt__options
    .list-item
      .text Choix 1
    .list-item.list-item--active
      .text Choix 2 (actif)
    .list-item
      .text Choix 1
    .list-item
      .text Choix 1
    .list-item
      .text Choix 1
.select-alt.ma-6
  .select-alt__border
  .select-alt__input.color-grey--900
    .title-3 Choix 2
  svg.icon-16.icon-rotate-180.select-alt__chevron
    use(href='/svg/16x16/line/chevron-up.svg#chevron-up-line-16')
  .select-alt__options
    .list-item
      .text Choix 1
    .list-item.list-item--active
      .text Choix 2 (actif)
    .list-item
      .text Choix 1
    .list-item
      .text Choix 1
    .list-item
      .text Choix 1
.select-alt.ma-6.select-alt--disabled
  .select-alt__border
  .select-alt__input.color-grey--600
    .title-3 Choisissez (disabled)
  svg.icon-16.icon-rotate-180.select-alt__chevron
    use(href='/svg/16x16/line/chevron-up.svg#chevron-up-line-16')
  .select-alt__options
    .list-item
      .text Choix 1
    .list-item.list-item--active
      .text Choix 2 (actif)
    .list-item
      .text Choix 1
    .list-item
      .text Choix 1
    .list-item
      .text Choix 1
.select-alt.ma-6.select-alt--error
  .select-alt__border
  .select-alt__input.color-grey--900
    .title-3 Choisissez (error)
  svg.icon-16.icon-rotate-180.select-alt__chevron
    use(href='/svg/16x16/line/chevron-up.svg#chevron-up-line-16')
  .select-alt__options
    .list-item
      .text Choix 1
    .list-item.list-item--active
      .text Choix 2 (actif)
    .list-item
      .text Choix 1
    .list-item
      .text Choix 1
    .list-item
      .text Choix 1
.select-alt.ma-6.select-alt--open
  .select-alt__border
  .select-alt__input.color-grey--700
    .title-3 Choisissez (open)
  svg.icon-16.icon-rotate-180.select-alt__chevron
    use(href='/svg/16x16/line/chevron-up.svg#chevron-up-line-16')
  .select-alt__options
    .list-item
      .text Choix 1
    .list-item.list-item--active
      .text Choix 2 (actif)
    .list-item
      .text Choix 1
    .list-item
      .text Choix 1
    .list-item
      .text Choix 1

Select Autocomplete

<div class="select-accordion mb-6">
  <div class="select-accordion__container">
    <div class="input mb-6">
      <label class="input__label" for="input">Input</label>
      <div class="input__container">
        <svg class="icon-32 input__icon-prefix">
          <use href="/svg/32x32/line/search.svg#search-line-32"></use>
        </svg>
        <input type="text" id="input" placeholder="Input text goes here"/>
        <button class="btn-icon btn-icon--sm input__icon-suffix">
          <svg class="icon-24">
            <use href="/svg/24x24/line/chevron-up.svg#chevron-up-line-24"></use>
          </svg>
        </button>
      </div>
      <div class="input__helper"><span>Helper text or error</span></div>
    </div>
    <div class="select-accordion__options">
      <div class="select-accordion__option-header"><span>Option heading</span></div>
      <div class="select-accordion__option">
        <svg class="icon-32 mr-3">
          <use href="/svg/32x32/line/flag-DE.svg#flag-DE-line-32"></use>
        </svg><span class="select-accordion__option-label">Allemagne</span>
        <svg class="icon-24">
          <use href="/svg/24x24/line/chevron-up.svg#chevron-up-line-24"></use>
        </svg>
      </div>
      <div class="select-accordion__options select-accordion__sub-options">
        <div class="select-accordion__option select-accordion__sub-option">
          <div><span class="select-accordion__option-label">Berlin</span></div>
        </div>
        <div class="select-accordion__option select-accordion__sub-option">
          <div><span class="select-accordion__option-label">Munich</span></div>
        </div>
        <div class="select-accordion__option select-accordion__sub-option">
          <div><span class="select-accordion__option-label">Cologne</span></div>
        </div>
      </div>
      <div class="select-accordion__option">
        <svg class="icon-32 mr-3">
          <use href="/svg/32x32/line/flag-BE.svg#flag-BE-line-32"></use>
        </svg><span class="select-accordion__option-label">Belgique</span>
        <svg class="icon-24 icon-rotate-180 select__chevron ml-4">
          <use href="/svg/24x24/line/chevron-up.svg#chevron-up-line-24"></use>
        </svg>
      </div>
      <div class="select-accordion__option">
        <svg class="icon-32 mr-3">
          <use href="/svg/32x32/line/flag-ES.svg#flag-ES-line-32"></use>
        </svg><span class="select-accordion__option-label">Espagne</span>
        <svg class="icon-24 icon-rotate-180 select__chevron ml-4">
          <use href="/svg/24x24/line/chevron-up.svg#chevron-up-line-24"></use>
        </svg>
      </div>
      <div class="select-accordion__option">
        <svg class="icon-32 mr-3">
          <use href="/svg/32x32/line/flag-US.svg#flag-US-line-32"></use>
        </svg><span class="select-accordion__option-label">États-Unis</span>
        <svg class="icon-24 icon-rotate-180 select__chevron ml-4">
          <use href="/svg/24x24/line/chevron-up.svg#chevron-up-line-24"></use>
        </svg>
      </div>
      <div class="select-accordion__option-header"><span>Option heading</span></div>
      <div class="select-accordion__option select-accordion__option--active">
        <svg class="icon-32 mr-3">
          <use href="/svg/32x32/line/flag-FR.svg#flag-FR-line-32"></use>
        </svg><span class="select-accordion__option-label">France</span>
        <svg class="icon-24 icon-rotate-180 select__chevron ml-4">
          <use href="/svg/24x24/line/chevron-up.svg#chevron-up-line-24"></use>
        </svg>
      </div>
      <div class="select-accordion__option">
        <svg class="icon-32 mr-3">
          <use href="/svg/32x32/line/flag-IT.svg#flag-IT-line-32"></use>
        </svg><span class="select-accordion__option-label">Italie</span>
        <svg class="icon-24 icon-rotate-180 select__chevron ml-4">
          <use href="/svg/24x24/line/chevron-up.svg#chevron-up-line-24"></use>
        </svg>
      </div>
      <div class="select-accordion__option">
        <svg class="icon-32 mr-3">
          <use href="/svg/32x32/line/flag-EN.svg#flag-EN-line-32"></use>
        </svg><span class="select-accordion__option-label">Royaume-Uni</span>
        <svg class="icon-24 icon-rotate-180 select__chevron ml-4">
          <use href="/svg/24x24/line/chevron-up.svg#chevron-up-line-24"></use>
        </svg>
      </div>
      <div class="select-accordion__option">
        <svg class="icon-32 mr-3">
          <use href="/svg/32x32/line/flag-SU.svg#flag-SU-line-32"></use>
        </svg><span class="select-accordion__option-label">Suisse</span>
        <svg class="icon-24 icon-rotate-180 select__chevron ml-4">
          <use href="/svg/24x24/line/chevron-up.svg#chevron-up-line-24"></use>
        </svg>
      </div>
    </div>
  </div>
</div>
<div class="select-accordion mb-6 select-accordion--disabled">
  <div class="select-accordion__container">
    <div class="input mb-6">
      <label class="input__label" for="input">Input</label>
      <div class="input__container">
        <svg class="icon-32 input__icon-prefix">
          <use href="/svg/32x32/line/search.svg#search-line-32"></use>
        </svg>
        <input type="text" id="input" placeholder="Input text goes here"/>
        <button class="btn-icon btn-icon--sm input__icon-suffix">
          <svg class="icon-24">
            <use href="/svg/24x24/line/chevron-up.svg#chevron-up-line-24"></use>
          </svg>
        </button>
      </div>
      <div class="input__helper"><span>Helper text or error</span></div>
    </div>
    <div class="select-accordion__options">
      <div class="select-accordion__option-header"><span>Option heading</span></div>
      <div class="select-accordion__option">
        <svg class="icon-32 mr-3">
          <use href="/svg/32x32/line/flag-DE.svg#flag-DE-line-32"></use>
        </svg><span class="select-accordion__option-label">Allemagne</span>
        <svg class="icon-24">
          <use href="/svg/24x24/line/chevron-up.svg#chevron-up-line-24"></use>
        </svg>
      </div>
      <div class="select-accordion__options select-accordion__sub-options">
        <div class="select-accordion__option select-accordion__sub-option">
          <div><span class="select-accordion__option-label">Berlin</span></div>
        </div>
        <div class="select-accordion__option select-accordion__sub-option">
          <div><span class="select-accordion__option-label">Munich</span></div>
        </div>
        <div class="select-accordion__option select-accordion__sub-option">
          <div><span class="select-accordion__option-label">Cologne</span></div>
        </div>
      </div>
      <div class="select-accordion__option">
        <svg class="icon-32 mr-3">
          <use href="/svg/32x32/line/flag-BE.svg#flag-BE-line-32"></use>
        </svg><span class="select-accordion__option-label">Belgique</span>
        <svg class="icon-24 icon-rotate-180 select__chevron ml-4">
          <use href="/svg/24x24/line/chevron-up.svg#chevron-up-line-24"></use>
        </svg>
      </div>
      <div class="select-accordion__option">
        <svg class="icon-32 mr-3">
          <use href="/svg/32x32/line/flag-ES.svg#flag-ES-line-32"></use>
        </svg><span class="select-accordion__option-label">Espagne</span>
        <svg class="icon-24 icon-rotate-180 select__chevron ml-4">
          <use href="/svg/24x24/line/chevron-up.svg#chevron-up-line-24"></use>
        </svg>
      </div>
      <div class="select-accordion__option">
        <svg class="icon-32 mr-3">
          <use href="/svg/32x32/line/flag-US.svg#flag-US-line-32"></use>
        </svg><span class="select-accordion__option-label">États-Unis</span>
        <svg class="icon-24 icon-rotate-180 select__chevron ml-4">
          <use href="/svg/24x24/line/chevron-up.svg#chevron-up-line-24"></use>
        </svg>
      </div>
      <div class="select-accordion__option-header"><span>Option heading</span></div>
      <div class="select-accordion__option select-accordion__option--active">
        <svg class="icon-32 mr-3">
          <use href="/svg/32x32/line/flag-FR.svg#flag-FR-line-32"></use>
        </svg><span class="select-accordion__option-label">France</span>
        <svg class="icon-24 icon-rotate-180 select__chevron ml-4">
          <use href="/svg/24x24/line/chevron-up.svg#chevron-up-line-24"></use>
        </svg>
      </div>
      <div class="select-accordion__option">
        <svg class="icon-32 mr-3">
          <use href="/svg/32x32/line/flag-IT.svg#flag-IT-line-32"></use>
        </svg><span class="select-accordion__option-label">Italie</span>
        <svg class="icon-24 icon-rotate-180 select__chevron ml-4">
          <use href="/svg/24x24/line/chevron-up.svg#chevron-up-line-24"></use>
        </svg>
      </div>
      <div class="select-accordion__option">
        <svg class="icon-32 mr-3">
          <use href="/svg/32x32/line/flag-EN.svg#flag-EN-line-32"></use>
        </svg><span class="select-accordion__option-label">Royaume-Uni</span>
        <svg class="icon-24 icon-rotate-180 select__chevron ml-4">
          <use href="/svg/24x24/line/chevron-up.svg#chevron-up-line-24"></use>
        </svg>
      </div>
      <div class="select-accordion__option">
        <svg class="icon-32 mr-3">
          <use href="/svg/32x32/line/flag-SU.svg#flag-SU-line-32"></use>
        </svg><span class="select-accordion__option-label">Suisse</span>
        <svg class="icon-24 icon-rotate-180 select__chevron ml-4">
          <use href="/svg/24x24/line/chevron-up.svg#chevron-up-line-24"></use>
        </svg>
      </div>
    </div>
  </div>
</div>
<div class="select-accordion mb-6 select-accordion--open">
  <div class="select-accordion__container">
    <div class="input mb-6">
      <label class="input__label" for="input">Input</label>
      <div class="input__container">
        <svg class="icon-32 input__icon-prefix">
          <use href="/svg/32x32/line/search.svg#search-line-32"></use>
        </svg>
        <input type="text" id="input" placeholder="Input text goes here"/>
        <button class="btn-icon btn-icon--sm input__icon-suffix">
          <svg class="icon-24">
            <use href="/svg/24x24/line/chevron-up.svg#chevron-up-line-24"></use>
          </svg>
        </button>
      </div>
      <div class="input__helper"><span>Helper text or error</span></div>
    </div>
    <div class="select-accordion__options">
      <div class="select-accordion__option-header"><span>Option heading</span></div>
      <div class="select-accordion__option">
        <svg class="icon-32 mr-3">
          <use href="/svg/32x32/line/flag-DE.svg#flag-DE-line-32"></use>
        </svg><span class="select-accordion__option-label">Allemagne</span>
        <svg class="icon-24">
          <use href="/svg/24x24/line/chevron-up.svg#chevron-up-line-24"></use>
        </svg>
      </div>
      <div class="select-accordion__options select-accordion__sub-options select-accordion__options-sub--open">
        <div class="select-accordion__option select-accordion__sub-option">
          <div><span class="select-accordion__option-label">Berlin</span></div>
        </div>
        <div class="select-accordion__option select-accordion__sub-option">
          <div><span class="select-accordion__option-label">Munich</span></div>
        </div>
        <div class="select-accordion__option select-accordion__sub-option">
          <div><span class="select-accordion__option-label">Cologne</span></div>
        </div>
      </div>
      <div class="select-accordion__option">
        <svg class="icon-32 mr-3">
          <use href="/svg/32x32/line/flag-BE.svg#flag-BE-line-32"></use>
        </svg><span class="select-accordion__option-label">Belgique</span>
        <svg class="icon-24 icon-rotate-180 select__chevron ml-4">
          <use href="/svg/24x24/line/chevron-up.svg#chevron-up-line-24"></use>
        </svg>
      </div>
      <div class="select-accordion__option">
        <svg class="icon-32 mr-3">
          <use href="/svg/32x32/line/flag-ES.svg#flag-ES-line-32"></use>
        </svg><span class="select-accordion__option-label">Espagne</span>
        <svg class="icon-24 icon-rotate-180 select__chevron ml-4">
          <use href="/svg/24x24/line/chevron-up.svg#chevron-up-line-24"></use>
        </svg>
      </div>
      <div class="select-accordion__option">
        <svg class="icon-32 mr-3">
          <use href="/svg/32x32/line/flag-US.svg#flag-US-line-32"></use>
        </svg><span class="select-accordion__option-label">États-Unis</span>
        <svg class="icon-24 icon-rotate-180 select__chevron ml-4">
          <use href="/svg/24x24/line/chevron-up.svg#chevron-up-line-24"></use>
        </svg>
      </div>
      <div class="select-accordion__option-header"><span>Option heading</span></div>
      <div class="select-accordion__option select-accordion__option--active">
        <svg class="icon-32 mr-3">
          <use href="/svg/32x32/line/flag-FR.svg#flag-FR-line-32"></use>
        </svg><span class="select-accordion__option-label">France</span>
        <svg class="icon-24 icon-rotate-180 select__chevron ml-4">
          <use href="/svg/24x24/line/chevron-up.svg#chevron-up-line-24"></use>
        </svg>
      </div>
      <div class="select-accordion__option">
        <svg class="icon-32 mr-3">
          <use href="/svg/32x32/line/flag-IT.svg#flag-IT-line-32"></use>
        </svg><span class="select-accordion__option-label">Italie</span>
        <svg class="icon-24 icon-rotate-180 select__chevron ml-4">
          <use href="/svg/24x24/line/chevron-up.svg#chevron-up-line-24"></use>
        </svg>
      </div>
      <div class="select-accordion__option">
        <svg class="icon-32 mr-3">
          <use href="/svg/32x32/line/flag-EN.svg#flag-EN-line-32"></use>
        </svg><span class="select-accordion__option-label">Royaume-Uni</span>
        <svg class="icon-24 icon-rotate-180 select__chevron ml-4">
          <use href="/svg/24x24/line/chevron-up.svg#chevron-up-line-24"></use>
        </svg>
      </div>
      <div class="select-accordion__option">
        <svg class="icon-32 mr-3">
          <use href="/svg/32x32/line/flag-SU.svg#flag-SU-line-32"></use>
        </svg><span class="select-accordion__option-label">Suisse</span>
        <svg class="icon-24 icon-rotate-180 select__chevron ml-4">
          <use href="/svg/24x24/line/chevron-up.svg#chevron-up-line-24"></use>
        </svg>
      </div>
    </div>
  </div>
</div>
.select-accordion.mb-6
  .select-accordion__container
    .input.mb-6
      label.input__label(for='input') Input
      .input__container
        svg.icon-32.input__icon-prefix
          use(href='/svg/32x32/line/search.svg#search-line-32')
        input#input(type='text', placeholder='Input text goes here')
        button.btn-icon.btn-icon--sm.input__icon-suffix
          svg.icon-24
            use(href='/svg/24x24/line/chevron-up.svg#chevron-up-line-24')
      .input__helper
        span Helper text or error
    .select-accordion__options
      .select-accordion__option-header
        span Option heading
      .select-accordion__option
        svg.icon-32.mr-3
          use(href='/svg/32x32/line/flag-DE.svg#flag-DE-line-32')
        span.select-accordion__option-label Allemagne
        svg.icon-24
          use(href='/svg/24x24/line/chevron-up.svg#chevron-up-line-24')
      .select-accordion__options.select-accordion__sub-options
        .select-accordion__option.select-accordion__sub-option
          div
            span.select-accordion__option-label Berlin
        .select-accordion__option.select-accordion__sub-option
          div
            span.select-accordion__option-label Munich
        .select-accordion__option.select-accordion__sub-option
          div
            span.select-accordion__option-label Cologne
      .select-accordion__option
        svg.icon-32.mr-3
          use(href='/svg/32x32/line/flag-BE.svg#flag-BE-line-32')
        span.select-accordion__option-label Belgique
        svg.icon-24.icon-rotate-180.select__chevron.ml-4
          use(href='/svg/24x24/line/chevron-up.svg#chevron-up-line-24')
      .select-accordion__option
        svg.icon-32.mr-3
          use(href='/svg/32x32/line/flag-ES.svg#flag-ES-line-32')
        span.select-accordion__option-label Espagne
        svg.icon-24.icon-rotate-180.select__chevron.ml-4
          use(href='/svg/24x24/line/chevron-up.svg#chevron-up-line-24')
      .select-accordion__option
        svg.icon-32.mr-3
          use(href='/svg/32x32/line/flag-US.svg#flag-US-line-32')
        span.select-accordion__option-label États-Unis
        svg.icon-24.icon-rotate-180.select__chevron.ml-4
          use(href='/svg/24x24/line/chevron-up.svg#chevron-up-line-24')
      .select-accordion__option-header
        span Option heading
      .select-accordion__option.select-accordion__option--active
        svg.icon-32.mr-3
          use(href='/svg/32x32/line/flag-FR.svg#flag-FR-line-32')
        span.select-accordion__option-label France
        svg.icon-24.icon-rotate-180.select__chevron.ml-4
          use(href='/svg/24x24/line/chevron-up.svg#chevron-up-line-24')
      .select-accordion__option
        svg.icon-32.mr-3
          use(href='/svg/32x32/line/flag-IT.svg#flag-IT-line-32')
        span.select-accordion__option-label Italie
        svg.icon-24.icon-rotate-180.select__chevron.ml-4
          use(href='/svg/24x24/line/chevron-up.svg#chevron-up-line-24')
      .select-accordion__option
        svg.icon-32.mr-3
          use(href='/svg/32x32/line/flag-EN.svg#flag-EN-line-32')
        span.select-accordion__option-label Royaume-Uni
        svg.icon-24.icon-rotate-180.select__chevron.ml-4
          use(href='/svg/24x24/line/chevron-up.svg#chevron-up-line-24')
      .select-accordion__option
        svg.icon-32.mr-3
          use(href='/svg/32x32/line/flag-SU.svg#flag-SU-line-32')
        span.select-accordion__option-label Suisse
        svg.icon-24.icon-rotate-180.select__chevron.ml-4
          use(href='/svg/24x24/line/chevron-up.svg#chevron-up-line-24')
.select-accordion.mb-6.select-accordion--disabled
  .select-accordion__container
    .input.mb-6
      label.input__label(for='input') Input
      .input__container
        svg.icon-32.input__icon-prefix
          use(href='/svg/32x32/line/search.svg#search-line-32')
        input#input(type='text', placeholder='Input text goes here')
        button.btn-icon.btn-icon--sm.input__icon-suffix
          svg.icon-24
            use(href='/svg/24x24/line/chevron-up.svg#chevron-up-line-24')
      .input__helper
        span Helper text or error
    .select-accordion__options
      .select-accordion__option-header
        span Option heading
      .select-accordion__option
        svg.icon-32.mr-3
          use(href='/svg/32x32/line/flag-DE.svg#flag-DE-line-32')
        span.select-accordion__option-label Allemagne
        svg.icon-24
          use(href='/svg/24x24/line/chevron-up.svg#chevron-up-line-24')
      .select-accordion__options.select-accordion__sub-options
        .select-accordion__option.select-accordion__sub-option
          div
            span.select-accordion__option-label Berlin
        .select-accordion__option.select-accordion__sub-option
          div
            span.select-accordion__option-label Munich
        .select-accordion__option.select-accordion__sub-option
          div
            span.select-accordion__option-label Cologne
      .select-accordion__option
        svg.icon-32.mr-3
          use(href='/svg/32x32/line/flag-BE.svg#flag-BE-line-32')
        span.select-accordion__option-label Belgique
        svg.icon-24.icon-rotate-180.select__chevron.ml-4
          use(href='/svg/24x24/line/chevron-up.svg#chevron-up-line-24')
      .select-accordion__option
        svg.icon-32.mr-3
          use(href='/svg/32x32/line/flag-ES.svg#flag-ES-line-32')
        span.select-accordion__option-label Espagne
        svg.icon-24.icon-rotate-180.select__chevron.ml-4
          use(href='/svg/24x24/line/chevron-up.svg#chevron-up-line-24')
      .select-accordion__option
        svg.icon-32.mr-3
          use(href='/svg/32x32/line/flag-US.svg#flag-US-line-32')
        span.select-accordion__option-label États-Unis
        svg.icon-24.icon-rotate-180.select__chevron.ml-4
          use(href='/svg/24x24/line/chevron-up.svg#chevron-up-line-24')
      .select-accordion__option-header
        span Option heading
      .select-accordion__option.select-accordion__option--active
        svg.icon-32.mr-3
          use(href='/svg/32x32/line/flag-FR.svg#flag-FR-line-32')
        span.select-accordion__option-label France
        svg.icon-24.icon-rotate-180.select__chevron.ml-4
          use(href='/svg/24x24/line/chevron-up.svg#chevron-up-line-24')
      .select-accordion__option
        svg.icon-32.mr-3
          use(href='/svg/32x32/line/flag-IT.svg#flag-IT-line-32')
        span.select-accordion__option-label Italie
        svg.icon-24.icon-rotate-180.select__chevron.ml-4
          use(href='/svg/24x24/line/chevron-up.svg#chevron-up-line-24')
      .select-accordion__option
        svg.icon-32.mr-3
          use(href='/svg/32x32/line/flag-EN.svg#flag-EN-line-32')
        span.select-accordion__option-label Royaume-Uni
        svg.icon-24.icon-rotate-180.select__chevron.ml-4
          use(href='/svg/24x24/line/chevron-up.svg#chevron-up-line-24')
      .select-accordion__option
        svg.icon-32.mr-3
          use(href='/svg/32x32/line/flag-SU.svg#flag-SU-line-32')
        span.select-accordion__option-label Suisse
        svg.icon-24.icon-rotate-180.select__chevron.ml-4
          use(href='/svg/24x24/line/chevron-up.svg#chevron-up-line-24')
.select-accordion.mb-6.select-accordion--open
  .select-accordion__container
    .input.mb-6
      label.input__label(for='input') Input
      .input__container
        svg.icon-32.input__icon-prefix
          use(href='/svg/32x32/line/search.svg#search-line-32')
        input#input(type='text', placeholder='Input text goes here')
        button.btn-icon.btn-icon--sm.input__icon-suffix
          svg.icon-24
            use(href='/svg/24x24/line/chevron-up.svg#chevron-up-line-24')
      .input__helper
        span Helper text or error
    .select-accordion__options
      .select-accordion__option-header
        span Option heading
      .select-accordion__option
        svg.icon-32.mr-3
          use(href='/svg/32x32/line/flag-DE.svg#flag-DE-line-32')
        span.select-accordion__option-label Allemagne
        svg.icon-24
          use(href='/svg/24x24/line/chevron-up.svg#chevron-up-line-24')
      .select-accordion__options.select-accordion__sub-options.select-accordion__options-sub--open
        .select-accordion__option.select-accordion__sub-option
          div
            span.select-accordion__option-label Berlin
        .select-accordion__option.select-accordion__sub-option
          div
            span.select-accordion__option-label Munich
        .select-accordion__option.select-accordion__sub-option
          div
            span.select-accordion__option-label Cologne
      .select-accordion__option
        svg.icon-32.mr-3
          use(href='/svg/32x32/line/flag-BE.svg#flag-BE-line-32')
        span.select-accordion__option-label Belgique
        svg.icon-24.icon-rotate-180.select__chevron.ml-4
          use(href='/svg/24x24/line/chevron-up.svg#chevron-up-line-24')
      .select-accordion__option
        svg.icon-32.mr-3
          use(href='/svg/32x32/line/flag-ES.svg#flag-ES-line-32')
        span.select-accordion__option-label Espagne
        svg.icon-24.icon-rotate-180.select__chevron.ml-4
          use(href='/svg/24x24/line/chevron-up.svg#chevron-up-line-24')
      .select-accordion__option
        svg.icon-32.mr-3
          use(href='/svg/32x32/line/flag-US.svg#flag-US-line-32')
        span.select-accordion__option-label États-Unis
        svg.icon-24.icon-rotate-180.select__chevron.ml-4
          use(href='/svg/24x24/line/chevron-up.svg#chevron-up-line-24')
      .select-accordion__option-header
        span Option heading
      .select-accordion__option.select-accordion__option--active
        svg.icon-32.mr-3
          use(href='/svg/32x32/line/flag-FR.svg#flag-FR-line-32')
        span.select-accordion__option-label France
        svg.icon-24.icon-rotate-180.select__chevron.ml-4
          use(href='/svg/24x24/line/chevron-up.svg#chevron-up-line-24')
      .select-accordion__option
        svg.icon-32.mr-3
          use(href='/svg/32x32/line/flag-IT.svg#flag-IT-line-32')
        span.select-accordion__option-label Italie
        svg.icon-24.icon-rotate-180.select__chevron.ml-4
          use(href='/svg/24x24/line/chevron-up.svg#chevron-up-line-24')
      .select-accordion__option
        svg.icon-32.mr-3
          use(href='/svg/32x32/line/flag-EN.svg#flag-EN-line-32')
        span.select-accordion__option-label Royaume-Uni
        svg.icon-24.icon-rotate-180.select__chevron.ml-4
          use(href='/svg/24x24/line/chevron-up.svg#chevron-up-line-24')
      .select-accordion__option
        svg.icon-32.mr-3
          use(href='/svg/32x32/line/flag-SU.svg#flag-SU-line-32')
        span.select-accordion__option-label Suisse
        svg.icon-24.icon-rotate-180.select__chevron.ml-4
          use(href='/svg/24x24/line/chevron-up.svg#chevron-up-line-24')
<div class="list-item">
  <div class="text">List item (hover me)</div>
</div>
<div class="list-item list-item--active">
  <div class="text">List item (active)</div>
</div>
.list-item
  .text List item (hover me)
.list-item.list-item--active
  .text List item (active)
<div class="nav-pills">
  <div class="nav-pills__link">First link
  </div>
  <div class="nav-pills__link nav-pills__link--active">Second link
  </div>
  <div class="nav-pills__link">Third link with a longer text
  </div>
</div>
.nav-pills
  .nav-pills__link.
    First link
    
  .nav-pills__link.nav-pills__link--active.
    Second link
    
  .nav-pills__link.
    Third link with a longer text
    

Option

<div class="option my-4">
  <svg class="icon-40 icon-color-grey--700">
    <use href="/svg/40x40/line/flag-FR.svg#flag-FR-line-40"></use>
  </svg><span class="text-action">France</span>
  <svg class="icon-32 icon-rotate-90 option__arrow">
    <use href="/svg/32x32/line/arrow-up.svg#arrow-up-line-32"></use>
  </svg>
</div>
<div class="option my-4">
  <svg class="icon-40 icon-color-grey--700">
    <use href="/svg/40x40/line/more-horizontal.svg#more-horizontal-line-40"></use>
  </svg><span class="text-action">Autre</span>
  <svg class="icon-32 icon-rotate-90 option__arrow">
    <use href="/svg/32x32/line/arrow-up.svg#arrow-up-line-32"></use>
  </svg>
</div>
.option.my-4
  svg.icon-40.icon-color-grey--700
    use(href='/svg/40x40/line/flag-FR.svg#flag-FR-line-40')
  span.text-action France
  svg.icon-32.icon-rotate-90.option__arrow
    use(href='/svg/32x32/line/arrow-up.svg#arrow-up-line-32')
.option.my-4
  svg.icon-40.icon-color-grey--700
    use(href='/svg/40x40/line/more-horizontal.svg#more-horizontal-line-40')
  span.text-action Autre
  svg.icon-32.icon-rotate-90.option__arrow
    use(href='/svg/32x32/line/arrow-up.svg#arrow-up-line-32')

Tab item

Simple tab element with different states:

  • Default
  • Hover
  • Active .tab-item--active
  • Disabled .tab-item--disabled
<div class="tab-item mr-2">
  <div class="tab-item__content">
    <div class="tab-item__content-banner"></div>
    <svg class="icon-16 mr-2 icon-color-grey--700">
      <use href="/svg/16x16/line/rights.svg#rights-line-16"></use>
    </svg>
    <div class="text-label">Default state (hover me)</div>
  </div>
  <div class="tab-item__bottom-banner"></div>
</div>
<div class="tab-item mr-2 tab-item--active">
  <div class="tab-item__content">
    <div class="tab-item__content-banner"></div>
    <svg class="icon-16 mr-2 icon-color-primary--500">
      <use href="/svg/16x16/line/user-group.svg#user-group-line-16"></use>
    </svg>
    <div class="text-label">Active tab</div>
  </div>
  <div class="tab-item__bottom-banner"></div>
</div>
<div class="tab-item mr-2 tab-item--disabled">
  <div class="tab-item__content">
    <div class="tab-item__content-banner"></div>
    <svg class="icon-16 mr-2 icon-color-grey--700">
      <use href="/svg/16x16/line/wallet.svg#wallet-line-16"></use>
    </svg>
    <div class="text-label">Disabled tab</div>
  </div>
  <div class="tab-item__bottom-banner"></div>
</div>
.tab-item.mr-2
  .tab-item__content
    .tab-item__content-banner
    svg.icon-16.mr-2.icon-color-grey--700
      use(href='/svg/16x16/line/rights.svg#rights-line-16')
    .text-label Default state (hover me)
  .tab-item__bottom-banner
.tab-item.mr-2.tab-item--active
  .tab-item__content
    .tab-item__content-banner
    svg.icon-16.mr-2.icon-color-primary--500
      use(href='/svg/16x16/line/user-group.svg#user-group-line-16')
    .text-label Active tab
  .tab-item__bottom-banner
.tab-item.mr-2.tab-item--disabled
  .tab-item__content
    .tab-item__content-banner
    svg.icon-16.mr-2.icon-color-grey--700
      use(href='/svg/16x16/line/wallet.svg#wallet-line-16')
    .text-label Disabled tab
  .tab-item__bottom-banner