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 (card title)
  • .prismea-card--slot (card body, -by definition the most customizable part-)
  • .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 -color-light -positive">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 -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
  </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
  </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.-color-light.-positive.
    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.-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
    
  .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
    
  .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 -error">
  <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.-error
  .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)