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

Carousel Card

<div class="prismea-carousel-card -primary">
  <div class="prismea-carousel-card--action">
    <button class="prismea-icon-button -circle -color-primary"><i class="prismea-icon-button--icon prismea-glyph-16_settings"></i></button>
  </div>
  <div class="prismea-carousel-card--body">
    <div class="prismea-carousel-card--icon"><i class="prismea-icon prismea-glyph-24_balance"></i>
    </div>
    <div class="prismea-carousel-card--heading">
      <p class="prismea-text">Sub Label</p>
    </div>
    <div class="prismea-carousel-card--label">
      <p class="prismea-text">Main label</p>
    </div>
    <div class="prismea-carousel-card--footer">
      <p class="prismea-text -text-xs">Footer action</p>
    </div>
  </div>
</div>
<div class="prismea-carousel-card -selected">
  <div class="prismea-carousel-card--action">
    <button class="prismea-icon-button -circle -color-primary"><i class="prismea-icon-button--icon prismea-glyph-16_settings"></i></button>
  </div>
  <div class="prismea-carousel-card--body">
    <div class="prismea-carousel-card--heading">
      <p class="prismea-text">Sub Label</p>
      <p class="prismea-text">Sub Label 2</p>
    </div>
    <div class="prismea-carousel-card--label">
      <p class="prismea-text">Main label</p>
    </div>
    <div class="prismea-carousel-card--footer">
      <p class="prismea-text -text-xs">Footer action</p>
    </div>
  </div>
</div>
<div class="prismea-carousel-card">
  <div class="prismea-carousel-card--action">
    <button class="prismea-icon-button -circle -color-primary"><i class="prismea-icon-button--icon prismea-glyph-16_settings"></i></button>
  </div>
  <div class="prismea-carousel-card--body">
    <div class="prismea-carousel-card--heading">
      <p class="prismea-text">Sub Label</p>
      <p class="prismea-text">Sub Label 2</p>
    </div>
    <div class="prismea-carousel-card--label">
      <p class="prismea-text">Main label</p>
    </div>
    <div class="prismea-carousel-card--footer">
      <p class="prismea-text -text-xs">Footer action</p>
    </div>
  </div>
</div>
<div class="prismea-carousel-card">
  <div class="prismea-carousel-card--action">
    <button class="prismea-icon-button -circle -color-primary"><i class="prismea-icon-button--icon prismea-glyph-16_settings"></i></button>
  </div>
  <div class="prismea-carousel-card--body"><span class="prismea-badge -rounded -Badge -uppercase prismea-horizontal-spacing-5--slot">Badge</span>
    <div class="prismea-carousel-card--heading">
      <p class="prismea-text">Sub Label</p>
      <p class="prismea-text">Sub Label 2</p>
    </div>
    <div class="prismea-carousel-card--button">
      <button class="prismea-icon-button -circle -color-primary"><i class="prismea-icon-button--icon prismea-glyph-16_recurrence"></i></button>
    </div>
  </div>
</div>
<div class="prismea-carousel-card -disabled">
  <div class="prismea-carousel-card--action">
    <button class="prismea-icon-button -circle -color-primary"><i class="prismea-icon-button--icon prismea-glyph-16_settings"></i></button>
  </div>
  <div class="prismea-carousel-card--body"><span class="prismea-badge -rounded -Badge -uppercase prismea-horizontal-spacing-5--slot">Badge</span>
    <div class="prismea-carousel-card--heading">
      <p class="prismea-text">Sub Label</p>
      <p class="prismea-text">Sub Label 2</p>
    </div>
    <div class="prismea-carousel-card--button">
      <button class="prismea-icon-button -circle -color-primary"><i class="prismea-icon-button--icon prismea-glyph-16_recurrence"></i></button>
    </div>
  </div>
</div>
<div class="prismea-carousel-card -disabled">
  <div class="prismea-carousel-card--action">
    <button class="prismea-icon-button -circle -color-primary"><i class="prismea-icon-button--icon prismea-glyph-16_settings"></i></button>
  </div>
  <div class="prismea-carousel-card--body">
    <div class="prismea-carousel-card--heading">
      <p class="prismea-text">Sub Label</p>
      <p class="prismea-text">Sub Label 2</p>
    </div>
    <div class="prismea-carousel-card--button"><span class="prismea-badge -rounded -Badge -uppercase prismea-horizontal-spacing-5--slot">Badge</span>
    </div>
  </div>
</div>
.prismea-carousel-card.-primary
  .prismea-carousel-card--action
    button.prismea-icon-button.-circle.-color-primary
      i.prismea-icon-button--icon.prismea-glyph-16_settings
  .prismea-carousel-card--body
    .prismea-carousel-card--icon
      i.prismea-icon.prismea-glyph-24_balance
    .prismea-carousel-card--heading
      p.prismea-text Sub Label
    .prismea-carousel-card--label
      p.prismea-text Main label
    .prismea-carousel-card--footer
      p.prismea-text.-text-xs Footer action
.prismea-carousel-card.-selected
  .prismea-carousel-card--action
    button.prismea-icon-button.-circle.-color-primary
      i.prismea-icon-button--icon.prismea-glyph-16_settings
  .prismea-carousel-card--body
    .prismea-carousel-card--heading
      p.prismea-text Sub Label
      p.prismea-text Sub Label 2
    .prismea-carousel-card--label
      p.prismea-text Main label
    .prismea-carousel-card--footer
      p.prismea-text.-text-xs Footer action
.prismea-carousel-card
  .prismea-carousel-card--action
    button.prismea-icon-button.-circle.-color-primary
      i.prismea-icon-button--icon.prismea-glyph-16_settings
  .prismea-carousel-card--body
    .prismea-carousel-card--heading
      p.prismea-text Sub Label
      p.prismea-text Sub Label 2
    .prismea-carousel-card--label
      p.prismea-text Main label
    .prismea-carousel-card--footer
      p.prismea-text.-text-xs Footer action
.prismea-carousel-card
  .prismea-carousel-card--action
    button.prismea-icon-button.-circle.-color-primary
      i.prismea-icon-button--icon.prismea-glyph-16_settings
  .prismea-carousel-card--body
    span.prismea-badge.-rounded.-Badge.-uppercase.prismea-horizontal-spacing-5--slot Badge
    .prismea-carousel-card--heading
      p.prismea-text Sub Label
      p.prismea-text Sub Label 2
    .prismea-carousel-card--button
      button.prismea-icon-button.-circle.-color-primary
        i.prismea-icon-button--icon.prismea-glyph-16_recurrence
.prismea-carousel-card.-disabled
  .prismea-carousel-card--action
    button.prismea-icon-button.-circle.-color-primary
      i.prismea-icon-button--icon.prismea-glyph-16_settings
  .prismea-carousel-card--body
    span.prismea-badge.-rounded.-Badge.-uppercase.prismea-horizontal-spacing-5--slot Badge
    .prismea-carousel-card--heading
      p.prismea-text Sub Label
      p.prismea-text Sub Label 2
    .prismea-carousel-card--button
      button.prismea-icon-button.-circle.-color-primary
        i.prismea-icon-button--icon.prismea-glyph-16_recurrence
.prismea-carousel-card.-disabled
  .prismea-carousel-card--action
    button.prismea-icon-button.-circle.-color-primary
      i.prismea-icon-button--icon.prismea-glyph-16_settings
  .prismea-carousel-card--body
    .prismea-carousel-card--heading
      p.prismea-text Sub Label
      p.prismea-text Sub Label 2
    .prismea-carousel-card--button
      span.prismea-badge.-rounded.-Badge.-uppercase.prismea-horizontal-spacing-5--slot Badge

Chart Card

<div class="prismea-card prismea-chart-card" style="margin-bottom:30px;">
  <div class="prismea-card--title">
    <div class="prismea-horizontal-spacing-10 -middle">
      <div class="prismea-horizontal-spacing-15--slot"><i class="prismea-icon -x1 prismea-glyph-16_admin-sub"></i>
      </div>
      <div class="prismea-horizontal-spacing-15--slot">
        <p class="prismea-text">Chart with selectors
        </p>
      </div>
    </div>
  </div>
  <div class="prismea-card--body">
    <div class="prismea-card--slot">
      <div class="prismea-chart--container -height-400" style="background-color: lightgrey; display: flex; align-items: center; justify-content:center;"><span class="prismea-text" style="width: 600px;text-align:center;">Chart</span></div>
    </div>
  </div>
</div>
<div class="prismea-card prismea-chart-card" style="margin-bottom:30px;">
  <div class="prismea-card--title">
    <div class="prismea-horizontal-spacing-10 -middle">
      <div class="prismea-horizontal-spacing-15--slot"><i class="prismea-icon -x1 prismea-glyph-16_admin-sub"></i>
      </div>
      <div class="prismea-horizontal-spacing-15--slot">
        <p class="prismea-text">Chart with filters
        </p>
      </div>
    </div>
  </div>
  <div class="prismea-card--body">
    <div class="prismea-card--slot -with-filters">
      <div class="prismea-chart--container -height-400" style="background-color: lightgrey; display: flex; align-items: center; justify-content:center;"><span class="prismea-text" style="width: 600px;text-align:center;">Chart</span></div>
      <div class="prismea-chart--filters -height-400">
        <div class="prismea-categories-filters">
          <div class="categories-filters-table-head">
            <div class="categories-filters-table-cell -middle">
              <p class="prismea-text -text-bold -uppercase">Catégories</p>
            </div>
            <div class="categories-filters-table-cell -justify-end">
              <p class="prismea-text -text-bold -uppercase">12 derniers mois</p>
            </div>
            <div class="categories-filters-table-cell -justify-end">
              <div class="prismea-horizontal-spacing-5 -middle">
                <div class="search-select-filter is-open">
                  <div class="select-head"><i class="prismea-icon prismea-glyph-12_caret-up"></i>
                    <p class="prismea-text -text-bold -uppercase">Nov. 2020</p>
                  </div>
                  <div class="options">
                    <div class="divider"></div>
                    <ul>
                      <li><span>Sept. 2020</span></li>
                      <li><span>Août 2020</span></li>
                    </ul>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="categories-filters-table-body">
            <div class="category-table">
              <div class="category-table-row">
                <div class="category-table-cell">
                  <div class="prismea-horizontal-spacing-10 -middle">
                    <div class="prismea-horizontal-spacing-10--slot">
                      <div class="checkbox checkbox-color-purple--400">
                        <input type="checkbox" checked="checked"/>
                        <label>
                          <svg class="icon-24 icon-color-white">
                            <use href="/svg/24x24/line/validate-alt.svg#validate-alt-line-24"></use>
                          </svg>
                        </label>
                      </div>
                    </div>
                    <div class="prismea-horizontal-spacing-10--slot">
                      <svg class="icon-24 icon-color-purple--400">
                        <use href="/svg/24x24/line/shop.svg#shop-line-24"></use>
                      </svg>
                    </div>
                    <div class="prismea-horizontal-spacing-10--slot">
                      <p class="prismea-text prismea-color color-purple--400">Group of categories label</p>
                    </div>
                  </div>
                </div>
                <div class="category-table-cell -justify-end -middle">
                  <p class="prismea-numeral">8 647,00 €</p>
                </div>
                <div class="category-table-cell -justify-end -middle">
                  <p class="prismea-numeral">8 647,00 €</p>
                </div>
              </div>
            </div>
            <div class="category-table">
              <div class="category-table-row">
                <div class="category-table-cell">
                  <div class="prismea-horizontal-spacing-10 -middle">
                    <div class="prismea-horizontal-spacing-10--slot">
                      <div class="checkbox checkbox-color-brown--400">
                        <input type="checkbox" checked="checked"/>
                        <label>
                          <svg class="icon-24 icon-color-white">
                            <use href="/svg/24x24/line/validate-alt.svg#validate-alt-line-24"></use>
                          </svg>
                        </label>
                      </div>
                    </div>
                    <div class="prismea-horizontal-spacing-10--slot">
                      <svg class="icon-24 icon-color-brown--400">
                        <use href="/svg/24x24/line/shop.svg#shop-line-24"></use>
                      </svg>
                    </div>
                    <div class="prismea-horizontal-spacing-10--slot">
                      <p class="prismea-text prismea-color color-brown--400">Group of categories label</p>
                    </div>
                  </div>
                </div>
                <div class="category-table-cell -justify-end -middle">
                  <p class="prismea-numeral">8 647,00 €</p>
                </div>
                <div class="category-table-cell -justify-end -middle">
                  <p class="prismea-numeral">8 647,00 €</p>
                </div>
              </div>
            </div>
            <div class="category-table">
              <div class="category-table-row">
                <div class="category-table-cell">
                  <div class="prismea-horizontal-spacing-10 -middle">
                    <div class="prismea-horizontal-spacing-10--slot">
                      <div class="checkbox checkbox-color-orange--400">
                        <input type="checkbox" checked="checked"/>
                        <label>
                          <svg class="icon-24 icon-color-white">
                            <use href="/svg/24x24/line/validate-alt.svg#validate-alt-line-24"></use>
                          </svg>
                        </label>
                      </div>
                    </div>
                    <div class="prismea-horizontal-spacing-10--slot">
                      <svg class="icon-24 icon-color-orange--400">
                        <use href="/svg/24x24/line/shop.svg#shop-line-24"></use>
                      </svg>
                    </div>
                    <div class="prismea-horizontal-spacing-10--slot">
                      <p class="prismea-text prismea-color color-orange--400">Group of categories label</p>
                    </div>
                  </div>
                </div>
                <div class="category-table-cell -justify-end -middle">
                  <p class="prismea-numeral">8 647,00 €</p>
                </div>
                <div class="category-table-cell -justify-end -middle">
                  <p class="prismea-numeral">8 647,00 €</p>
                </div>
              </div>
            </div>
          </div>
          <div class="categories-filters-table-footer">
            <div></div>
            <div class="categories-filters-table-cell">
              <p class="prismea-text -text-bold -uppercase">Total sorties</p>
            </div>
            <div class="categories-filters-table-cell -justify-end -middle">
              <p class="prismea-numeral">8 647,00 €</p>
            </div>
            <div class="categories-filters-table-cell -justify-end -middle">
              <p class="prismea-numeral">8 647,00 €</p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
<div class="prismea-card prismea-chart-card" style="margin-bottom:30px;">
  <div class="prismea-card--title">
    <div class="prismea-horizontal-spacing-10 -middle">
      <div class="prismea-horizontal-spacing-15--slot"><i class="prismea-icon -x1 prismea-glyph-16_admin-sub"></i>
      </div>
      <div class="prismea-horizontal-spacing-15--slot">
        <p class="prismea-text">Chart without Selectors
        </p>
      </div>
    </div>
  </div>
  <div class="prismea-card--body">
    <div class="prismea-card--slot">
      <div class="prismea-chart--container -height-400" style="background-color: lightgrey; display: flex; align-items: center; justify-content:center;"><span class="prismea-text" style="width: 600px;text-align:center;">Chart</span></div>
    </div>
  </div>
</div>
<div class="prismea-card prismea-chart-card" style="margin-bottom:30px;">
  <div class="prismea-card--title">
    <div class="prismea-horizontal-spacing-10 -middle">
      <div class="prismea-horizontal-spacing-15--slot"><i class="prismea-icon -x1 prismea-glyph-16_admin-sub"></i>
      </div>
      <div class="prismea-horizontal-spacing-15--slot">
        <p class="prismea-text">Chart loading
        </p>
      </div>
    </div>
  </div>
  <div class="prismea-card--body">
    <div class="prismea-card--slot">
      <div class="prismea-chart--loader -height-400"></div>
    </div>
  </div>
</div>
.prismea-card.prismea-chart-card(style='margin-bottom:30px;')
  .prismea-card--title
    .prismea-horizontal-spacing-10.-middle
      .prismea-horizontal-spacing-15--slot
        i.prismea-icon.-x1.prismea-glyph-16_admin-sub
      .prismea-horizontal-spacing-15--slot
        p.prismea-text.
          Chart with selectors
          
  .prismea-card--body
    .prismea-card--slot
      .prismea-chart--container.-height-400(style='background-color: lightgrey; display: flex; align-items: center; justify-content:center;')
        span.prismea-text(style='width: 600px;text-align:center;') Chart
.prismea-card.prismea-chart-card(style='margin-bottom:30px;')
  .prismea-card--title
    .prismea-horizontal-spacing-10.-middle
      .prismea-horizontal-spacing-15--slot
        i.prismea-icon.-x1.prismea-glyph-16_admin-sub
      .prismea-horizontal-spacing-15--slot
        p.prismea-text.
          Chart with filters
          
  .prismea-card--body
    .prismea-card--slot.-with-filters
      .prismea-chart--container.-height-400(style='background-color: lightgrey; display: flex; align-items: center; justify-content:center;')
        span.prismea-text(style='width: 600px;text-align:center;') Chart
      .prismea-chart--filters.-height-400
        .prismea-categories-filters
          .categories-filters-table-head
            .categories-filters-table-cell.-middle
              p.prismea-text.-text-bold.-uppercase Catégories
            .categories-filters-table-cell.-justify-end
              p.prismea-text.-text-bold.-uppercase 12 derniers mois
            .categories-filters-table-cell.-justify-end
              .prismea-horizontal-spacing-5.-middle
                .search-select-filter.is-open
                  .select-head
                    i.prismea-icon.prismea-glyph-12_caret-up
                    p.prismea-text.-text-bold.-uppercase Nov. 2020
                  .options
                    .divider
                    ul
                      li
                        span Sept. 2020
                      li
                        span Août 2020
          .categories-filters-table-body
            .category-table
              .category-table-row
                .category-table-cell
                  .prismea-horizontal-spacing-10.-middle
                    .prismea-horizontal-spacing-10--slot
                      .checkbox.checkbox-color-purple--400
                        input(type='checkbox', checked)
                        label
                          svg.icon-24.icon-color-white
                            use(href='/svg/24x24/line/validate-alt.svg#validate-alt-line-24')
                    .prismea-horizontal-spacing-10--slot
                      svg.icon-24.icon-color-purple--400
                        use(href='/svg/24x24/line/shop.svg#shop-line-24')
                    .prismea-horizontal-spacing-10--slot
                      p.prismea-text.prismea-color.color-purple--400 Group of categories label
                .category-table-cell.-justify-end.-middle
                  p.prismea-numeral 8 647,00 €
                .category-table-cell.-justify-end.-middle
                  p.prismea-numeral 8 647,00 €
            .category-table
              .category-table-row
                .category-table-cell
                  .prismea-horizontal-spacing-10.-middle
                    .prismea-horizontal-spacing-10--slot
                      .checkbox.checkbox-color-brown--400
                        input(type='checkbox', checked)
                        label
                          svg.icon-24.icon-color-white
                            use(href='/svg/24x24/line/validate-alt.svg#validate-alt-line-24')
                    .prismea-horizontal-spacing-10--slot
                      svg.icon-24.icon-color-brown--400
                        use(href='/svg/24x24/line/shop.svg#shop-line-24')
                    .prismea-horizontal-spacing-10--slot
                      p.prismea-text.prismea-color.color-brown--400 Group of categories label
                .category-table-cell.-justify-end.-middle
                  p.prismea-numeral 8 647,00 €
                .category-table-cell.-justify-end.-middle
                  p.prismea-numeral 8 647,00 €
            .category-table
              .category-table-row
                .category-table-cell
                  .prismea-horizontal-spacing-10.-middle
                    .prismea-horizontal-spacing-10--slot
                      .checkbox.checkbox-color-orange--400
                        input(type='checkbox', checked)
                        label
                          svg.icon-24.icon-color-white
                            use(href='/svg/24x24/line/validate-alt.svg#validate-alt-line-24')
                    .prismea-horizontal-spacing-10--slot
                      svg.icon-24.icon-color-orange--400
                        use(href='/svg/24x24/line/shop.svg#shop-line-24')
                    .prismea-horizontal-spacing-10--slot
                      p.prismea-text.prismea-color.color-orange--400 Group of categories label
                .category-table-cell.-justify-end.-middle
                  p.prismea-numeral 8 647,00 €
                .category-table-cell.-justify-end.-middle
                  p.prismea-numeral 8 647,00 €
          .categories-filters-table-footer
            div
            .categories-filters-table-cell
              p.prismea-text.-text-bold.-uppercase Total sorties
            .categories-filters-table-cell.-justify-end.-middle
              p.prismea-numeral 8 647,00 €
            .categories-filters-table-cell.-justify-end.-middle
              p.prismea-numeral 8 647,00 €
.prismea-card.prismea-chart-card(style='margin-bottom:30px;')
  .prismea-card--title
    .prismea-horizontal-spacing-10.-middle
      .prismea-horizontal-spacing-15--slot
        i.prismea-icon.-x1.prismea-glyph-16_admin-sub
      .prismea-horizontal-spacing-15--slot
        p.prismea-text.
          Chart without Selectors
          
  .prismea-card--body
    .prismea-card--slot
      .prismea-chart--container.-height-400(style='background-color: lightgrey; display: flex; align-items: center; justify-content:center;')
        span.prismea-text(style='width: 600px;text-align:center;') Chart
.prismea-card.prismea-chart-card(style='margin-bottom:30px;')
  .prismea-card--title
    .prismea-horizontal-spacing-10.-middle
      .prismea-horizontal-spacing-15--slot
        i.prismea-icon.-x1.prismea-glyph-16_admin-sub
      .prismea-horizontal-spacing-15--slot
        p.prismea-text.
          Chart loading
          
  .prismea-card--body
    .prismea-card--slot
      .prismea-chart--loader.-height-400

Checkerboard block

This is a block which has alternately a gray background and a white background

Used in the following pages:

  • Settings
  • Help

Different classes exists to adapt the block to your needs.

  • -block : By default the checkerboard is set to flex. You can put it to block instead.
  • -expand: allows the block to take full width.
<div class="prismea-webapp-checkerboard-block">
  <div class="prismea-webapp-checkerboard-block--slot">
    <div class="prismea-vertical-spacing-5">
      <div class="prismea-vertical-spacing-5--slot">
        <h2 class="prismea-title-2 prismea-color -color-primary">Langue</h2><span class="prismea-sidebar-text">Sauvegardez votre langue préférée</span>
      </div>
    </div>
  </div>
  <div class="prismea-webapp-checkerboard-block--slot">
    <div class="prismea-select">
      <div class="prismea-select--field -typed">
        <div class="prismea-input--placeholder">Langue</div>
        <div class="prismea-select--input">
          <div class="prismea-select--label">
            <p class="prismea-text">Français</p>
          </div>
          <div class="prismea-select--caret"><i class="prismea-glyph-12_caret-down"></i></div>
        </div>
        <ul class="prismea-select--options">
          <li class="prismea-select--option">
            <p class="prismea-text">Option 1 -hover me-</p>
          </li>
          <li class="prismea-select--option -selected">
            <p class="prismea-text">Option 3 -selected-</p><i class="prismea-icon prismea-glyph-12_validate"></i>
          </li>
          <li class="prismea-select--option">
            <p class="prismea-text">Option 4</p>
          </li>
          <li class="prismea-select--option">
            <p class="prismea-text">Option 5</p>
          </li>
          <li class="prismea-select--option">
            <p class="prismea-text">Option 6</p>
          </li>
        </ul>
      </div>
      <div class="prismea-select--error"><span>Something bad happened</span></div>
    </div>
  </div>
</div>
<div class="prismea-webapp-checkerboard-block">
  <div class="prismea-webapp-checkerboard-block--slot">
    <div class="prismea-vertical-spacing-5">
      <div class="prismea-vertical-spacing-5--slot">
        <h2 class="prismea-title-2 prismea-color -color-primary">Paramètres d'affichage</h2><span class="prismea-sidebar-text">Sauvegardez vos paramètres d'affichage préférés</span>
      </div>
    </div>
  </div>
  <div class="prismea-webapp-checkerboard-block--slot">
    <div class="prismea-select">
      <div class="prismea-select--field -typed">
        <div class="prismea-input--placeholder">Paramètres d'affichage</div>
        <div class="prismea-select--input">
          <div class="prismea-select--label">
            <p class="prismea-text">Option 1</p>
          </div>
          <div class="prismea-select--caret"><i class="prismea-glyph-12_caret-down"></i></div>
        </div>
        <ul class="prismea-select--options">
          <li class="prismea-select--option">
            <p class="prismea-text">Option 1 -hover me-</p>
          </li>
          <li class="prismea-select--option -selected">
            <p class="prismea-text">Option 3 -selected-</p><i class="prismea-icon prismea-glyph-12_validate"></i>
          </li>
          <li class="prismea-select--option">
            <p class="prismea-text">Option 4</p>
          </li>
          <li class="prismea-select--option">
            <p class="prismea-text">Option 5</p>
          </li>
          <li class="prismea-select--option">
            <p class="prismea-text">Option 6</p>
          </li>
        </ul>
      </div>
      <div class="prismea-select--error"><span>Something bad happened</span></div>
    </div>
  </div>
</div>
<div class="prismea-webapp-checkerboard-block">
  <div class="prismea-webapp-checkerboard-block--slot">
    <div class="prismea-vertical-spacing-5">
      <div class="prismea-vertical-spacing-5--slot">
        <h2 class="prismea-title-2 prismea-color -color-primary">Notifications</h2><span class="prismea-sidebar-text">Sauvegardez vos paramètres de notifications préférés</span>
      </div>
    </div>
  </div>
  <div class="prismea-webapp-checkerboard-block--slot">
    <div class="prismea-select">
      <div class="prismea-select--field -typed">
        <div class="prismea-input--placeholder">Notifications</div>
        <div class="prismea-select--input">
          <div class="prismea-select--label">
            <p class="prismea-text">Option 3</p>
          </div>
          <div class="prismea-select--caret"><i class="prismea-glyph-12_caret-down"></i></div>
        </div>
        <ul class="prismea-select--options">
          <li class="prismea-select--option">
            <p class="prismea-text">Option 1 -hover me-</p>
          </li>
          <li class="prismea-select--option -selected">
            <p class="prismea-text">Option 3 -selected-</p><i class="prismea-icon prismea-glyph-12_validate"></i>
          </li>
          <li class="prismea-select--option">
            <p class="prismea-text">Option 4</p>
          </li>
          <li class="prismea-select--option">
            <p class="prismea-text">Option 5</p>
          </li>
          <li class="prismea-select--option">
            <p class="prismea-text">Option 6</p>
          </li>
        </ul>
      </div>
      <div class="prismea-select--error"><span>Something bad happened</span></div>
    </div>
  </div>
</div>
.prismea-webapp-checkerboard-block
  .prismea-webapp-checkerboard-block--slot
    .prismea-vertical-spacing-5
      .prismea-vertical-spacing-5--slot
        h2.prismea-title-2.prismea-color.-color-primary Langue
        span.prismea-sidebar-text Sauvegardez votre langue préférée
  .prismea-webapp-checkerboard-block--slot
    .prismea-select
      .prismea-select--field.-typed
        .prismea-input--placeholder Langue
        .prismea-select--input
          .prismea-select--label
            p.prismea-text Français
          .prismea-select--caret
            i.prismea-glyph-12_caret-down
        ul.prismea-select--options
          li.prismea-select--option
            p.prismea-text Option 1 -hover me-
          li.prismea-select--option.-selected
            p.prismea-text Option 3 -selected-
            i.prismea-icon.prismea-glyph-12_validate
          li.prismea-select--option
            p.prismea-text Option 4
          li.prismea-select--option
            p.prismea-text Option 5
          li.prismea-select--option
            p.prismea-text Option 6
      .prismea-select--error
        span Something bad happened
.prismea-webapp-checkerboard-block
  .prismea-webapp-checkerboard-block--slot
    .prismea-vertical-spacing-5
      .prismea-vertical-spacing-5--slot
        h2.prismea-title-2.prismea-color.-color-primary Paramètres d'affichage
        span.prismea-sidebar-text Sauvegardez vos paramètres d'affichage préférés
  .prismea-webapp-checkerboard-block--slot
    .prismea-select
      .prismea-select--field.-typed
        .prismea-input--placeholder Paramètres d'affichage
        .prismea-select--input
          .prismea-select--label
            p.prismea-text Option 1
          .prismea-select--caret
            i.prismea-glyph-12_caret-down
        ul.prismea-select--options
          li.prismea-select--option
            p.prismea-text Option 1 -hover me-
          li.prismea-select--option.-selected
            p.prismea-text Option 3 -selected-
            i.prismea-icon.prismea-glyph-12_validate
          li.prismea-select--option
            p.prismea-text Option 4
          li.prismea-select--option
            p.prismea-text Option 5
          li.prismea-select--option
            p.prismea-text Option 6
      .prismea-select--error
        span Something bad happened
.prismea-webapp-checkerboard-block
  .prismea-webapp-checkerboard-block--slot
    .prismea-vertical-spacing-5
      .prismea-vertical-spacing-5--slot
        h2.prismea-title-2.prismea-color.-color-primary Notifications
        span.prismea-sidebar-text Sauvegardez vos paramètres de notifications préférés
  .prismea-webapp-checkerboard-block--slot
    .prismea-select
      .prismea-select--field.-typed
        .prismea-input--placeholder Notifications
        .prismea-select--input
          .prismea-select--label
            p.prismea-text Option 3
          .prismea-select--caret
            i.prismea-glyph-12_caret-down
        ul.prismea-select--options
          li.prismea-select--option
            p.prismea-text Option 1 -hover me-
          li.prismea-select--option.-selected
            p.prismea-text Option 3 -selected-
            i.prismea-icon.prismea-glyph-12_validate
          li.prismea-select--option
            p.prismea-text Option 4
          li.prismea-select--option
            p.prismea-text Option 5
          li.prismea-select--option
            p.prismea-text Option 6
      .prismea-select--error
        span Something bad happened

Close

Used to close the sidebar

<div class="prismea-close">
  <div class="prismea-vertical-spacing-20--slot">
    <div class="prismea-horizontal-spacing-10 -middle">
      <div class="prismea-horizontal-spacing-5--slot"><i class="prismea-icon prismea-glyph-16_close"></i></div>
      <div class="prismea-horizontal-spacing-5--slot">
        <p class="prismea-text -text-sm">Close</p>
      </div>
    </div>
  </div>
</div>
.prismea-close
  .prismea-vertical-spacing-20--slot
    .prismea-horizontal-spacing-10.-middle
      .prismea-horizontal-spacing-5--slot
        i.prismea-icon.prismea-glyph-16_close
      .prismea-horizontal-spacing-5--slot
        p.prismea-text.-text-sm Close

Company switcher

The company switcher is located in the top of the navigation bar and contains:

  • Prismea logo
  • Current company name (e.g: Prismea)
  • User full name (e.g: Jean Dupont)
  • An arrow directed to the right (with --switchable)

WITH .company-switcher--switchable:

  • cursor & arrow: A cursor: pointer is set on the whole molecule and an arrow is displayed to make the user understand that he can switch the company.
  • click: The user can click on the company switcher block, so a contextual modal appears and the user can change company by clicking on it

WITHOUT .company-switcher--switchable:

  • cursor & arrow: no cursor: pointer & no arrow displayed.
  • click: nothing happens
<div style="color: grey;">Company Switcher without arrow</div>
<div style="width: 220px; margin-bottom: 30px">
  <div class="company-switcher  ">
    <div class="company-switcher-logo"><i class="prismea-glyph-50-logo prismea-icon"></i></div>
    <div class="company-switcher-content">
      <div class="company-switcher-content__text">James Gordon</div>
      <div class="company-switcher-content__subtext">CyberLife Co.</div>
    </div>
  </div>
</div>
<div style="color: grey;">Company Switcher with arrow but INACTIVE</div>
<div style="width: 220px; margin-bottom: 30px">
  <div class="company-switcher company-switcher--switchable ">
    <div class="company-switcher-logo"><i class="prismea-glyph-50-logo prismea-icon"></i></div>
    <div class="company-switcher-content">
      <div class="company-switcher-content__text">James Gordon</div>
      <div class="company-switcher-content__subtext">CyberLife Co.</div>
    </div>
    <div class="company-switcher-arrow"><i class="prismea-icon prismea-glyph-16_arrow-s"></i></div>
  </div>
</div>
<div style="color: grey;">Company Switcher with arrow and ACTIVE</div>
<div style="width: 220px; margin-bottom: 30px">
  <div class="company-switcher company-switcher--switchable company-switcher--active">
    <div class="company-switcher-logo"><i class="prismea-glyph-50-logo prismea-icon"></i></div>
    <div class="company-switcher-content">
      <div class="company-switcher-content__text">James Gordon</div>
      <div class="company-switcher-content__subtext">CyberLife Co.</div>
    </div>
    <div class="company-switcher-arrow"><i class="prismea-icon prismea-glyph-16_arrow-s"></i></div>
    <div class="company-switcher-dropdown company-switcher-dropdown--visible">
      <div class="company-switcher-dropdown-element">Entreprises de Jean Dupont</div>
      <div class="company-switcher-dropdown-element company-switcher-dropdown-element--company company-switcher-dropdown-element--company-disabled">
        <div class="company-switcher-dropdown-element__initiales">NO</div>
        <div class="company-switcher-dropdown-element__name">
          <p class="prismea-text prismea-color -color-grey4 -text-sm">Not Active Company</p>
          <p class="prismea-text prismea-color -color-primary -text-xs">Please activate your account first</p>
        </div>
      </div>
      <div class="company-switcher-dropdown-element company-switcher-dropdown-element--company">
        <div class="company-switcher-dropdown-element__initiales">OT</div>
        <div class="company-switcher-dropdown-element__name">
          <p class="prismea-text prismea-color -text-sm">Other Company</p>
        </div>
      </div>
      <div class="company-switcher-dropdown-element company-switcher-dropdown-element--company company-switcher-dropdown-element--company-current">
        <div class="company-switcher-dropdown-element__initiales">PR</div>
        <div class="company-switcher-dropdown-element__name">
          <p class="prismea-text prismea-color -text-sm">Prismea</p>
        </div>
        <div class="company-switcher-dropdown-element__icon"><i class="prismea-icon prismea-glyph-16_checkbox"></i></div>
      </div>
    </div>
  </div>
</div>
div(style='color: grey;') Company Switcher without arrow
div(style='width: 220px; margin-bottom: 30px')
  .company-switcher
    .company-switcher-logo
      i.prismea-glyph-50-logo.prismea-icon
    .company-switcher-content
      .company-switcher-content__text James Gordon
      .company-switcher-content__subtext CyberLife Co.
div(style='color: grey;') Company Switcher with arrow but INACTIVE
div(style='width: 220px; margin-bottom: 30px')
  .company-switcher.company-switcher--switchable
    .company-switcher-logo
      i.prismea-glyph-50-logo.prismea-icon
    .company-switcher-content
      .company-switcher-content__text James Gordon
      .company-switcher-content__subtext CyberLife Co.
    .company-switcher-arrow
      i.prismea-icon.prismea-glyph-16_arrow-s
div(style='color: grey;') Company Switcher with arrow and ACTIVE
div(style='width: 220px; margin-bottom: 30px')
  .company-switcher.company-switcher--switchable.company-switcher--active
    .company-switcher-logo
      i.prismea-glyph-50-logo.prismea-icon
    .company-switcher-content
      .company-switcher-content__text James Gordon
      .company-switcher-content__subtext CyberLife Co.
    .company-switcher-arrow
      i.prismea-icon.prismea-glyph-16_arrow-s
    .company-switcher-dropdown.company-switcher-dropdown--visible
      .company-switcher-dropdown-element Entreprises de Jean Dupont
      .company-switcher-dropdown-element.company-switcher-dropdown-element--company.company-switcher-dropdown-element--company-disabled
        .company-switcher-dropdown-element__initiales NO
        .company-switcher-dropdown-element__name
          p.prismea-text.prismea-color.-color-grey4.-text-sm Not Active Company
          p.prismea-text.prismea-color.-color-primary.-text-xs Please activate your account first
      .company-switcher-dropdown-element.company-switcher-dropdown-element--company
        .company-switcher-dropdown-element__initiales OT
        .company-switcher-dropdown-element__name
          p.prismea-text.prismea-color.-text-sm Other Company
      .company-switcher-dropdown-element.company-switcher-dropdown-element--company.company-switcher-dropdown-element--company-current
        .company-switcher-dropdown-element__initiales PR
        .company-switcher-dropdown-element__name
          p.prismea-text.prismea-color.-text-sm Prismea
        .company-switcher-dropdown-element__icon
          i.prismea-icon.prismea-glyph-16_checkbox

Document Download Card

<div class="prismea-horizontal-spacing--slot" style="display: flex">
  <div class="prismea-document-download-card">
    <div class="prismea-document-download-card--title">Terms and conditions</div>
    <div class="prismea-document-download-card--cta"><a class="prismea-button -primary -pill -outlined -icon-text"><i class="prismea-glyph-24_download"></i><span>Download file</span></a></div>
  </div>
  <div class="prismea-document-download-card">
    <div class="prismea-document-download-card--title">Data protection and cookie policy</div>
    <div class="prismea-document-download-card--cta"><a class="prismea-button -primary -pill -outlined -icon-text"><i class="prismea-glyph-24_download"></i><span>Download file</span></a></div>
  </div>
</div>
.prismea-horizontal-spacing--slot(style='display: flex')
  .prismea-document-download-card
    .prismea-document-download-card--title Terms and conditions
    .prismea-document-download-card--cta
      a.prismea-button.-primary.-pill.-outlined.-icon-text
        i.prismea-glyph-24_download
        span Download file
  .prismea-document-download-card
    .prismea-document-download-card--title Data protection and cookie policy
    .prismea-document-download-card--cta
      a.prismea-button.-primary.-pill.-outlined.-icon-text
        i.prismea-glyph-24_download
        span Download file

Link block

Used as a jumbotron link block for marketing purposes

<a class="prismea-link-block" href="#"><i class="prismea-link-block--decoration prismea-glyph-24_marketing"></i><span class="prismea-link-block--wrapper"><span class="prismea-text prismea-color -color-light">This is a marketing CTA to access an external resource</span><i class="prismea-icon prismea-glyph-12_arrow-right prismea-color -color-light"></i></span></a>
a.prismea-link-block(href='#')
  i.prismea-link-block--decoration.prismea-glyph-24_marketing
  span.prismea-link-block--wrapper
    span.prismea-text.prismea-color.-color-light This is a marketing CTA to access an external resource
    i.prismea-icon.prismea-glyph-12_arrow-right.prismea-color.-color-light

Navigation list item in the webapp

The modifiers for this molecule are:

  • -selected: when the list item is selected
  • ion--hoverable: enable list item hover 
<!-- Default navigation item-->
<div class="navigation-item -primary">
  <div class="prismea-horizontal-spacing-10 -middle">
    <div class="prismea-horizontal-spacing-10--slot"><i class="prismea-icon prismea-glyph-24_dashboard"></i></div>
    <div class="prismea-horizontal-spacing-10--slot prismea-vertical-spacing-5 -flex"><span class="prismea-menu-label" style="display: block">Menu item</span>
    </div>
  </div>
</div>
<!-- Default navigation item-->
<div class="navigation-item -primary">
  <div class="prismea-horizontal-spacing-10 -middle">
    <div class="prismea-horizontal-spacing-10--slot"><i class="prismea-icon prismea-glyph-24_dashboard"></i></div>
    <div class="prismea-horizontal-spacing-10--slot prismea-vertical-spacing-5 -flex"><span class="prismea-menu-label" style="display: block">Menu item (w/ subText)</span><span class="prismea-menu-label -min prismea-color -color-primary prismea-numeral" style="display: block">+ 49 304,50 €</span>
    </div>
  </div>
</div>
<!-- Default navigation item-->
<div class="navigation-item ion--hoverable -primary">
  <div class="prismea-horizontal-spacing-10 -middle">
    <div class="prismea-horizontal-spacing-10--slot"><i class="prismea-icon prismea-glyph-24_dashboard"></i></div>
    <div class="prismea-horizontal-spacing-10--slot prismea-vertical-spacing-5 -flex"><span class="prismea-menu-label" style="display: block">Menu item (Hoverable)</span>
    </div>
  </div>
</div>
<!-- Default navigation item-->
<div class="navigation-item -selected -primary">
  <div class="prismea-horizontal-spacing-10 -middle">
    <div class="prismea-horizontal-spacing-10--slot"><i class="prismea-icon prismea-glyph-24_dashboard"></i></div>
    <div class="prismea-horizontal-spacing-10--slot prismea-vertical-spacing-5 -flex"><span class="prismea-menu-label" style="display: block">Menu item (Selected)</span>
    </div>
  </div>
</div>
<!-- Navigation item with sub-items-->
<div class="navigation-sub-menu-wrapper">
  <div class="navigation-item ion--hoverable -primary">
    <div class="prismea-horizontal-spacing-10 -middle">
      <div class="prismea-horizontal-spacing-10--slot"><i class="prismea-icon prismea-glyph-24_dashboard"></i></div>
      <div class="prismea-horizontal-spacing-10--slot"><span class="prismea-menu-label" style="display: block">Menu item (With sub-items/closed)</span>
      </div>
    </div>
  </div>
  <div class="navigation-sub-items-wrapper">
    <div class="navigation-item -primary">
      <div class="sub-menu-bullet-point prismea-color -color-grey3">&#8226;</div><span class="prismea-menu-label" style="display: block">1st sub-item</span>
    </div>
    <div class="navigation-item -primary -selected">
      <div class="sub-menu-bullet-point prismea-color -color-primary">&#8226;</div><span class="prismea-menu-label" style="display: block">2nd sub-item</span>
    </div>
    <div class="navigation-item -primary">
      <div class="sub-menu-bullet-point prismea-color -color-grey3">&#8226;</div><span class="prismea-menu-label" style="display: block">3rd sub-item</span>
    </div>
  </div>
</div>
<!-- Navigation item with sub-items-->
<div class="navigation-sub-menu-wrapper">
  <div class="navigation-item ion--hoverable -primary -selected">
    <div class="prismea-horizontal-spacing-10 -middle">
      <div class="prismea-horizontal-spacing-10--slot"><i class="prismea-icon prismea-glyph-24_dashboard"></i></div>
      <div class="prismea-horizontal-spacing-10--slot"><span class="prismea-menu-label" style="display: block">Menu item (With sub-items/open)</span>
      </div>
    </div>
  </div>
  <div class="navigation-sub-items-wrapper navigation-sub-items-wrapper--visible">
    <div class="navigation-item -primary">
      <div class="sub-menu-bullet-point prismea-color -color-grey3">&#8226;</div><span class="prismea-menu-label" style="display: block">1st sub-item</span>
    </div>
    <div class="navigation-item -primary -selected">
      <div class="sub-menu-bullet-point prismea-color -color-primary">&#8226;</div><span class="prismea-menu-label" style="display: block">2nd sub-item</span>
    </div>
    <div class="navigation-item -primary">
      <div class="sub-menu-bullet-point prismea-color -color-grey3">&#8226;</div><span class="prismea-menu-label" style="display: block">3rd sub-item</span>
    </div>
  </div>
</div>
//  Default navigation item
.navigation-item.-primary
  .prismea-horizontal-spacing-10.-middle
    .prismea-horizontal-spacing-10--slot
      i.prismea-icon.prismea-glyph-24_dashboard
    .prismea-horizontal-spacing-10--slot.prismea-vertical-spacing-5.-flex
      span.prismea-menu-label(style='display: block') Menu item
//  Default navigation item
.navigation-item.-primary
  .prismea-horizontal-spacing-10.-middle
    .prismea-horizontal-spacing-10--slot
      i.prismea-icon.prismea-glyph-24_dashboard
    .prismea-horizontal-spacing-10--slot.prismea-vertical-spacing-5.-flex
      span.prismea-menu-label(style='display: block') Menu item (w/ subText)
      span.prismea-menu-label.-min.prismea-color.-color-primary.prismea-numeral(style='display: block') + 49 304,50 €
//  Default navigation item
.navigation-item.ion--hoverable.-primary
  .prismea-horizontal-spacing-10.-middle
    .prismea-horizontal-spacing-10--slot
      i.prismea-icon.prismea-glyph-24_dashboard
    .prismea-horizontal-spacing-10--slot.prismea-vertical-spacing-5.-flex
      span.prismea-menu-label(style='display: block') Menu item (Hoverable)
//  Default navigation item
.navigation-item.-selected.-primary
  .prismea-horizontal-spacing-10.-middle
    .prismea-horizontal-spacing-10--slot
      i.prismea-icon.prismea-glyph-24_dashboard
    .prismea-horizontal-spacing-10--slot.prismea-vertical-spacing-5.-flex
      span.prismea-menu-label(style='display: block') Menu item (Selected)
//  Navigation item with sub-items
.navigation-sub-menu-wrapper
  .navigation-item.ion--hoverable.-primary
    .prismea-horizontal-spacing-10.-middle
      .prismea-horizontal-spacing-10--slot
        i.prismea-icon.prismea-glyph-24_dashboard
      .prismea-horizontal-spacing-10--slot
        span.prismea-menu-label(style='display: block') Menu item (With sub-items/closed)
  .navigation-sub-items-wrapper
    .navigation-item.-primary
      .sub-menu-bullet-point.prismea-color.-color-grey3 •
      span.prismea-menu-label(style='display: block') 1st sub-item
    .navigation-item.-primary.-selected
      .sub-menu-bullet-point.prismea-color.-color-primary •
      span.prismea-menu-label(style='display: block') 2nd sub-item
    .navigation-item.-primary
      .sub-menu-bullet-point.prismea-color.-color-grey3 •
      span.prismea-menu-label(style='display: block') 3rd sub-item
//  Navigation item with sub-items
.navigation-sub-menu-wrapper
  .navigation-item.ion--hoverable.-primary.-selected
    .prismea-horizontal-spacing-10.-middle
      .prismea-horizontal-spacing-10--slot
        i.prismea-icon.prismea-glyph-24_dashboard
      .prismea-horizontal-spacing-10--slot
        span.prismea-menu-label(style='display: block') Menu item (With sub-items/open)
  .navigation-sub-items-wrapper.navigation-sub-items-wrapper--visible
    .navigation-item.-primary
      .sub-menu-bullet-point.prismea-color.-color-grey3 •
      span.prismea-menu-label(style='display: block') 1st sub-item
    .navigation-item.-primary.-selected
      .sub-menu-bullet-point.prismea-color.-color-primary •
      span.prismea-menu-label(style='display: block') 2nd sub-item
    .navigation-item.-primary
      .sub-menu-bullet-point.prismea-color.-color-grey3 •
      span.prismea-menu-label(style='display: block') 3rd sub-item

No occurrence found

Displayed when a table search/filter return no result

<div class="prismea-no-occurrence">
  <svg class="prismea-no-occurrence--background-image" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 437 470" width="450" fill="currentColor">
    <path d="M361.93 239.08a2.5 2.5 0 103.57-3.5l-2.75-2.8a2.5 2.5 0 10-3.57 3.5zM58.75 120.78a2.5 2.5 0 10-3.57 3.5l2.75 2.8a2.5 2.5 0 103.57-3.5zM127 287.59a13.95 13.95 0 1019.58 2.4 13.95 13.95 0 00-19.58-2.4zm-96.91-29a3 3 0 00-4.92-1.68L1.56 277.5a3 3 0 001 5.1l29.64 10.14a3 3 0 003.91-3.42zM60.92 437l-3.31-2.41 2.39-3.32a2.5 2.5 0 00-4-2.95l-2.41 3.31-3.31-2.41a2.5 2.5 0 10-2.95 4l3.31 2.41-2.42 3.37a2.5 2.5 0 004 2.95l2.41-3.31L58 441a2.5 2.5 0 002.95-4zm281.55-272.22a2.5 2.5 0 003.27 1.35l11-4.56a2.5 2.5 0 10-1.91-4.62l-11 4.56a2.5 2.5 0 00-1.36 3.27zM95.39 235a2.5 2.5 0 00-.93-3.41l-3.55-2 2-3.55a2.5 2.5 0 00-4.34-2.48l-2 3.55-3.55-2a2.5 2.5 0 10-2.48 4.34l3.55 2L82 235a2.5 2.5 0 00.93 3.41 2.5 2.5 0 003.41-.93l2-3.55 3.55 2a2.5 2.5 0 003.5-.93zm12.52 81.16a2.5 2.5 0 00-3.42-.91l-10.32 6a2.5 2.5 0 002.5 4.33l10.32-6a2.5 2.5 0 00.91-3.42zm28.79 53.41a3 3 0 00-2.1-2.14l-15.31-4.26a3 3 0 00-2.9.75L105 375.05a3 3 0 00-.8 2.89l4 15.38a3 3 0 002.1 2.14l15.3 4.26a3 3 0 002.91-.75l11.34-11.13a3 3 0 00.8-2.89zM321.09 91.44a3.79 3.79 0 10.06-5.35 3.79 3.79 0 00-.06 5.35zM50.66 202.1a23.58 23.58 0 10-33.35-.38 23.58 23.58 0 0033.35.38zM260.59 72.79a12.58 12.58 0 10-17.79-.2 12.58 12.58 0 0017.79.2zm77.68 76.9L349 139.33a2.5 2.5 0 00-3.47-3.6L334.8 146.1a2.5 2.5 0 103.47 3.6zM26.53 68.39l3.55 2L28 74a2.5 2.5 0 001 3.39 2.5 2.5 0 003.41-.93l2-3.55 3.55 2a2.5 2.5 0 102.48-4.34l-3.55-2 2-3.55a2.5 2.5 0 00-4.34-2.48l-2 3.55L29 64a2.5 2.5 0 00-3.4 1 2.5 2.5 0 00.93 3.39zm77.63 75.51a2.5 2.5 0 003.42-.91l6-10.32a2.5 2.5 0 10-4.33-2.5l-6 10.32a2.5 2.5 0 00.91 3.41zm99.84-8.12a3 3 0 002.1 2.14l4.19 1.16a3 3 0 002.9-.75l3.1-3a3 3 0 00.8-2.89L216 128.2a3 3 0 00-2.1-2.14l-4.19-1.16a3 3 0 00-2.91.75l-3.1 3a3 3 0 00-.8 2.89zm96.1 157.12l-7.68-4.78a3 3 0 00-4.58 2.45l-.3 9a3 3 0 004.41 2.74l8-4.26a3 3 0 00.13-5.15zm47.83-21.15a12.58 12.58 0 1017.66 2.16 12.58 12.58 0 00-17.68-2.16zm-207.86-179a3 3 0 00-3-.48l-12.29 4.66a3 3 0 00-1.9 2.32l-2.1 13a3 3 0 001.06 2.8l10.18 8.31a3 3 0 003 .48l12.29-4.66a3 3 0 001.9-2.33l2.11-13a3 3 0 00-1.07-2.8zm262.73 21.09a3 3 0 003.18-4.11l-8.56-21a3 3 0 00-5.15-.7L378.39 106a3 3 0 002 4.81zm-70.68 230.83l4.48-4.39a3 3 0 00.8-2.89l-1.57-6.08a3 3 0 00-2.1-2.14l-6-1.68a3 3 0 00-2.9.75l-4.48 4.39a3 3 0 00-.8 2.89l1.57 6.08a3 3 0 002.1 2.14l6 1.68a3 3 0 002.9-.75zm103.34-5.07l-3.55-2 2-3.55a2.5 2.5 0 00-4.34-2.48l-2 3.55-3.55-2a2.5 2.5 0 10-2.48 4.34l3.55 2-2 3.55a2.5 2.5 0 004.34 2.48l2-3.55 3.55 2a2.5 2.5 0 002.48-4.34zm-51.71-7.81a2.5 2.5 0 10-3.57 3.5l2.75 2.8a2.5 2.5 0 103.57-3.5zM413.92 210l-3.31-2.41 2.41-3.31a2.5 2.5 0 10-4-2.95l-2.41 3.31-3.31-2.41a2.5 2.5 0 10-2.95 4l3.31 2.41-2.44 3.36a2.5 2.5 0 00.55 3.49 2.5 2.5 0 003.49-.55l2.41-3.31L411 214a2.5 2.5 0 002.95-4zm-62.09 165.3l-21.77 6.19a3 3 0 00-1.27 5L345 402.28a3 3 0 005-1.42l5.52-22a3 3 0 00-3.68-3.57zM187 447.79a12.58 12.58 0 1017.79.2 12.58 12.58 0 00-17.79-.2zM322.47 31.22a2.5 2.5 0 00-3.4 1l-5.84 10.39a2.5 2.5 0 004.35 2.39l5.84-10.39a2.5 2.5 0 00-.95-3.39zM190 19.23L186.74 6.5a3 3 0 00-2.1-2.14L172 .83a3 3 0 00-2.9.75l-9.38 9.21a3 3 0 00-.8 2.89l3.28 12.73a3 3 0 002.1 2.14l12.66 3.52a3 3 0 002.91-.75l9.38-9.21a3 3 0 00.75-2.88zm107.62 398.2a2.5 2.5 0 00-3.84 3.2l7.63 9.16a2.5 2.5 0 103.84-3.2zM278.3 90.35l-31-4.27a3 3 0 00-3.19 4.1l11.82 29a3 3 0 005.15.71l19.21-24.74a3 3 0 00-1.99-4.8z"></path>
  </svg>
  <div class="prismea-no-occurrence--content">
    <div class="prismea-no-occurrence--content--message-box"><span>aucune carte</span><span>n'a été trouvée</span></div>
    <div class="prismea-no-occurrence--content--decoration"><i class="prismea-icon -x3 prismea-glyph-12_delete"></i></div>
    <button class="prismea-no-occurrence--action-button">réinitialiser les filtres</button>
  </div>
</div>
.prismea-no-occurrence
  svg.prismea-no-occurrence--background-image(xmlns='http://www.w3.org/2000/svg', viewBox='0 0 437 470', width='450', fill='currentColor')
    path(d='M361.93 239.08a2.5 2.5 0 103.57-3.5l-2.75-2.8a2.5 2.5 0 10-3.57 3.5zM58.75 120.78a2.5 2.5 0 10-3.57 3.5l2.75 2.8a2.5 2.5 0 103.57-3.5zM127 287.59a13.95 13.95 0 1019.58 2.4 13.95 13.95 0 00-19.58-2.4zm-96.91-29a3 3 0 00-4.92-1.68L1.56 277.5a3 3 0 001 5.1l29.64 10.14a3 3 0 003.91-3.42zM60.92 437l-3.31-2.41 2.39-3.32a2.5 2.5 0 00-4-2.95l-2.41 3.31-3.31-2.41a2.5 2.5 0 10-2.95 4l3.31 2.41-2.42 3.37a2.5 2.5 0 004 2.95l2.41-3.31L58 441a2.5 2.5 0 002.95-4zm281.55-272.22a2.5 2.5 0 003.27 1.35l11-4.56a2.5 2.5 0 10-1.91-4.62l-11 4.56a2.5 2.5 0 00-1.36 3.27zM95.39 235a2.5 2.5 0 00-.93-3.41l-3.55-2 2-3.55a2.5 2.5 0 00-4.34-2.48l-2 3.55-3.55-2a2.5 2.5 0 10-2.48 4.34l3.55 2L82 235a2.5 2.5 0 00.93 3.41 2.5 2.5 0 003.41-.93l2-3.55 3.55 2a2.5 2.5 0 003.5-.93zm12.52 81.16a2.5 2.5 0 00-3.42-.91l-10.32 6a2.5 2.5 0 002.5 4.33l10.32-6a2.5 2.5 0 00.91-3.42zm28.79 53.41a3 3 0 00-2.1-2.14l-15.31-4.26a3 3 0 00-2.9.75L105 375.05a3 3 0 00-.8 2.89l4 15.38a3 3 0 002.1 2.14l15.3 4.26a3 3 0 002.91-.75l11.34-11.13a3 3 0 00.8-2.89zM321.09 91.44a3.79 3.79 0 10.06-5.35 3.79 3.79 0 00-.06 5.35zM50.66 202.1a23.58 23.58 0 10-33.35-.38 23.58 23.58 0 0033.35.38zM260.59 72.79a12.58 12.58 0 10-17.79-.2 12.58 12.58 0 0017.79.2zm77.68 76.9L349 139.33a2.5 2.5 0 00-3.47-3.6L334.8 146.1a2.5 2.5 0 103.47 3.6zM26.53 68.39l3.55 2L28 74a2.5 2.5 0 001 3.39 2.5 2.5 0 003.41-.93l2-3.55 3.55 2a2.5 2.5 0 102.48-4.34l-3.55-2 2-3.55a2.5 2.5 0 00-4.34-2.48l-2 3.55L29 64a2.5 2.5 0 00-3.4 1 2.5 2.5 0 00.93 3.39zm77.63 75.51a2.5 2.5 0 003.42-.91l6-10.32a2.5 2.5 0 10-4.33-2.5l-6 10.32a2.5 2.5 0 00.91 3.41zm99.84-8.12a3 3 0 002.1 2.14l4.19 1.16a3 3 0 002.9-.75l3.1-3a3 3 0 00.8-2.89L216 128.2a3 3 0 00-2.1-2.14l-4.19-1.16a3 3 0 00-2.91.75l-3.1 3a3 3 0 00-.8 2.89zm96.1 157.12l-7.68-4.78a3 3 0 00-4.58 2.45l-.3 9a3 3 0 004.41 2.74l8-4.26a3 3 0 00.13-5.15zm47.83-21.15a12.58 12.58 0 1017.66 2.16 12.58 12.58 0 00-17.68-2.16zm-207.86-179a3 3 0 00-3-.48l-12.29 4.66a3 3 0 00-1.9 2.32l-2.1 13a3 3 0 001.06 2.8l10.18 8.31a3 3 0 003 .48l12.29-4.66a3 3 0 001.9-2.33l2.11-13a3 3 0 00-1.07-2.8zm262.73 21.09a3 3 0 003.18-4.11l-8.56-21a3 3 0 00-5.15-.7L378.39 106a3 3 0 002 4.81zm-70.68 230.83l4.48-4.39a3 3 0 00.8-2.89l-1.57-6.08a3 3 0 00-2.1-2.14l-6-1.68a3 3 0 00-2.9.75l-4.48 4.39a3 3 0 00-.8 2.89l1.57 6.08a3 3 0 002.1 2.14l6 1.68a3 3 0 002.9-.75zm103.34-5.07l-3.55-2 2-3.55a2.5 2.5 0 00-4.34-2.48l-2 3.55-3.55-2a2.5 2.5 0 10-2.48 4.34l3.55 2-2 3.55a2.5 2.5 0 004.34 2.48l2-3.55 3.55 2a2.5 2.5 0 002.48-4.34zm-51.71-7.81a2.5 2.5 0 10-3.57 3.5l2.75 2.8a2.5 2.5 0 103.57-3.5zM413.92 210l-3.31-2.41 2.41-3.31a2.5 2.5 0 10-4-2.95l-2.41 3.31-3.31-2.41a2.5 2.5 0 10-2.95 4l3.31 2.41-2.44 3.36a2.5 2.5 0 00.55 3.49 2.5 2.5 0 003.49-.55l2.41-3.31L411 214a2.5 2.5 0 002.95-4zm-62.09 165.3l-21.77 6.19a3 3 0 00-1.27 5L345 402.28a3 3 0 005-1.42l5.52-22a3 3 0 00-3.68-3.57zM187 447.79a12.58 12.58 0 1017.79.2 12.58 12.58 0 00-17.79-.2zM322.47 31.22a2.5 2.5 0 00-3.4 1l-5.84 10.39a2.5 2.5 0 004.35 2.39l5.84-10.39a2.5 2.5 0 00-.95-3.39zM190 19.23L186.74 6.5a3 3 0 00-2.1-2.14L172 .83a3 3 0 00-2.9.75l-9.38 9.21a3 3 0 00-.8 2.89l3.28 12.73a3 3 0 002.1 2.14l12.66 3.52a3 3 0 002.91-.75l9.38-9.21a3 3 0 00.75-2.88zm107.62 398.2a2.5 2.5 0 00-3.84 3.2l7.63 9.16a2.5 2.5 0 103.84-3.2zM278.3 90.35l-31-4.27a3 3 0 00-3.19 4.1l11.82 29a3 3 0 005.15.71l19.21-24.74a3 3 0 00-1.99-4.8z')
  .prismea-no-occurrence--content
    .prismea-no-occurrence--content--message-box
      span aucune carte
      span n'a été trouvée
    .prismea-no-occurrence--content--decoration
      i.prismea-icon.-x3.prismea-glyph-12_delete
    button.prismea-no-occurrence--action-button réinitialiser les filtres

Notification

<div class="prismea-notification prismea-horizontal-spacing-5 -middle -primary">
  <div class="prismea-notification--overlay -secondary"></div>
  <div class="prismea-horizontal-spacing-5--slot -expand">
    <p class="prismea-text prismea-color -color-light">This is a notification</p>
  </div>
  <div class="prismea-horizontal-spacing-5--slot"><i class="prismea-icon prismea-glyph-16_close -color-light"></i></div>
</div>
<div class="prismea-notification prismea-horizontal-spacing-5 -middle -primary">
  <div class="prismea-notification--overlay -secondary"></div>
  <div class="prismea-horizontal-spacing-5--slot"><i class="prismea-icon prismea-glyph-12_validate -color-light"></i></div>
  <div class="prismea-horizontal-spacing-5--slot -expand">
    <p class="prismea-text prismea-color -color-light">This is a notification</p>
  </div>
  <div class="prismea-horizontal-spacing-5--slot"><i class="prismea-icon prismea-glyph-16_close -color-light"></i></div>
</div>
<div class="prismea-notification prismea-horizontal-spacing-5 -middle -negative">
  <div class="prismea-notification--overlay -secondary"></div>
  <div class="prismea-horizontal-spacing-5--slot -expand">
    <p class="prismea-text prismea-color -color-light">This is a notification</p>
  </div>
  <div class="prismea-horizontal-spacing-5--slot"><i class="prismea-icon prismea-glyph-16_close -color-light"></i></div>
</div>
<div class="prismea-notification prismea-horizontal-spacing-5 -middle -pending">
  <div class="prismea-notification--overlay -secondary"></div>
  <div class="prismea-horizontal-spacing-5--slot -expand">
    <p class="prismea-text prismea-color -color-light">This is a notification</p>
  </div>
  <div class="prismea-horizontal-spacing-5--slot"><i class="prismea-icon prismea-glyph-16_close -color-light"></i></div>
</div>
.prismea-notification.prismea-horizontal-spacing-5.-middle.-primary
  .prismea-notification--overlay.-secondary
  .prismea-horizontal-spacing-5--slot.-expand
    p.prismea-text.prismea-color.-color-light This is a notification
  .prismea-horizontal-spacing-5--slot
    i.prismea-icon.prismea-glyph-16_close.-color-light
.prismea-notification.prismea-horizontal-spacing-5.-middle.-primary
  .prismea-notification--overlay.-secondary
  .prismea-horizontal-spacing-5--slot
    i.prismea-icon.prismea-glyph-12_validate.-color-light
  .prismea-horizontal-spacing-5--slot.-expand
    p.prismea-text.prismea-color.-color-light This is a notification
  .prismea-horizontal-spacing-5--slot
    i.prismea-icon.prismea-glyph-16_close.-color-light
.prismea-notification.prismea-horizontal-spacing-5.-middle.-negative
  .prismea-notification--overlay.-secondary
  .prismea-horizontal-spacing-5--slot.-expand
    p.prismea-text.prismea-color.-color-light This is a notification
  .prismea-horizontal-spacing-5--slot
    i.prismea-icon.prismea-glyph-16_close.-color-light
.prismea-notification.prismea-horizontal-spacing-5.-middle.-pending
  .prismea-notification--overlay.-secondary
  .prismea-horizontal-spacing-5--slot.-expand
    p.prismea-text.prismea-color.-color-light This is a notification
  .prismea-horizontal-spacing-5--slot
    i.prismea-icon.prismea-glyph-16_close.-color-light

Pagination

<div class="pagination">
  <div class="results-count">182 résultats trouvés</div>
  <div class="navigation">
    <button class="-button">1</button>
    <button class="-button"><span style="font-size: 0.7rem;">◀</span></button>
    <button class="-button -far">2</button>
    <button class="-button">3</button>
    <button class="-button -active">4</button>
    <button class="-button">5</button>
    <button class="-button -far">6</button>
    <button class="-button"><span style="font-size: 0.7rem;">▶</span></button>
    <button class="-button">11</button>
  </div>
  <div class="items-per-page">
    <div class="text">Résultats par page</div>
    <div class="options">
      <button class="-button -active">15</button>
      <button class="-button">30</button>
      <button class="-button">100</button>
    </div>
  </div>
</div>
.pagination
  .results-count 182 résultats trouvés
  .navigation
    button.-button 1
    button.-button
      span(style='font-size: 0.7rem;') ◀
    button.-button.-far 2
    button.-button 3
    button.-button.-active 4
    button.-button 5
    button.-button.-far 6
    button.-button
      span(style='font-size: 0.7rem;') ▶
    button.-button 11
  .items-per-page
    .text Résultats par page
    .options
      button.-button.-active 15
      button.-button 30
      button.-button 100

Input Radio/Checkbox

<div>
  <div class="prismea-radio-button-list">
    <label class="prismea-radio-button -center -large" for="1">
      <input id="1" type="radio" name="radio"/><span class="prismea-radio-button--container prismea-horizontal-spacing-10"><span class="prismea-horizontal-spacing-10--slot"><span class="prismea-radio-button--label">Meat</span></span></span><i class="prismea-icon prismea-glyph-12_validate"></i>
    </label>
    <label class="prismea-radio-button -center -large" for="2">
      <input id="2" type="radio" name="radio" checked="checked"/><span class="prismea-radio-button--container prismea-horizontal-spacing-10"><span class="prismea-horizontal-spacing-10--slot"><span class="prismea-radio-button--label">Vegetables</span><span class="prismea-radio-button--legend prismea-numeral">I am a legend</span></span></span><i class="prismea-icon prismea-glyph-12_validate"></i>
    </label>
    <label class="prismea-radio-button -center -large -disabled" for="3">
      <input id="3" type="radio" name="radio" disabled="disabled"/><span class="prismea-radio-button--container prismea-horizontal-spacing-10"><span class="prismea-horizontal-spacing-10--slot"><span class="prismea-radio-button--label">Alcohol</span><span class="prismea-radio-button--legend prismea-numeral">I am a vodka</span></span></span><i class="prismea-icon prismea-glyph-12_validate"></i>
    </label>
  </div>
</div>
<div>
  <div class="prismea-radio-button-list">
    <label class="prismea-radio-button" for="4">
      <input id="4" type="checkbox" name="radio"/><span class="prismea-radio-button--container prismea-horizontal-spacing-10"><span class="prismea-horizontal-spacing-10--slot"><span class="prismea-radio-button--label">Meat</span></span></span><i class="prismea-icon prismea-glyph-12_validate"></i>
    </label>
    <label class="prismea-radio-button" for="5">
      <input id="5" type="checkbox" name="radio" checked="checked"/><span class="prismea-radio-button--container prismea-horizontal-spacing-10"><span class="prismea-horizontal-spacing-10--slot"><span class="prismea-radio-button--label">Vegetables</span></span></span><i class="prismea-icon prismea-glyph-12_validate"></i>
    </label>
    <label class="prismea-radio-button -disabled" for="6">
      <input id="6" type="checkbox" name="radio" disabled="disabled"/><span class="prismea-radio-button--container prismea-horizontal-spacing-10"><span class="prismea-horizontal-spacing-10--slot"><span class="prismea-radio-button--label">Milk</span></span></span><i class="prismea-icon prismea-glyph-12_validate"></i>
    </label>
  </div>
</div>
<div>
  <div class="prismea-radio-button-list">
    <label class="prismea-radio-button" for="7">
      <input id="7" type="checkbox" name="radio"/><span class="prismea-radio-button--container prismea-horizontal-spacing-10"><span class="prismea-horizontal-spacing-10--slot"><span class="prismea-radio-button--label">Leslie Alexander</span><span class="prismea-radio-button--legend prismea-numeral">FR14 2004 1010 0505 0001 3M02 606</span></span><span class="prismea-horizontal-spacing-10--slot prismea-radio-button--amount"><span class="prismea-numeral">2 795,90€</span></span></span><i class="prismea-icon prismea-glyph-12_validate"></i>
    </label>
    <label class="prismea-radio-button -disabled" for="8">
      <input id="8" type="checkbox" name="radio" disabled="disabled"/><span class="prismea-radio-button--container prismea-horizontal-spacing-10"><span class="prismea-horizontal-spacing-10--slot"><span class="prismea-radio-button--label">Guy Hawkins</span><span class="prismea-radio-button--legend prismea-numeral">FR14 2004 1010 0505 0001 3M02 606</span></span><span class="prismea-horizontal-spacing-10--slot prismea-radio-button--amount"><span class="prismea-numeral">2 791,91€</span></span></span><i class="prismea-icon prismea-glyph-12_validate"></i>
    </label>
    <label class="prismea-radio-button" for="9">
      <input id="9" type="checkbox" name="radio" checked="checked"/><span class="prismea-radio-button--container prismea-horizontal-spacing-10"><span class="prismea-horizontal-spacing-10--slot"><span class="prismea-radio-button--label">Leslie Alexander</span><span class="prismea-radio-button--legend prismea-numeral">FR14 2004 1010 0505 0001 3M02 606</span></span><span class="prismea-horizontal-spacing-10--slot prismea-radio-button--amount"><span class="prismea-numeral">2 795,90€</span></span></span><i class="prismea-icon prismea-glyph-12_validate"></i>
    </label>
  </div>
</div>
div
  .prismea-radio-button-list
    label.prismea-radio-button.-center.-large(for='1')
      input#1(type='radio', name='radio')
      span.prismea-radio-button--container.prismea-horizontal-spacing-10
        span.prismea-horizontal-spacing-10--slot
          span.prismea-radio-button--label Meat
      i.prismea-icon.prismea-glyph-12_validate
    label.prismea-radio-button.-center.-large(for='2')
      input#2(type='radio', name='radio', checked)
      span.prismea-radio-button--container.prismea-horizontal-spacing-10
        span.prismea-horizontal-spacing-10--slot
          span.prismea-radio-button--label Vegetables
          span.prismea-radio-button--legend.prismea-numeral I am a legend
      i.prismea-icon.prismea-glyph-12_validate
    label.prismea-radio-button.-center.-large.-disabled(for='3')
      input#3(type='radio', name='radio', disabled)
      span.prismea-radio-button--container.prismea-horizontal-spacing-10
        span.prismea-horizontal-spacing-10--slot
          span.prismea-radio-button--label Alcohol
          span.prismea-radio-button--legend.prismea-numeral I am a vodka
      i.prismea-icon.prismea-glyph-12_validate
div
  .prismea-radio-button-list
    label.prismea-radio-button(for='4')
      input#4(type='checkbox', name='radio')
      span.prismea-radio-button--container.prismea-horizontal-spacing-10
        span.prismea-horizontal-spacing-10--slot
          span.prismea-radio-button--label Meat
      i.prismea-icon.prismea-glyph-12_validate
    label.prismea-radio-button(for='5')
      input#5(type='checkbox', name='radio', checked)
      span.prismea-radio-button--container.prismea-horizontal-spacing-10
        span.prismea-horizontal-spacing-10--slot
          span.prismea-radio-button--label Vegetables
      i.prismea-icon.prismea-glyph-12_validate
    label.prismea-radio-button.-disabled(for='6')
      input#6(type='checkbox', name='radio', disabled)
      span.prismea-radio-button--container.prismea-horizontal-spacing-10
        span.prismea-horizontal-spacing-10--slot
          span.prismea-radio-button--label Milk
      i.prismea-icon.prismea-glyph-12_validate
div
  .prismea-radio-button-list
    label.prismea-radio-button(for='7')
      input#7(type='checkbox', name='radio')
      span.prismea-radio-button--container.prismea-horizontal-spacing-10
        span.prismea-horizontal-spacing-10--slot
          span.prismea-radio-button--label Leslie Alexander
          span.prismea-radio-button--legend.prismea-numeral FR14 2004 1010 0505 0001 3M02 606
        span.prismea-horizontal-spacing-10--slot.prismea-radio-button--amount
          span.prismea-numeral 2 795,90€
      i.prismea-icon.prismea-glyph-12_validate
    label.prismea-radio-button.-disabled(for='8')
      input#8(type='checkbox', name='radio', disabled)
      span.prismea-radio-button--container.prismea-horizontal-spacing-10
        span.prismea-horizontal-spacing-10--slot
          span.prismea-radio-button--label Guy Hawkins
          span.prismea-radio-button--legend.prismea-numeral FR14 2004 1010 0505 0001 3M02 606
        span.prismea-horizontal-spacing-10--slot.prismea-radio-button--amount
          span.prismea-numeral 2 791,91€
      i.prismea-icon.prismea-glyph-12_validate
    label.prismea-radio-button(for='9')
      input#9(type='checkbox', name='radio', checked)
      span.prismea-radio-button--container.prismea-horizontal-spacing-10
        span.prismea-horizontal-spacing-10--slot
          span.prismea-radio-button--label Leslie Alexander
          span.prismea-radio-button--legend.prismea-numeral FR14 2004 1010 0505 0001 3M02 606
        span.prismea-horizontal-spacing-10--slot.prismea-radio-button--amount
          span.prismea-numeral 2 795,90€
      i.prismea-icon.prismea-glyph-12_validate

Select Input

Used to enable select auto completion

<div class="prismea-select-input">
  <div class="prismea-select--field">
    <div class="prismea-input   ">
      <div class="prismea-input--container"><span class="prismea-input--placeholder">Mighty text</span>
        <input type="text" value=""/><i class="prismea-input--icon-suffix prismea-glyph-16_period"></i>
      </div>
      <div class="prismea-input--error"><span>Something bad happened</span></div>
    </div>
    <ul class="prismea-select--options">
      <li class="prismea-select--option">
        <p class="prismea-text">Option 1 -hover me-</p>
      </li>
      <li class="prismea-select--option -selected">
        <p class="prismea-text">Option 3 -selected-</p><i class="prismea-icon prismea-glyph-12_validate"></i>
      </li>
      <li class="prismea-select--option">
        <p class="prismea-text">Option 4</p>
      </li>
      <li class="prismea-select--option">
        <p class="prismea-text">Option 5</p>
      </li>
      <li class="prismea-select--option">
        <p class="prismea-text">Option 6</p>
      </li>
    </ul>
  </div>
  <div class="prismea-select-input--error"><span>Something bad happened</span></div>
</div>
<div class="prismea-select-input -error">
  <div class="prismea-select--field -error">
    <div class="prismea-input -error  ">
      <div class="prismea-input--container"><span class="prismea-input--placeholder">Mighty text</span>
        <input type="text" value=""/><i class="prismea-input--icon-suffix prismea-glyph-16_period"></i>
      </div>
      <div class="prismea-input--error"><span>Something bad happened</span></div>
    </div>
    <ul class="prismea-select--options">
      <li class="prismea-select--option">
        <p class="prismea-text">Option 1 -hover me-</p>
      </li>
      <li class="prismea-select--option -selected">
        <p class="prismea-text">Option 3 -selected-</p><i class="prismea-icon prismea-glyph-12_validate"></i>
      </li>
      <li class="prismea-select--option">
        <p class="prismea-text">Option 4</p>
      </li>
      <li class="prismea-select--option">
        <p class="prismea-text">Option 5</p>
      </li>
      <li class="prismea-select--option">
        <p class="prismea-text">Option 6</p>
      </li>
    </ul>
  </div>
  <div class="prismea-select-input--error"><span>Something bad happened</span></div>
</div>
<div class="prismea-select-input">
  <div class="prismea-select--field -typed -disabled">
    <div class="prismea-input   ">
      <div class="prismea-input--container"><span class="prismea-input--placeholder">Mighty text</span>
        <input type="text" value=""/><i class="prismea-input--icon-suffix prismea-glyph-16_period"></i>
      </div>
      <div class="prismea-input--error"><span>Something bad happened</span></div>
    </div>
    <ul class="prismea-select--options">
      <li class="prismea-select--option">
        <p class="prismea-text">Option 1 -hover me-</p>
      </li>
      <li class="prismea-select--option -selected">
        <p class="prismea-text">Option 3 -selected-</p><i class="prismea-icon prismea-glyph-12_validate"></i>
      </li>
      <li class="prismea-select--option">
        <p class="prismea-text">Option 4</p>
      </li>
      <li class="prismea-select--option">
        <p class="prismea-text">Option 5</p>
      </li>
      <li class="prismea-select--option">
        <p class="prismea-text">Option 6</p>
      </li>
    </ul>
  </div>
  <div class="prismea-select-input--error"><span>Something bad happened</span></div>
</div>
<div class="prismea-select-input">
  <div class="prismea-select--field -typed">
    <div class="prismea-input   ">
      <div class="prismea-input--container"><span class="prismea-input--placeholder">Mighty text</span>
        <input type="text" value=""/><i class="prismea-input--icon-suffix prismea-glyph-16_period"></i>
      </div>
      <div class="prismea-input--error"><span>Something bad happened</span></div>
    </div>
    <ul class="prismea-select--options">
      <li class="prismea-select--option">
        <p class="prismea-text">Option 1 -hover me-</p>
      </li>
      <li class="prismea-select--option -selected">
        <p class="prismea-text">Option 3 -selected-</p><i class="prismea-icon prismea-glyph-12_validate"></i>
      </li>
      <li class="prismea-select--option">
        <p class="prismea-text">Option 4</p>
      </li>
      <li class="prismea-select--option">
        <p class="prismea-text">Option 5</p>
      </li>
      <li class="prismea-select--option">
        <p class="prismea-text">Option 6</p>
      </li>
    </ul>
  </div>
  <div class="prismea-select-input--error"><span>Something bad happened</span></div>
</div>
<div class="prismea-select-input" style="margin-bottom: 221px;">
  <div class="prismea-select--field -open">
    <div class="prismea-input   ">
      <div class="prismea-input--container"><span class="prismea-input--placeholder">Mighty text</span>
        <input type="text" value=""/><i class="prismea-input--icon-suffix prismea-glyph-16_period"></i>
      </div>
      <div class="prismea-input--error"><span>Something bad happened</span></div>
    </div>
    <ul class="prismea-select--options">
      <li class="prismea-select--option">
        <p class="prismea-text">Option 1 -hover me-</p>
      </li>
      <li class="prismea-select--option -selected">
        <p class="prismea-text">Option 3 -selected-</p><i class="prismea-icon prismea-glyph-12_validate"></i>
      </li>
      <li class="prismea-select--option">
        <p class="prismea-text">Option 4</p>
      </li>
      <li class="prismea-select--option">
        <p class="prismea-text">Option 5</p>
      </li>
      <li class="prismea-select--option">
        <p class="prismea-text">Option 6</p>
      </li>
    </ul>
  </div>
  <div class="prismea-select-input--error"><span>Something bad happened</span></div>
</div>
<div class="prismea-select-input" style="margin-bottom: 221px;">
  <div class="prismea-select--field -typed -open">
    <div class="prismea-input   ">
      <div class="prismea-input--container"><span class="prismea-input--placeholder">Mighty text</span>
        <input type="text" value=""/><i class="prismea-input--icon-suffix prismea-glyph-16_period"></i>
      </div>
      <div class="prismea-input--error"><span>Something bad happened</span></div>
    </div>
    <ul class="prismea-select--options">
      <li class="prismea-select--option">
        <p class="prismea-text">Option 1 -hover me-</p>
      </li>
      <li class="prismea-select--option -selected">
        <p class="prismea-text">Option 3 -selected-</p><i class="prismea-icon prismea-glyph-12_validate"></i>
      </li>
      <li class="prismea-select--option">
        <p class="prismea-text">Option 4</p>
      </li>
      <li class="prismea-select--option">
        <p class="prismea-text">Option 5</p>
      </li>
      <li class="prismea-select--option">
        <p class="prismea-text">Option 6</p>
      </li>
    </ul>
  </div>
  <div class="prismea-select-input--error"><span>Something bad happened</span></div>
</div>
.prismea-select-input
  .prismea-select--field
    .prismea-input
      .prismea-input--container
        span.prismea-input--placeholder Mighty text
        input(type='text')
        i.prismea-input--icon-suffix.prismea-glyph-16_period
      .prismea-input--error
        span Something bad happened
    ul.prismea-select--options
      li.prismea-select--option
        p.prismea-text Option 1 -hover me-
      li.prismea-select--option.-selected
        p.prismea-text Option 3 -selected-
        i.prismea-icon.prismea-glyph-12_validate
      li.prismea-select--option
        p.prismea-text Option 4
      li.prismea-select--option
        p.prismea-text Option 5
      li.prismea-select--option
        p.prismea-text Option 6
  .prismea-select-input--error
    span Something bad happened
.prismea-select-input.-error
  .prismea-select--field.-error
    .prismea-input.-error
      .prismea-input--container
        span.prismea-input--placeholder Mighty text
        input(type='text')
        i.prismea-input--icon-suffix.prismea-glyph-16_period
      .prismea-input--error
        span Something bad happened
    ul.prismea-select--options
      li.prismea-select--option
        p.prismea-text Option 1 -hover me-
      li.prismea-select--option.-selected
        p.prismea-text Option 3 -selected-
        i.prismea-icon.prismea-glyph-12_validate
      li.prismea-select--option
        p.prismea-text Option 4
      li.prismea-select--option
        p.prismea-text Option 5
      li.prismea-select--option
        p.prismea-text Option 6
  .prismea-select-input--error
    span Something bad happened
.prismea-select-input
  .prismea-select--field.-typed.-disabled
    .prismea-input
      .prismea-input--container
        span.prismea-input--placeholder Mighty text
        input(type='text')
        i.prismea-input--icon-suffix.prismea-glyph-16_period
      .prismea-input--error
        span Something bad happened
    ul.prismea-select--options
      li.prismea-select--option
        p.prismea-text Option 1 -hover me-
      li.prismea-select--option.-selected
        p.prismea-text Option 3 -selected-
        i.prismea-icon.prismea-glyph-12_validate
      li.prismea-select--option
        p.prismea-text Option 4
      li.prismea-select--option
        p.prismea-text Option 5
      li.prismea-select--option
        p.prismea-text Option 6
  .prismea-select-input--error
    span Something bad happened
.prismea-select-input
  .prismea-select--field.-typed
    .prismea-input
      .prismea-input--container
        span.prismea-input--placeholder Mighty text
        input(type='text')
        i.prismea-input--icon-suffix.prismea-glyph-16_period
      .prismea-input--error
        span Something bad happened
    ul.prismea-select--options
      li.prismea-select--option
        p.prismea-text Option 1 -hover me-
      li.prismea-select--option.-selected
        p.prismea-text Option 3 -selected-
        i.prismea-icon.prismea-glyph-12_validate
      li.prismea-select--option
        p.prismea-text Option 4
      li.prismea-select--option
        p.prismea-text Option 5
      li.prismea-select--option
        p.prismea-text Option 6
  .prismea-select-input--error
    span Something bad happened
.prismea-select-input(style='margin-bottom: 221px;')
  .prismea-select--field.-open
    .prismea-input
      .prismea-input--container
        span.prismea-input--placeholder Mighty text
        input(type='text')
        i.prismea-input--icon-suffix.prismea-glyph-16_period
      .prismea-input--error
        span Something bad happened
    ul.prismea-select--options
      li.prismea-select--option
        p.prismea-text Option 1 -hover me-
      li.prismea-select--option.-selected
        p.prismea-text Option 3 -selected-
        i.prismea-icon.prismea-glyph-12_validate
      li.prismea-select--option
        p.prismea-text Option 4
      li.prismea-select--option
        p.prismea-text Option 5
      li.prismea-select--option
        p.prismea-text Option 6
  .prismea-select-input--error
    span Something bad happened
.prismea-select-input(style='margin-bottom: 221px;')
  .prismea-select--field.-typed.-open
    .prismea-input
      .prismea-input--container
        span.prismea-input--placeholder Mighty text
        input(type='text')
        i.prismea-input--icon-suffix.prismea-glyph-16_period
      .prismea-input--error
        span Something bad happened
    ul.prismea-select--options
      li.prismea-select--option
        p.prismea-text Option 1 -hover me-
      li.prismea-select--option.-selected
        p.prismea-text Option 3 -selected-
        i.prismea-icon.prismea-glyph-12_validate
      li.prismea-select--option
        p.prismea-text Option 4
      li.prismea-select--option
        p.prismea-text Option 5
      li.prismea-select--option
        p.prismea-text Option 6
  .prismea-select-input--error
    span Something bad happened

Sidebar Card

<div class="prismea-card" style="margin-bottom:30px;">
  <div class="prismea-card--title">
    <div class="prismea-horizontal-spacing-10 -middle">
      <div class="prismea-horizontal-spacing-15--slot"><i class="prismea-icon -x1 prismea-glyph-16_admin-sub"></i>
      </div>
      <div class="prismea-horizontal-spacing-15--slot">
        <p class="prismea-text">Simple card
        </p>
      </div>
    </div>
  </div>
  <div class="prismea-card--body">
    <div class="prismea-card--slot">
      <div class="prismea-vertical-spacing-15">
        <div class="prismea-vertical-spacing-15--slot"><span class="prismea-sidebar-text -min prismea-color -color-grey3">Name</span>
          <div><span class="prismea-sidebar-text">Boris Vian</span>
          </div>
        </div>
        <div class="prismea-vertical-spacing-15--slot"><span class="prismea-sidebar-text -min prismea-color -color-grey3">Company</span>
          <div><span class="prismea-sidebar-text">The Strangers</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
<div class="prismea-card" style="margin-bottom:30px;">
  <div class="prismea-card--title">
    <div class="prismea-horizontal-spacing-10 -middle">
      <div class="prismea-horizontal-spacing-15--slot"><i class="prismea-icon -x1 prismea-glyph-16_admin-sub"></i>
      </div>
      <div class="prismea-horizontal-spacing-15--slot">
        <p class="prismea-text">With footer (closed)
        </p>
      </div>
    </div>
  </div>
  <div class="prismea-card--body">
    <div class="prismea-card--slot">
      <div class="prismea-vertical-spacing-15">
        <div class="prismea-vertical-spacing-15--slot"><span class="prismea-sidebar-text -min prismea-color -color-grey3">Name</span>
          <div><span class="prismea-sidebar-text">Boris Vian</span>
          </div>
        </div>
        <div class="prismea-vertical-spacing-15--slot"><span class="prismea-sidebar-text -min prismea-color -color-grey3">Company</span>
          <div><span class="prismea-sidebar-text">The Strangers</span>
          </div>
        </div>
      </div>
    </div>
    <div class="prismea-card--footer -color-negative">
      <div class="prismea-horizontal-spacing-10 -middle -justify-middle">
        <div class="prismea-horizontal-spacing-15--slot"><i class="prismea-icon -x1 prismea-glyph-40_delete"></i>
        </div>
        <div class="prismea-horizontal-spacing-15--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-15--slot">
            <p class="prismea-text">You're about to push the red button, are you sure?
            </p>
          </div>
          <div class="prismea-vertical-spacing-15--slot">
            <div class="prismea-horizontal-spacing-10 -justify-middle">
              <div class="prismea-horizontal-spacing-15--slot">
                <button class="prismea-button -short  -pill">Yes
                </button>
              </div>
              <div class="prismea-horizontal-spacing-15--slot">
                <button class="prismea-button -short  -pill">No
                </button>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
<div class="prismea-card" style="margin-bottom:30px;">
  <div class="prismea-card--title">
    <div class="prismea-horizontal-spacing-10 -middle">
      <div class="prismea-horizontal-spacing-15--slot"><i class="prismea-icon -x1 prismea-glyph-16_admin-sub"></i>
      </div>
      <div class="prismea-horizontal-spacing-15--slot">
        <p class="prismea-text">With footer (open)
        </p>
      </div>
    </div>
  </div>
  <div class="prismea-card--body">
    <div class="prismea-card--slot">
      <div class="prismea-vertical-spacing-15">
        <div class="prismea-vertical-spacing-15--slot"><span class="prismea-sidebar-text -min prismea-color -color-grey3">Name</span>
          <div><span class="prismea-sidebar-text">Boris Vian</span>
          </div>
        </div>
        <div class="prismea-vertical-spacing-15--slot"><span class="prismea-sidebar-text -min prismea-color -color-grey3">Company</span>
          <div><span class="prismea-sidebar-text">The Strangers</span>
          </div>
        </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-15--slot"><i class="prismea-icon -x1 prismea-glyph-40_delete"></i>
        </div>
        <div class="prismea-horizontal-spacing-15--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-15--slot">
            <p class="prismea-text">You're about to push the red button, are you sure?
            </p>
          </div>
          <div class="prismea-vertical-spacing-15--slot">
            <div class="prismea-horizontal-spacing-10 -justify-middle">
              <div class="prismea-horizontal-spacing-15--slot">
                <button class="prismea-button -short  -pill">Yes
                </button>
              </div>
              <div class="prismea-horizontal-spacing-15--slot">
                <button class="prismea-button -short  -pill">No
                </button>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
<div class="prismea-card" style="margin-bottom:30px;">
  <div class="prismea-card--body">
    <div class="prismea-card--slot">
      <div class="prismea-horizontal-spacing-10 -middle -justify-middle">
        <div class="prismea-horizontal-spacing-15--slot"><i class="prismea-icon prismea-glyph-24_outgoing-transfer"></i>
        </div>
        <div class="prismea-horizontal-spacing-15--slot"><span class="prismea-sidebar-text -button">Do this stuff</span>
        </div>
      </div>
    </div>
  </div>
</div>
<div class="prismea-card" style="margin-bottom:30px;">
  <div class="prismea-card--title -category1">
    <div class="prismea-horizontal-spacing-10 -middle">
      <div class="prismea-horizontal-spacing-15--slot"><i class="prismea-icon -x1 prismea-glyph-16_admin-sub"></i>
      </div>
      <div class="prismea-horizontal-spacing-15--slot">
        <p class="prismea-text">Category 1
        </p>
      </div>
    </div>
  </div>
  <div class="prismea-card--body">
    <div class="prismea-card--slot">
      <div class="prismea-vertical-spacing-15">
        <div class="prismea-vertical-spacing-15--slot"><span class="prismea-sidebar-text -min prismea-color -color-grey3">Name</span>
          <div><span class="prismea-sidebar-text">Boris Vian</span>
          </div>
        </div>
        <div class="prismea-vertical-spacing-15--slot"><span class="prismea-sidebar-text -min prismea-color -color-grey3">Company</span>
          <div><span class="prismea-sidebar-text">The Strangers</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
<div class="prismea-card ion--expandable" style="margin-bottom:30px;">
  <div class="prismea-card--title -category1">
    <div class="prismea-horizontal-spacing-10 -middle">
      <div class="prismea-horizontal-spacing-15--slot"><i class="prismea-icon -x1 prismea-glyph-16_admin-sub"></i>
      </div>
      <div class="prismea-horizontal-spacing-15--slot">
        <p class="prismea-text">Category 1 (expandable / not expanded)
        </p>
      </div>
    </div>
    <div class="prismea-horizontal-spacing-10 -middle">
      <div class="prismea-card--title-caret"><i class="prismea-icon -x1 prismea-glyph-12_caret-down"></i>
      </div>
    </div>
  </div>
  <div class="prismea-card--body">
    <div class="prismea-card--slot">
      <div class="prismea-vertical-spacing-15">
        <div class="prismea-vertical-spacing-15--slot"><span class="prismea-sidebar-text -min prismea-color -color-grey3">Name</span>
          <div><span class="prismea-sidebar-text">Boris Vian</span>
          </div>
        </div>
        <div class="prismea-vertical-spacing-15--slot"><span class="prismea-sidebar-text -min prismea-color -color-grey3">Company</span>
          <div><span class="prismea-sidebar-text">The Strangers</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
<div class="prismea-card ion--expandable -ion--expanded" style="margin-bottom:30px;">
  <div class="prismea-card--title -category1">
    <div class="prismea-horizontal-spacing-10 -middle">
      <div class="prismea-horizontal-spacing-15--slot"><i class="prismea-icon -x1 prismea-glyph-16_admin-sub"></i>
      </div>
      <div class="prismea-horizontal-spacing-15--slot">
        <p class="prismea-text">Category 1 (expandable / expanded)
        </p>
      </div>
    </div>
    <div class="prismea-horizontal-spacing-10 -middle">
      <div class="prismea-card--title-caret"><i class="prismea-icon -x1 prismea-glyph-12_caret-down"></i>
      </div>
    </div>
  </div>
  <div class="prismea-card--body">
    <div class="prismea-card--slot">
      <div class="prismea-vertical-spacing-15">
        <div class="prismea-vertical-spacing-15--slot"><span class="prismea-sidebar-text -min prismea-color -color-grey3">Name</span>
          <div><span class="prismea-sidebar-text">Boris Vian</span>
          </div>
        </div>
        <div class="prismea-vertical-spacing-15--slot"><span class="prismea-sidebar-text -min prismea-color -color-grey3">Company</span>
          <div><span class="prismea-sidebar-text">The Strangers</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
<div class="prismea-card" style="margin-bottom:30px;">
  <div class="prismea-card--title">
    <div class="prismea-horizontal-spacing-10 -middle">
      <div class="prismea-horizontal-spacing-15--slot"><i class="prismea-icon -x1 prismea-glyph-16_admin-sub"></i>
      </div>
      <div class="prismea-horizontal-spacing-15--slot">
        <p class="prismea-text">With input range
        </p>
      </div>
    </div>
  </div>
  <div class="prismea-card--body">
    <div class="prismea-card--slot">
      <div class="prismea-vertical-spacing-15">
        <div class="prismea-vertical-spacing-15--slot"><span class="prismea-sidebar-text -min prismea-color -color-grey3">Name</span>
          <div><span class="prismea-sidebar-text">Boris Vian</span>
          </div>
        </div>
        <div class="prismea-vertical-spacing-15--slot"><span class="prismea-sidebar-text -min prismea-color -color-grey3">Company</span>
          <div><span class="prismea-sidebar-text">The Strangers</span>
          </div>
        </div>
        <div class="prismea-vertical-spacing-15--slot"><span class="prismea-sidebar-text -min prismea-color -color-grey3">Payment and withdrawal limits</span>
        </div>
        <div class="prismea-vertical-spacing-15--slot">
          <div class="prismea-tuple mb-1">
            <div class="prismea-tuple--slot"><span class="prismea-sidebar-text">Payment monthly limit</span>
            </div>
            <div class="prismea-tuple--slot"><span class="prismea-sidebar-text -min-link prismea-color -color-grey3">Modify</span>
            </div>
          </div>
          <div class="mb-2">
            <div class="prismea-sidebar-text -min prismea-numeral">220,37 / 880 €</div>
          </div>
          <div class="prismea-progress-bar">
            <div class="prismea-progress-bar--filled" style="width: 25%"></div>
          </div>
        </div>
        <div class="prismea-vertical-spacing-15--slot">
          <div class="prismea-tuple mb-1">
            <div class="prismea-tuple--slot"><span class="prismea-sidebar-text">Withdrawal monthly limit</span>
            </div>
            <div class="prismea-tuple--slot"><span class="prismea-sidebar-text -min-link prismea-color -color-grey3">Modify</span>
            </div>
          </div>
          <div class="mb-2">
            <div class="prismea-sidebar-text -min prismea-numeral">220,37 / 500 €</div>
          </div>
          <div class="prismea-progress-bar">
            <div class="prismea-progress-bar--filled" style="width: 48%"></div>
          </div>
        </div>
        <div class="prismea-vertical-spacing-15--slot">
          <div class="prismea-tuple">
            <div class="prismea-tuple--slot"><span class="prismea-sidebar-text">Withdrawal weekly limit</span>
            </div>
            <div class="prismea-tuple--slot"><span class="prismea-sidebar-text -min-link prismea-color -color-grey3">Cancel</span>
            </div>
          </div>
          <div class="prismea-input prismea-input-range  " style="--min:0; --max:100; --value:50; --text-min:&quot;0&quot;; --text-max:&quot;100&quot;;">
            <div class="prismea-input--container prismea-input-range--container -typed"><span class="prismea-input--placeholder">Weekly withdrawals</span>
              <input class="prismea-input-range--input" type="range" value="50" min="0" max="100" step="10"/>
              <output class="prismea-input-range--output-up">50</output>
              <output class="prismea-input-range--output-down">Valider</output>
            </div>
            <div class="prismea-input--error"><span>Something bad happened</span></div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
.prismea-card(style='margin-bottom:30px;')
  .prismea-card--title
    .prismea-horizontal-spacing-10.-middle
      .prismea-horizontal-spacing-15--slot
        i.prismea-icon.-x1.prismea-glyph-16_admin-sub
      .prismea-horizontal-spacing-15--slot
        p.prismea-text.
          Simple card
          
  .prismea-card--body
    .prismea-card--slot
      .prismea-vertical-spacing-15
        .prismea-vertical-spacing-15--slot
          span.prismea-sidebar-text.-min.prismea-color.-color-grey3 Name
          div
            span.prismea-sidebar-text Boris Vian
        .prismea-vertical-spacing-15--slot
          span.prismea-sidebar-text.-min.prismea-color.-color-grey3 Company
          div
            span.prismea-sidebar-text The Strangers
.prismea-card(style='margin-bottom:30px;')
  .prismea-card--title
    .prismea-horizontal-spacing-10.-middle
      .prismea-horizontal-spacing-15--slot
        i.prismea-icon.-x1.prismea-glyph-16_admin-sub
      .prismea-horizontal-spacing-15--slot
        p.prismea-text.
          With footer (closed)
          
  .prismea-card--body
    .prismea-card--slot
      .prismea-vertical-spacing-15
        .prismea-vertical-spacing-15--slot
          span.prismea-sidebar-text.-min.prismea-color.-color-grey3 Name
          div
            span.prismea-sidebar-text Boris Vian
        .prismea-vertical-spacing-15--slot
          span.prismea-sidebar-text.-min.prismea-color.-color-grey3 Company
          div
            span.prismea-sidebar-text The Strangers
    .prismea-card--footer.-color-negative
      .prismea-horizontal-spacing-10.-middle.-justify-middle
        .prismea-horizontal-spacing-15--slot
          i.prismea-icon.-x1.prismea-glyph-40_delete
        .prismea-horizontal-spacing-15--slot
          p.prismea-text.
            Push the red button
            
      .prismea-card--footer-hidden-text
        .prismea-vertical-spacing-10.-middle.-justify-middle
          .prismea-vertical-spacing-15--slot
            p.prismea-text.
              You're about to push the red button, are you sure?
              
          .prismea-vertical-spacing-15--slot
            .prismea-horizontal-spacing-10.-justify-middle
              .prismea-horizontal-spacing-15--slot
                button.prismea-button.-short.-pill.
                  Yes
                  
              .prismea-horizontal-spacing-15--slot
                button.prismea-button.-short.-pill.
                  No
                  
.prismea-card(style='margin-bottom:30px;')
  .prismea-card--title
    .prismea-horizontal-spacing-10.-middle
      .prismea-horizontal-spacing-15--slot
        i.prismea-icon.-x1.prismea-glyph-16_admin-sub
      .prismea-horizontal-spacing-15--slot
        p.prismea-text.
          With footer (open)
          
  .prismea-card--body
    .prismea-card--slot
      .prismea-vertical-spacing-15
        .prismea-vertical-spacing-15--slot
          span.prismea-sidebar-text.-min.prismea-color.-color-grey3 Name
          div
            span.prismea-sidebar-text Boris Vian
        .prismea-vertical-spacing-15--slot
          span.prismea-sidebar-text.-min.prismea-color.-color-grey3 Company
          div
            span.prismea-sidebar-text The Strangers
    .prismea-card--footer.-open.-color-negative
      .prismea-horizontal-spacing-10.-middle.-justify-middle
        .prismea-horizontal-spacing-15--slot
          i.prismea-icon.-x1.prismea-glyph-40_delete
        .prismea-horizontal-spacing-15--slot
          p.prismea-text.
            Push the red button
            
      .prismea-card--footer-hidden-text
        .prismea-vertical-spacing-10.-middle.-justify-middle
          .prismea-vertical-spacing-15--slot
            p.prismea-text.
              You're about to push the red button, are you sure?
              
          .prismea-vertical-spacing-15--slot
            .prismea-horizontal-spacing-10.-justify-middle
              .prismea-horizontal-spacing-15--slot
                button.prismea-button.-short.-pill.
                  Yes
                  
              .prismea-horizontal-spacing-15--slot
                button.prismea-button.-short.-pill.
                  No
                  
.prismea-card(style='margin-bottom:30px;')
  .prismea-card--body
    .prismea-card--slot
      .prismea-horizontal-spacing-10.-middle.-justify-middle
        .prismea-horizontal-spacing-15--slot
          i.prismea-icon.prismea-glyph-24_outgoing-transfer
        .prismea-horizontal-spacing-15--slot
          span.prismea-sidebar-text.-button Do this stuff
.prismea-card(style='margin-bottom:30px;')
  .prismea-card--title.-category1
    .prismea-horizontal-spacing-10.-middle
      .prismea-horizontal-spacing-15--slot
        i.prismea-icon.-x1.prismea-glyph-16_admin-sub
      .prismea-horizontal-spacing-15--slot
        p.prismea-text.
          Category 1
          
  .prismea-card--body
    .prismea-card--slot
      .prismea-vertical-spacing-15
        .prismea-vertical-spacing-15--slot
          span.prismea-sidebar-text.-min.prismea-color.-color-grey3 Name
          div
            span.prismea-sidebar-text Boris Vian
        .prismea-vertical-spacing-15--slot
          span.prismea-sidebar-text.-min.prismea-color.-color-grey3 Company
          div
            span.prismea-sidebar-text The Strangers
.prismea-card.ion--expandable(style='margin-bottom:30px;')
  .prismea-card--title.-category1
    .prismea-horizontal-spacing-10.-middle
      .prismea-horizontal-spacing-15--slot
        i.prismea-icon.-x1.prismea-glyph-16_admin-sub
      .prismea-horizontal-spacing-15--slot
        p.prismea-text.
          Category 1 (expandable / not expanded)
          
    .prismea-horizontal-spacing-10.-middle
      .prismea-card--title-caret
        i.prismea-icon.-x1.prismea-glyph-12_caret-down
  .prismea-card--body
    .prismea-card--slot
      .prismea-vertical-spacing-15
        .prismea-vertical-spacing-15--slot
          span.prismea-sidebar-text.-min.prismea-color.-color-grey3 Name
          div
            span.prismea-sidebar-text Boris Vian
        .prismea-vertical-spacing-15--slot
          span.prismea-sidebar-text.-min.prismea-color.-color-grey3 Company
          div
            span.prismea-sidebar-text The Strangers
.prismea-card.ion--expandable.-ion--expanded(style='margin-bottom:30px;')
  .prismea-card--title.-category1
    .prismea-horizontal-spacing-10.-middle
      .prismea-horizontal-spacing-15--slot
        i.prismea-icon.-x1.prismea-glyph-16_admin-sub
      .prismea-horizontal-spacing-15--slot
        p.prismea-text.
          Category 1 (expandable / expanded)
          
    .prismea-horizontal-spacing-10.-middle
      .prismea-card--title-caret
        i.prismea-icon.-x1.prismea-glyph-12_caret-down
  .prismea-card--body
    .prismea-card--slot
      .prismea-vertical-spacing-15
        .prismea-vertical-spacing-15--slot
          span.prismea-sidebar-text.-min.prismea-color.-color-grey3 Name
          div
            span.prismea-sidebar-text Boris Vian
        .prismea-vertical-spacing-15--slot
          span.prismea-sidebar-text.-min.prismea-color.-color-grey3 Company
          div
            span.prismea-sidebar-text The Strangers
.prismea-card(style='margin-bottom:30px;')
  .prismea-card--title
    .prismea-horizontal-spacing-10.-middle
      .prismea-horizontal-spacing-15--slot
        i.prismea-icon.-x1.prismea-glyph-16_admin-sub
      .prismea-horizontal-spacing-15--slot
        p.prismea-text.
          With input range
          
  .prismea-card--body
    .prismea-card--slot
      .prismea-vertical-spacing-15
        .prismea-vertical-spacing-15--slot
          span.prismea-sidebar-text.-min.prismea-color.-color-grey3 Name
          div
            span.prismea-sidebar-text Boris Vian
        .prismea-vertical-spacing-15--slot
          span.prismea-sidebar-text.-min.prismea-color.-color-grey3 Company
          div
            span.prismea-sidebar-text The Strangers
        .prismea-vertical-spacing-15--slot
          span.prismea-sidebar-text.-min.prismea-color.-color-grey3 Payment and withdrawal limits
        .prismea-vertical-spacing-15--slot
          .prismea-tuple.mb-1
            .prismea-tuple--slot
              span.prismea-sidebar-text Payment monthly limit
            .prismea-tuple--slot
              span.prismea-sidebar-text.-min-link.prismea-color.-color-grey3 Modify
          .mb-2
            .prismea-sidebar-text.-min.prismea-numeral 220,37 / 880 €
          .prismea-progress-bar
            .prismea-progress-bar--filled(style='width: 25%')
        .prismea-vertical-spacing-15--slot
          .prismea-tuple.mb-1
            .prismea-tuple--slot
              span.prismea-sidebar-text Withdrawal monthly limit
            .prismea-tuple--slot
              span.prismea-sidebar-text.-min-link.prismea-color.-color-grey3 Modify
          .mb-2
            .prismea-sidebar-text.-min.prismea-numeral 220,37 / 500 €
          .prismea-progress-bar
            .prismea-progress-bar--filled(style='width: 48%')
        .prismea-vertical-spacing-15--slot
          .prismea-tuple
            .prismea-tuple--slot
              span.prismea-sidebar-text Withdrawal weekly limit
            .prismea-tuple--slot
              span.prismea-sidebar-text.-min-link.prismea-color.-color-grey3 Cancel
          .prismea-input.prismea-input-range(style='--min:0; --max:100; --value:50; --text-min:"0"; --text-max:"100";')
            .prismea-input--container.prismea-input-range--container.-typed
              span.prismea-input--placeholder Weekly withdrawals
              input.prismea-input-range--input(type='range', value='50', min='0', max='100', step='10')
              output.prismea-input-range--output-up 50
              output.prismea-input-range--output-down Valider
            .prismea-input--error
              span Something bad happened

Sidebar Card Tag Selector

Used to display and update tag/category for a bank movement

<div style="display:flex;">
  <!-- without selectedTag-->
  <div style="width: 305px; margin: 0 auto;">
    <!-- closed-->
    <div class="prismea-card ion--expandable" style="margin-bottom:30px;">
      <div class="prismea-card--title -color-grey3 -color-black-hover">
        <div class="prismea-horizontal-spacing-10 -middle">
          <div class="prismea-horizontal-spacing-15--slot"><i class="prismea-icon prismea-glyph-24_category-placeholder"></i>
          </div>
          <div class="prismea-horizontal-spacing-15--slot -expand">
            <p class="prismea-text">Add a tag
            </p>
          </div>
        </div>
        <div class="prismea-horizontal-spacing-10 -middle">
          <div class="prismea-card--title-caret"><i class="prismea-icon -x1 prismea-glyph-12_caret-down"></i>
          </div>
        </div>
      </div>
      <div class="prismea-card--body prismea-card-tag-selector">
        <div class="prismea-card--slot">
          <div class="prismea-vertical-spacing-10">
            <div class="prismea-card-tag-selector--scrollable-area">
              <!-- list of all suggested tags-->
              <div class="prismea-card-tag-selector--suggestions prismea-card-tag-selector--list-item">
                <div class="prismea-vertical-spacing-20--slot">
                  <div class="prismea-color -color-grey3 prismea-sidebar-text -min">Suggested tags</div>
                </div>
                <div class="prismea-vertical-spacing-20--slot">
                  <div class="prismea-horizontal-spacing-10 -middle prismea-color -color-category2-hover -all-children-hovered">
                    <div class="prismea-horizontal-spacing-10--slot"><i class="prismea-icon prismea-glyph-24_trip"></i></div>
                    <div>
                      <div class="prismea-sidebar-text -tag prismea-color -color-grey5">Business trip</div>
                      <div class="prismea-sidebar-text prismea-color">Hotels</div>
                    </div>
                  </div>
                </div>
                <div class="prismea-vertical-spacing-20--slot">
                  <div class="prismea-horizontal-spacing-10 -middle prismea-color -color-category2-hover -all-children-hovered">
                    <div class="prismea-horizontal-spacing-10--slot"><i class="prismea-icon prismea-glyph-24_trip"></i></div>
                    <div>
                      <div class="prismea-sidebar-text -tag prismea-color -color-grey5">Business trip</div>
                      <div class="prismea-sidebar-text prismea-color">Fuel</div>
                    </div>
                  </div>
                </div>
              </div>
              <div class="prismea-card-tag-selector--categories prismea-vertical-spacing-20--slot">
                <div class="prismea-card-tag-selector--list-item">
                  <div class="prismea-color -color-grey3 prismea-sidebar-text -min">Search by categories</div>
                </div>
                <div class="prismea-card-tag-selector--list-item ion-hoverable">
                  <div class="prismea-horizontal-spacing-10 -middle prismea-color -color-category3-hover">
                    <div class="prismea-horizontal-spacing-10--slot"><i class="prismea-icon prismea-glyph-24_management"></i></div>
                    <div class="prismea-horizontal-spacing-10--slot -expand">
                      <div class="prismea-sidebar-text">Administrative</div>
                    </div>
                    <div class="prismea-horizontal-spacing-10--slot"><i class="prismea-icon prismea-glyph-12_caret-down"></i></div>
                  </div>
                </div>
                <div class="prismea-card-tag-selector--list-item ion-hoverable">
                  <div class="prismea-horizontal-spacing-10 -middle prismea-color -color-category4-hover">
                    <div class="prismea-horizontal-spacing-10--slot"><i class="prismea-icon prismea-glyph-24_trip"></i></div>
                    <div class="prismea-horizontal-spacing-10--slot -expand">
                      <div class="prismea-sidebar-text">Business trip</div>
                    </div>
                    <div class="prismea-horizontal-spacing-10--slot"><i class="prismea-icon prismea-glyph-12_caret-down"></i></div>
                  </div>
                </div>
                <div class="prismea-card-tag-selector--list-item ion-hoverable">
                  <div class="prismea-horizontal-spacing-10 -middle prismea-color -color-category1-hover">
                    <div class="prismea-horizontal-spacing-10--slot"><i class="prismea-icon prismea-glyph-24_capital"></i></div>
                    <div class="prismea-horizontal-spacing-10--slot -expand">
                      <div class="prismea-sidebar-text">Capital</div>
                    </div>
                    <div class="prismea-horizontal-spacing-10--slot"><i class="prismea-icon prismea-glyph-12_caret-down"></i></div>
                  </div>
                </div>
                <div class="prismea-card-tag-selector--list-item ion-hoverable">
                  <div class="prismea-horizontal-spacing-10 -middle prismea-color -color-category2-hover">
                    <div class="prismea-horizontal-spacing-10--slot"><i class="prismea-icon prismea-glyph-24_commission"></i></div>
                    <div class="prismea-horizontal-spacing-10--slot -expand">
                      <div class="prismea-sidebar-text">Commissions</div>
                    </div>
                    <div class="prismea-horizontal-spacing-10--slot"><i class="prismea-icon prismea-glyph-12_caret-down"></i></div>
                  </div>
                </div>
                <div class="prismea-card-tag-selector--list-item ion-hoverable">
                  <div class="prismea-horizontal-spacing-10 -middle prismea-color -color-category2-hover">
                    <div class="prismea-horizontal-spacing-10--slot"><i class="prismea-icon prismea-glyph-24_collaborators-management"></i></div>
                    <div class="prismea-horizontal-spacing-10--slot -expand">
                      <div class="prismea-sidebar-text">Employee</div>
                    </div>
                    <div class="prismea-horizontal-spacing-10--slot"><i class="prismea-icon prismea-glyph-12_caret-down"></i></div>
                  </div>
                </div>
                <div class="prismea-card-tag-selector--list-item ion-hoverable">
                  <div class="prismea-horizontal-spacing-10 -middle prismea-color -color-category2-hover">
                    <div class="prismea-horizontal-spacing-10--slot"><i class="prismea-icon prismea-glyph-24_finance"></i></div>
                    <div class="prismea-horizontal-spacing-10--slot -expand">
                      <div class="prismea-sidebar-text">Finance</div>
                    </div>
                    <div class="prismea-horizontal-spacing-10--slot"><i class="prismea-icon prismea-glyph-12_caret-down"></i></div>
                  </div>
                </div>
              </div>
            </div>
            <div class="prismea-card-tag-selector--search">
              <div class="prismea-card-tag-selector--search-container">
                <div class="prismea-vertical-spacing-20--slot">
                  <div class="prismea-color -color-grey3 prismea-sidebar-text -min">Search by tags</div>
                </div>
                <div class="prismea-vertical-spacing-20--slot">
                  <div class="prismea-horizontal-spacing-10 -middle">
                    <div class="prismea-horizontal-spacing-10--slot"><i class="prismea-icon prismea-glyph-16_search"></i></div>
                    <div class="prismea-horizontal-spacing-10--slot -expand">
                      <div class="prismea-input">
                        <div class="prismea-input--container">
                          <input type="text" value=""/>
                          <div class="prismea-input--actions">
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
                <div class="prismea-vertical-spacing-20">
                  <div class="prismea-vertical-spacing-20--slot">
                    <div class="prismea-horizontal-spacing-10 -middle prismea-color -color-category2-hover">
                      <div class="prismea-horizontal-spacing-10--slot"><i class="prismea-icon prismea-glyph-24_trip"></i></div>
                      <div>
                        <div class="prismea-sidebar-text -tag">Business trip</div>
                        <div class="prismea-sidebar-text">Fuel</div>
                      </div>
                    </div>
                  </div>
                  <div class="prismea-vertical-spacing-20--slot">
                    <div class="prismea-horizontal-spacing-10 -middle prismea-color -color-category3-hover">
                      <div class="prismea-horizontal-spacing-10--slot"><i class="prismea-icon prismea-glyph-24_management"></i></div>
                      <div>
                        <div class="prismea-sidebar-text -tag">Administrative</div>
                        <div class="prismea-sidebar-text">Postal charges</div>
                      </div>
                    </div>
                  </div>
                  <div class="prismea-vertical-spacing-20--slot">
                    <div class="prismea-horizontal-spacing-10 -middle prismea-color -color-category2-hover">
                      <div class="prismea-horizontal-spacing-10--slot"><i class="prismea-icon prismea-glyph-24_trip"></i></div>
                      <div>
                        <div class="prismea-sidebar-text -tag">Business trip</div>
                        <div class="prismea-sidebar-text">Restaurants</div>
                      </div>
                    </div>
                  </div>
                  <div class="prismea-vertical-spacing-20--slot">
                    <div class="prismea-horizontal-spacing-10 -middle prismea-color -color-category4-hover">
                      <div class="prismea-horizontal-spacing-10--slot"><i class="prismea-icon prismea-glyph-24_finance"></i></div>
                      <div>
                        <div class="prismea-sidebar-text -tag">Finance</div>
                        <div class="prismea-sidebar-text">Term account</div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- expanded-->
    <div class="prismea-card ion--expandable -ion--expanded" style="margin-bottom:30px;">
      <div class="prismea-card--title -color-grey3 -color-black-hover">
        <div class="prismea-horizontal-spacing-10 -middle">
          <div class="prismea-horizontal-spacing-15--slot"><i class="prismea-icon prismea-glyph-24_category-placeholder"></i>
          </div>
          <div class="prismea-horizontal-spacing-15--slot -expand">
            <p class="prismea-text">Add a tag
            </p>
          </div>
        </div>
        <div class="prismea-horizontal-spacing-10 -middle">
          <div class="prismea-card--title-caret"><i class="prismea-icon -x1 prismea-glyph-12_caret-down"></i>
          </div>
        </div>
      </div>
      <div class="prismea-card--body prismea-card-tag-selector">
        <div class="prismea-card--slot">
          <div class="prismea-vertical-spacing-10">
            <div class="prismea-card-tag-selector--scrollable-area">
              <!-- list of all suggested tags-->
              <div class="prismea-card-tag-selector--suggestions prismea-card-tag-selector--list-item">
                <div class="prismea-vertical-spacing-20--slot">
                  <div class="prismea-color -color-grey3 prismea-sidebar-text -min">Suggested tags</div>
                </div>
                <div class="prismea-vertical-spacing-20--slot">
                  <div class="prismea-horizontal-spacing-10 -middle prismea-color -color-category2-hover -all-children-hovered">
                    <div class="prismea-horizontal-spacing-10--slot"><i class="prismea-icon prismea-glyph-24_trip"></i></div>
                    <div>
                      <div class="prismea-sidebar-text -tag prismea-color -color-grey5">Business trip</div>
                      <div class="prismea-sidebar-text prismea-color">Hotels</div>
                    </div>
                  </div>
                </div>
                <div class="prismea-vertical-spacing-20--slot">
                  <div class="prismea-horizontal-spacing-10 -middle prismea-color -color-category2-hover -all-children-hovered">
                    <div class="prismea-horizontal-spacing-10--slot"><i class="prismea-icon prismea-glyph-24_trip"></i></div>
                    <div>
                      <div class="prismea-sidebar-text -tag prismea-color -color-grey5">Business trip</div>
                      <div class="prismea-sidebar-text prismea-color">Fuel</div>
                    </div>
                  </div>
                </div>
              </div>
              <div class="prismea-card-tag-selector--categories prismea-vertical-spacing-20--slot">
                <div class="prismea-card-tag-selector--list-item">
                  <div class="prismea-color -color-grey3 prismea-sidebar-text -min">Search by categories</div>
                </div>
                <div class="prismea-card-tag-selector--list-item ion-hoverable">
                  <div class="prismea-horizontal-spacing-10 -middle prismea-color -color-category3-hover">
                    <div class="prismea-horizontal-spacing-10--slot"><i class="prismea-icon prismea-glyph-24_management"></i></div>
                    <div class="prismea-horizontal-spacing-10--slot -expand">
                      <div class="prismea-sidebar-text">Administrative</div>
                    </div>
                    <div class="prismea-horizontal-spacing-10--slot"><i class="prismea-icon prismea-glyph-12_caret-down"></i></div>
                  </div>
                </div>
                <div class="prismea-card-tag-selector--list-item ion-hoverable">
                  <div class="prismea-horizontal-spacing-10 -middle prismea-color -color-category4-hover">
                    <div class="prismea-horizontal-spacing-10--slot"><i class="prismea-icon prismea-glyph-24_trip"></i></div>
                    <div class="prismea-horizontal-spacing-10--slot -expand">
                      <div class="prismea-sidebar-text">Business trip</div>
                    </div>
                    <div class="prismea-horizontal-spacing-10--slot"><i class="prismea-icon prismea-glyph-12_caret-down"></i></div>
                  </div>
                </div>
                <div class="prismea-card-tag-selector--list-item ion-hoverable">
                  <div class="prismea-horizontal-spacing-10 -middle prismea-color -color-category1-hover">
                    <div class="prismea-horizontal-spacing-10--slot"><i class="prismea-icon prismea-glyph-24_capital"></i></div>
                    <div class="prismea-horizontal-spacing-10--slot -expand">
                      <div class="prismea-sidebar-text">Capital</div>
                    </div>
                    <div class="prismea-horizontal-spacing-10--slot"><i class="prismea-icon prismea-glyph-12_caret-down"></i></div>
                  </div>
                </div>
                <div class="prismea-card-tag-selector--list-item ion-hoverable">
                  <div class="prismea-horizontal-spacing-10 -middle prismea-color -color-category2-hover">
                    <div class="prismea-horizontal-spacing-10--slot"><i class="prismea-icon prismea-glyph-24_commission"></i></div>
                    <div class="prismea-horizontal-spacing-10--slot -expand">
                      <div class="prismea-sidebar-text">Commissions</div>
                    </div>
                    <div class="prismea-horizontal-spacing-10--slot"><i class="prismea-icon prismea-glyph-12_caret-down"></i></div>
                  </div>
                </div>
                <div class="prismea-card-tag-selector--list-item ion-hoverable">
                  <div class="prismea-horizontal-spacing-10 -middle prismea-color -color-category2-hover">
                    <div class="prismea-horizontal-spacing-10--slot"><i class="prismea-icon prismea-glyph-24_collaborators-management"></i></div>
                    <div class="prismea-horizontal-spacing-10--slot -expand">
                      <div class="prismea-sidebar-text">Employee</div>
                    </div>
                    <div class="prismea-horizontal-spacing-10--slot"><i class="prismea-icon prismea-glyph-12_caret-down"></i></div>
                  </div>
                </div>
                <div class="prismea-card-tag-selector--list-item ion-hoverable">
                  <div class="prismea-horizontal-spacing-10 -middle prismea-color -color-category2-hover">
                    <div class="prismea-horizontal-spacing-10--slot"><i class="prismea-icon prismea-glyph-24_finance"></i></div>
                    <div class="prismea-horizontal-spacing-10--slot -expand">
                      <div class="prismea-sidebar-text">Finance</div>
                    </div>
                    <div class="prismea-horizontal-spacing-10--slot"><i class="prismea-icon prismea-glyph-12_caret-down"></i></div>
                  </div>
                </div>
              </div>
            </div>
            <div class="prismea-card-tag-selector--search">
              <div class="prismea-card-tag-selector--search-container">
                <div class="prismea-vertical-spacing-20--slot">
                  <div class="prismea-color -color-grey3 prismea-sidebar-text -min">Search by tags</div>
                </div>
                <div class="prismea-vertical-spacing-20--slot">
                  <div class="prismea-horizontal-spacing-10 -middle">
                    <div class="prismea-horizontal-spacing-10--slot"><i class="prismea-icon prismea-glyph-16_search"></i></div>
                    <div class="prismea-horizontal-spacing-10--slot -expand">
                      <div class="prismea-input">
                        <div class="prismea-input--container">
                          <input type="text" value=""/>
                          <div class="prismea-input--actions">
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
                <div class="prismea-vertical-spacing-20">
                  <div class="prismea-vertical-spacing-20--slot">
                    <div class="prismea-horizontal-spacing-10 -middle prismea-color -color-category2-hover">
                      <div class="prismea-horizontal-spacing-10--slot"><i class="prismea-icon prismea-glyph-24_trip"></i></div>
                      <div>
                        <div class="prismea-sidebar-text -tag">Business trip</div>
                        <div class="prismea-sidebar-text">Fuel</div>
                      </div>
                    </div>
                  </div>
                  <div class="prismea-vertical-spacing-20--slot">
                    <div class="prismea-horizontal-spacing-10 -middle prismea-color -color-category3-hover">
                      <div class="prismea-horizontal-spacing-10--slot"><i class="prismea-icon prismea-glyph-24_management"></i></div>
                      <div>
                        <div class="prismea-sidebar-text -tag">Administrative</div>
                        <div class="prismea-sidebar-text">Postal charges</div>
                      </div>
                    </div>
                  </div>
                  <div class="prismea-vertical-spacing-20--slot">
                    <div class="prismea-horizontal-spacing-10 -middle prismea-color -color-category2-hover">
                      <div class="prismea-horizontal-spacing-10--slot"><i class="prismea-icon prismea-glyph-24_trip"></i></div>
                      <div>
                        <div class="prismea-sidebar-text -tag">Business trip</div>
                        <div class="prismea-sidebar-text">Restaurants</div>
                      </div>
                    </div>
                  </div>
                  <div class="prismea-vertical-spacing-20--slot">
                    <div class="prismea-horizontal-spacing-10 -middle prismea-color -color-category4-hover">
                      <div class="prismea-horizontal-spacing-10--slot"><i class="prismea-icon prismea-glyph-24_finance"></i></div>
                      <div>
                        <div class="prismea-sidebar-text -tag">Finance</div>
                        <div class="prismea-sidebar-text">Term account</div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- category highlighted (suggestions and categories are hidden, search is NOT active)-->
    <div class="prismea-card ion--expandable -ion--expanded" style="margin-bottom:30px;">
      <div class="prismea-card--title -color-grey3 -color-black-hover">
        <div class="prismea-horizontal-spacing-10 -middle">
          <div class="prismea-horizontal-spacing-15--slot"><i class="prismea-icon prismea-glyph-24_category-placeholder"></i>
          </div>
          <div class="prismea-horizontal-spacing-15--slot -expand">
            <p class="prismea-text">Add a tag
            </p>
          </div>
        </div>
        <div class="prismea-horizontal-spacing-10 -middle">
          <div class="prismea-card--title-caret"><i class="prismea-icon -x1 prismea-glyph-12_caret-down"></i>
          </div>
        </div>
      </div>
      <div class="prismea-card--body prismea-card-tag-selector">
        <div class="prismea-card--slot">
          <div class="prismea-vertical-spacing-10">
            <div class="prismea-card-tag-selector--scrollable-area">
              <!-- list of all suggested tags-->
              <div class="prismea-vertical-spacing-20">
                <div class="prismea-horizontal-spacing-10 -middle prismea-color -color-category2 prismea-card-tag-selector--list-item">
                  <div class="prismea-horizontal-spacing-10--slot"><i class="prismea-icon prismea-glyph-24_trip"></i></div>
                  <div class="prismea-horizontal-spacing-10--slot -expand">
                    <div class="prismea-sidebar-text">Business trip (user clicked on it)</div>
                  </div>
                  <div class="prismea-horizontal-spacing-10--slot"><i class="prismea-icon prismea-glyph-12_caret-up"></i></div>
                </div>
              </div>
            </div>
            <div class="prismea-card-tag-selector--search -shifted -active">
              <div class="prismea-card-tag-selector--search-container">
                <div class="prismea-vertical-spacing-20--slot">
                  <div class="prismea-color -color-grey3 prismea-sidebar-text -min">Search by tags</div>
                </div>
                <div class="prismea-vertical-spacing-20--slot">
                  <div class="prismea-horizontal-spacing-10 -middle">
                    <div class="prismea-horizontal-spacing-10--slot"><i class="prismea-icon prismea-glyph-16_search"></i></div>
                    <div class="prismea-horizontal-spacing-10--slot -expand">
                      <div class="prismea-input">
                        <div class="prismea-input--container">
                          <input type="text" value=""/>
                          <div class="prismea-input--actions">
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
                <div class="prismea-vertical-spacing-20">
                  <div class="prismea-vertical-spacing-20--slot">
                    <div class="prismea-horizontal-spacing-10 -middle prismea-color -color-category2-hover">
                      <div class="prismea-horizontal-spacing-10--slot"><i class="prismea-icon prismea-glyph-24_trip"></i></div>
                      <div>
                        <div class="prismea-sidebar-text">Fuel</div>
                      </div>
                    </div>
                  </div>
                  <div class="prismea-vertical-spacing-20--slot">
                    <div class="prismea-horizontal-spacing-10 -middle prismea-color -color-category2-hover">
                      <div class="prismea-horizontal-spacing-10--slot"><i class="prismea-icon prismea-glyph-24_trip"></i></div>
                      <div>
                        <div class="prismea-sidebar-text">Restaurants</div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- category highlighted (suggestions and categories are hidden, search is active)-->
    <div class="prismea-card ion--expandable -ion--expanded" style="margin-bottom:30px;">
      <div class="prismea-card--title -color-grey3 -color-black-hover">
        <div class="prismea-horizontal-spacing-10 -middle">
          <div class="prismea-horizontal-spacing-15--slot"><i class="prismea-icon prismea-glyph-24_category-placeholder"></i>
          </div>
          <div class="prismea-horizontal-spacing-15--slot -expand">
            <p class="prismea-text">Add a tag
            </p>
          </div>
        </div>
        <div class="prismea-horizontal-spacing-10 -middle">
          <div class="prismea-card--title-caret"><i class="prismea-icon -x1 prismea-glyph-12_caret-down"></i>
          </div>
        </div>
      </div>
      <div class="prismea-card--body prismea-card-tag-selector">
        <div class="prismea-card--slot">
          <div class="prismea-vertical-spacing-10">
            <div class="prismea-card-tag-selector--scrollable-area">
              <!-- list of all suggested tags-->
              <div class="prismea-vertical-spacing-20">
                <div class="prismea-horizontal-spacing-10 -middle prismea-color -color-category2 prismea-card-tag-selector--list-item">
                  <div class="prismea-horizontal-spacing-10--slot"><i class="prismea-icon prismea-glyph-24_trip"></i></div>
                  <div class="prismea-horizontal-spacing-10--slot -expand">
                    <div class="prismea-sidebar-text">Business trip (user clicked on it)</div>
                  </div>
                  <div class="prismea-horizontal-spacing-10--slot"><i class="prismea-icon prismea-glyph-12_caret-up"></i></div>
                </div>
              </div>
            </div>
            <div class="prismea-card-tag-selector--search -shifted -active">
              <div class="prismea-card-tag-selector--search-container">
                <div class="prismea-vertical-spacing-20--slot">
                  <div class="prismea-color -color-grey3 prismea-sidebar-text -min">Search by tags</div>
                </div>
                <div class="prismea-vertical-spacing-20--slot">
                  <div class="prismea-horizontal-spacing-10 -middle">
                    <div class="prismea-horizontal-spacing-10--slot"><i class="prismea-icon prismea-glyph-16_search"></i></div>
                    <div class="prismea-horizontal-spacing-10--slot -expand">
                      <div class="prismea-input">
                        <div class="prismea-input--container -typed">
                          <input type="text" value="r"/>
                          <div class="prismea-input--actions">
                            <div class="prismea-input--actions-item"><i class="prismea-glyph-16_close"></i></div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
                <div class="prismea-vertical-spacing-20">
                  <div class="prismea-vertical-spacing-20--slot">
                    <div class="prismea-horizontal-spacing-10 -middle prismea-color -color-category2-hover">
                      <div class="prismea-horizontal-spacing-10--slot"><i class="prismea-icon prismea-glyph-24_trip"></i></div>
                      <div>
                        <div class="prismea-sidebar-text">Restaurants</div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- search is active (global search)-->
    <div class="prismea-card ion--expandable -ion--expanded" style="margin-bottom:30px;">
      <div class="prismea-card--title -color-grey3 -color-black-hover">
        <div class="prismea-horizontal-spacing-10 -middle">
          <div class="prismea-horizontal-spacing-15--slot"><i class="prismea-icon prismea-glyph-24_category-placeholder"></i>
          </div>
          <div class="prismea-horizontal-spacing-15--slot -expand">
            <p class="prismea-text">Add a tag
            </p>
          </div>
        </div>
        <div class="prismea-horizontal-spacing-10 -middle">
          <div class="prismea-card--title-caret"><i class="prismea-icon -x1 prismea-glyph-12_caret-down"></i>
          </div>
        </div>
      </div>
      <div class="prismea-card--body prismea-card-tag-selector">
        <div class="prismea-card--slot">
          <div class="prismea-vertical-spacing-10">
            <div class="prismea-card-tag-selector--scrollable-area">
              <!-- list of all suggested tags-->
              <div class="prismea-card-tag-selector--suggestions prismea-card-tag-selector--list-item">
                <div class="prismea-vertical-spacing-20--slot">
                  <div class="prismea-color -color-grey3 prismea-sidebar-text -min">Suggested tags</div>
                </div>
                <div class="prismea-vertical-spacing-20--slot">
                  <div class="prismea-horizontal-spacing-10 -middle prismea-color -color-category2-hover -all-children-hovered">
                    <div class="prismea-horizontal-spacing-10--slot"><i class="prismea-icon prismea-glyph-24_trip"></i></div>
                    <div>
                      <div class="prismea-sidebar-text -tag prismea-color -color-grey5">Business trip</div>
                      <div class="prismea-sidebar-text prismea-color">Hotels</div>
                    </div>
                  </div>
                </div>
                <div class="prismea-vertical-spacing-20--slot">
                  <div class="prismea-horizontal-spacing-10 -middle prismea-color -color-category2-hover -all-children-hovered">
                    <div class="prismea-horizontal-spacing-10--slot"><i class="prismea-icon prismea-glyph-24_trip"></i></div>
                    <div>
                      <div class="prismea-sidebar-text -tag prismea-color -color-grey5">Business trip</div>
                      <div class="prismea-sidebar-text prismea-color">Fuel</div>
                    </div>
                  </div>
                </div>
              </div>
              <div class="prismea-card-tag-selector--categories prismea-vertical-spacing-20--slot">
                <div class="prismea-card-tag-selector--list-item">
                  <div class="prismea-color -color-grey3 prismea-sidebar-text -min">Search by categories</div>
                </div>
                <div class="prismea-card-tag-selector--list-item ion-hoverable">
                  <div class="prismea-horizontal-spacing-10 -middle prismea-color -color-category3-hover">
                    <div class="prismea-horizontal-spacing-10--slot"><i class="prismea-icon prismea-glyph-24_management"></i></div>
                    <div class="prismea-horizontal-spacing-10--slot -expand">
                      <div class="prismea-sidebar-text">Administrative</div>
                    </div>
                    <div class="prismea-horizontal-spacing-10--slot"><i class="prismea-icon prismea-glyph-12_caret-down"></i></div>
                  </div>
                </div>
                <div class="prismea-card-tag-selector--list-item ion-hoverable">
                  <div class="prismea-horizontal-spacing-10 -middle prismea-color -color-category4-hover">
                    <div class="prismea-horizontal-spacing-10--slot"><i class="prismea-icon prismea-glyph-24_trip"></i></div>
                    <div class="prismea-horizontal-spacing-10--slot -expand">
                      <div class="prismea-sidebar-text">Business trip</div>
                    </div>
                    <div class="prismea-horizontal-spacing-10--slot"><i class="prismea-icon prismea-glyph-12_caret-down"></i></div>
                  </div>
                </div>
                <div class="prismea-card-tag-selector--list-item ion-hoverable">
                  <div class="prismea-horizontal-spacing-10 -middle prismea-color -color-category1-hover">
                    <div class="prismea-horizontal-spacing-10--slot"><i class="prismea-icon prismea-glyph-24_capital"></i></div>
                    <div class="prismea-horizontal-spacing-10--slot -expand">
                      <div class="prismea-sidebar-text">Capital</div>
                    </div>
                    <div class="prismea-horizontal-spacing-10--slot"><i class="prismea-icon prismea-glyph-12_caret-down"></i></div>
                  </div>
                </div>
                <div class="prismea-card-tag-selector--list-item ion-hoverable">
                  <div class="prismea-horizontal-spacing-10 -middle prismea-color -color-category2-hover">
                    <div class="prismea-horizontal-spacing-10--slot"><i class="prismea-icon prismea-glyph-24_commission"></i></div>
                    <div class="prismea-horizontal-spacing-10--slot -expand">
                      <div class="prismea-sidebar-text">Commissions</div>
                    </div>
                    <div class="prismea-horizontal-spacing-10--slot"><i class="prismea-icon prismea-glyph-12_caret-down"></i></div>
                  </div>
                </div>
                <div class="prismea-card-tag-selector--list-item ion-hoverable">
                  <div class="prismea-horizontal-spacing-10 -middle prismea-color -color-category2-hover">
                    <div class="prismea-horizontal-spacing-10--slot"><i class="prismea-icon prismea-glyph-24_collaborators-management"></i></div>
                    <div class="prismea-horizontal-spacing-10--slot -expand">
                      <div class="prismea-sidebar-text">Employee</div>
                    </div>
                    <div class="prismea-horizontal-spacing-10--slot"><i class="prismea-icon prismea-glyph-12_caret-down"></i></div>
                  </div>
                </div>
                <div class="prismea-card-tag-selector--list-item ion-hoverable">
                  <div class="prismea-horizontal-spacing-10 -middle prismea-color -color-category2-hover">
                    <div class="prismea-horizontal-spacing-10--slot"><i class="prismea-icon prismea-glyph-24_finance"></i></div>
                    <div class="prismea-horizontal-spacing-10--slot -expand">
                      <div class="prismea-sidebar-text">Finance</div>
                    </div>
                    <div class="prismea-horizontal-spacing-10--slot"><i class="prismea-icon prismea-glyph-12_caret-down"></i></div>
                  </div>
                </div>
              </div>
            </div>
            <div class="prismea-card-tag-selector--search -active">
              <div class="prismea-card-tag-selector--search-container">
                <div class="prismea-vertical-spacing-20--slot">
                  <div class="prismea-color -color-grey3 prismea-sidebar-text -min">Search by tags</div>
                </div>
                <div class="prismea-vertical-spacing-20--slot">
                  <div class="prismea-horizontal-spacing-10 -middle">
                    <div class="prismea-horizontal-spacing-10--slot"><i class="prismea-icon prismea-glyph-16_search"></i></div>
                    <div class="prismea-horizontal-spacing-10--slot -expand">
                      <div class="prismea-input">
                        <div class="prismea-input--container -typed">
                          <input type="text" value="r"/>
                          <div class="prismea-input--actions">
                            <div class="prismea-input--actions-item"><i class="prismea-glyph-16_close"></i></div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
                <div class="prismea-vertical-spacing-20">
                  <div class="prismea-vertical-spacing-20--slot">
                    <div class="prismea-horizontal-spacing-10 -middle prismea-color -color-category3-hover">
                      <div class="prismea-horizontal-spacing-10--slot"><i class="prismea-icon prismea-glyph-24_management"></i></div>
                      <div>
                        <div class="prismea-sidebar-text -tag">Administrative</div>
                        <div class="prismea-sidebar-text">Postal charges</div>
                      </div>
                    </div>
                  </div>
                  <div class="prismea-vertical-spacing-20--slot">
                    <div class="prismea-horizontal-spacing-10 -middle prismea-color -color-category2-hover">
                      <div class="prismea-horizontal-spacing-10--slot"><i class="prismea-icon prismea-glyph-24_trip"></i></div>
                      <div>
                        <div class="prismea-sidebar-text -tag">Business trip</div>
                        <div class="prismea-sidebar-text">Restaurants</div>
                      </div>
                    </div>
                  </div>
                  <div class="prismea-vertical-spacing-20--slot">
                    <div class="prismea-horizontal-spacing-10 -middle prismea-color -color-category4-hover">
                      <div class="prismea-horizontal-spacing-10--slot"><i class="prismea-icon prismea-glyph-24_finance"></i></div>
                      <div>
                        <div class="prismea-sidebar-text -tag">Finance</div>
                        <div class="prismea-sidebar-text">Term account</div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <!-- with selectedTag-->
  <div style="width: 305px; margin: 0 auto;">
    <!-- closed-->
    <div class="prismea-card ion--expandable" style="margin-bottom:30px;">
      <div class="prismea-card--title -category2 -color-light">
        <div class="prismea-horizontal-spacing-10 -middle">
          <div class="prismea-horizontal-spacing-15--slot"><i class="prismea-icon prismea-glyph-24_trip"></i>
          </div>
          <div class="prismea-horizontal-spacing-15--slot -expand">
            <p class="prismea-text">Restaurants
            </p>
          </div>
        </div>
        <div class="prismea-horizontal-spacing-10 -middle">
          <div class="prismea-card--title-caret"><i class="prismea-icon -x1 prismea-glyph-12_caret-down"></i>
          </div>
        </div>
      </div>
      <div class="prismea-card--body prismea-card-tag-selector">
        <div class="prismea-card--slot">
          <div class="prismea-vertical-spacing-10">
            <div class="prismea-card-tag-selector--scrollable-area">
              <!-- list of all suggested tags-->
              <div class="prismea-card-tag-selector--categories prismea-vertical-spacing-20--slot">
                <div class="prismea-card-tag-selector--list-item">
                  <div class="prismea-color -color-grey3 prismea-sidebar-text -min">Search by categories</div>
                </div>
                <div class="prismea-card-tag-selector--list-item ion-hoverable">
                  <div class="prismea-horizontal-spacing-10 -middle prismea-color -color-category3-hover">
                    <div class="prismea-horizontal-spacing-10--slot"><i class="prismea-icon prismea-glyph-24_management"></i></div>
                    <div class="prismea-horizontal-spacing-10--slot -expand">
                      <div class="prismea-sidebar-text">Administrative</div>
                    </div>
                    <div class="prismea-horizontal-spacing-10--slot"><i class="prismea-icon prismea-glyph-12_caret-down"></i></div>
                  </div>
                </div>
                <div class="prismea-card-tag-selector--list-item ion-hoverable">
                  <div class="prismea-horizontal-spacing-10 -middle prismea-color -color-category2">
                    <div class="prismea-horizontal-spacing-10--slot"><i class="prismea-icon prismea-glyph-24_trip"></i></div>
                    <div class="prismea-horizontal-spacing-10--slot -expand">
                      <div class="prismea-sidebar-text">Business trip</div>
                    </div>
                    <div class="prismea-horizontal-spacing-10--slot"><i class="prismea-icon prismea-glyph-12_caret-down"></i></div>
                  </div>
                </div>
                <div class="prismea-card-tag-selector--list-item ion-hoverable">
                  <div class="prismea-horizontal-spacing-10 -middle prismea-color -color-category1-hover">
                    <div class="prismea-horizontal-spacing-10--slot"><i class="prismea-icon prismea-glyph-24_capital"></i></div>
                    <div class="prismea-horizontal-spacing-10--slot -expand">
                      <div class="prismea-sidebar-text">Capital</div>
                    </div>
                    <div class="prismea-horizontal-spacing-10--slot"><i class="prismea-icon prismea-glyph-12_caret-down"></i></div>
                  </div>
                </div>
                <div class="prismea-card-tag-selector--list-item ion-hoverable">
                  <div class="prismea-horizontal-spacing-10 -middle prismea-color -color-category2-hover">
                    <div class="prismea-horizontal-spacing-10--slot"><i class="prismea-icon prismea-glyph-24_commission"></i></div>
                    <div class="prismea-horizontal-spacing-10--slot -expand">
                      <div class="prismea-sidebar-text">Commissions</div>
                    </div>
                    <div class="prismea-horizontal-spacing-10--slot"><i class="prismea-icon prismea-glyph-12_caret-down"></i></div>
                  </div>
                </div>
                <div class="prismea-card-tag-selector--list-item ion-hoverable">
                  <div class="prismea-horizontal-spacing-10 -middle prismea-color -color-category2-hover">
                    <div class="prismea-horizontal-spacing-10--slot"><i class="prismea-icon prismea-glyph-24_collaborators-management"></i></div>
                    <div class="prismea-horizontal-spacing-10--slot -expand">
                      <div class="prismea-sidebar-text">Employee</div>
                    </div>
                    <div class="prismea-horizontal-spacing-10--slot"><i class="prismea-icon prismea-glyph-12_caret-down"></i></div>
                  </div>
                </div>
                <div class="prismea-card-tag-selector--list-item ion-hoverable">
                  <div class="prismea-horizontal-spacing-10 -middle prismea-color -color-category2-hover">
                    <div class="prismea-horizontal-spacing-10--slot"><i class="prismea-icon prismea-glyph-24_finance"></i></div>
                    <div class="prismea-horizontal-spacing-10--slot -expand">
                      <div class="prismea-sidebar-text">Finance</div>
                    </div>
                    <div class="prismea-horizontal-spacing-10--slot"><i class="prismea-icon prismea-glyph-12_caret-down"></i></div>
                  </div>
                </div>
              </div>
            </div>
            <div class="prismea-card-tag-selector--search">
              <div class="prismea-card-tag-selector--search-container">
                <div class="prismea-vertical-spacing-20--slot">
                  <div class="prismea-color -color-grey3 prismea-sidebar-text -min">Search by tags</div>
                </div>
                <div class="prismea-vertical-spacing-20--slot">
                  <div class="prismea-horizontal-spacing-10 -middle">
                    <div class="prismea-horizontal-spacing-10--slot"><i class="prismea-icon prismea-glyph-16_search"></i></div>
                    <div class="prismea-horizontal-spacing-10--slot -expand">
                      <div class="prismea-input">
                        <div class="prismea-input--container">
                          <input type="text" value=""/>
                          <div class="prismea-input--actions">
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
                <div class="prismea-vertical-spacing-20">
                  <div class="prismea-vertical-spacing-20--slot">
                    <div class="prismea-horizontal-spacing-10 -middle prismea-color -color-category2-hover">
                      <div class="prismea-horizontal-spacing-10--slot"><i class="prismea-icon prismea-glyph-24_trip"></i></div>
                      <div>
                        <div class="prismea-sidebar-text -tag">Business trip</div>
                        <div class="prismea-sidebar-text">Fuel</div>
                      </div>
                    </div>
                  </div>
                  <div class="prismea-vertical-spacing-20--slot">
                    <div class="prismea-horizontal-spacing-10 -middle prismea-color -color-category3-hover">
                      <div class="prismea-horizontal-spacing-10--slot"><i class="prismea-icon prismea-glyph-24_management"></i></div>
                      <div>
                        <div class="prismea-sidebar-text -tag">Administrative</div>
                        <div class="prismea-sidebar-text">Postal charges</div>
                      </div>
                    </div>
                  </div>
                  <div class="prismea-vertical-spacing-20--slot">
                    <div class="prismea-horizontal-spacing-10 -middle prismea-color -color-category2">
                      <div class="prismea-horizontal-spacing-10--slot"><i class="prismea-icon prismea-glyph-24_trip"></i></div>
                      <div>
                        <div class="prismea-sidebar-text -tag">Business trip</div>
                        <div class="prismea-sidebar-text">Restaurants</div>
                      </div>
                    </div>
                  </div>
                  <div class="prismea-vertical-spacing-20--slot">
                    <div class="prismea-horizontal-spacing-10 -middle prismea-color -color-category4-hover">
                      <div class="prismea-horizontal-spacing-10--slot"><i class="prismea-icon prismea-glyph-24_finance"></i></div>
                      <div>
                        <div class="prismea-sidebar-text -tag">Finance</div>
                        <div class="prismea-sidebar-text">Term account</div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- expanded-->
    <div class="prismea-card ion--expandable -ion--expanded" style="margin-bottom:30px;">
      <div class="prismea-card--title -category2 -color-light">
        <div class="prismea-horizontal-spacing-10 -middle">
          <div class="prismea-horizontal-spacing-15--slot"><i class="prismea-icon prismea-glyph-24_trip"></i>
          </div>
          <div class="prismea-horizontal-spacing-15--slot -expand">
            <p class="prismea-text">Restaurants
            </p>
          </div>
        </div>
        <div class="prismea-horizontal-spacing-10 -middle">
          <div class="prismea-card--title-caret"><i class="prismea-icon -x1 prismea-glyph-12_caret-down"></i>
          </div>
        </div>
      </div>
      <div class="prismea-card--body prismea-card-tag-selector">
        <div class="prismea-card--slot">
          <div class="prismea-vertical-spacing-10">
            <div class="prismea-card-tag-selector--scrollable-area">
              <!-- list of all suggested tags-->
              <div class="prismea-card-tag-selector--categories prismea-vertical-spacing-20--slot">
                <div class="prismea-card-tag-selector--list-item">
                  <div class="prismea-color -color-grey3 prismea-sidebar-text -min">Search by categories</div>
                </div>
                <div class="prismea-card-tag-selector--list-item ion-hoverable">
                  <div class="prismea-horizontal-spacing-10 -middle prismea-color -color-category3-hover">
                    <div class="prismea-horizontal-spacing-10--slot"><i class="prismea-icon prismea-glyph-24_management"></i></div>
                    <div class="prismea-horizontal-spacing-10--slot -expand">
                      <div class="prismea-sidebar-text">Administrative</div>
                    </div>
                    <div class="prismea-horizontal-spacing-10--slot"><i class="prismea-icon prismea-glyph-12_caret-down"></i></div>
                  </div>
                </div>
                <div class="prismea-card-tag-selector--list-item ion-hoverable">
                  <div class="prismea-horizontal-spacing-10 -middle prismea-color -color-category2">
                    <div class="prismea-horizontal-spacing-10--slot"><i class="prismea-icon prismea-glyph-24_trip"></i></div>
                    <div class="prismea-horizontal-spacing-10--slot -expand">
                      <div class="prismea-sidebar-text">Business trip</div>
                    </div>
                    <div class="prismea-horizontal-spacing-10--slot"><i class="prismea-icon prismea-glyph-12_caret-down"></i></div>
                  </div>
                </div>
                <div class="prismea-card-tag-selector--list-item ion-hoverable">
                  <div class="prismea-horizontal-spacing-10 -middle prismea-color -color-category1-hover">
                    <div class="prismea-horizontal-spacing-10--slot"><i class="prismea-icon prismea-glyph-24_capital"></i></div>
                    <div class="prismea-horizontal-spacing-10--slot -expand">
                      <div class="prismea-sidebar-text">Capital</div>
                    </div>
                    <div class="prismea-horizontal-spacing-10--slot"><i class="prismea-icon prismea-glyph-12_caret-down"></i></div>
                  </div>
                </div>
                <div class="prismea-card-tag-selector--list-item ion-hoverable">
                  <div class="prismea-horizontal-spacing-10 -middle prismea-color -color-category2-hover">
                    <div class="prismea-horizontal-spacing-10--slot"><i class="prismea-icon prismea-glyph-24_commission"></i></div>
                    <div class="prismea-horizontal-spacing-10--slot -expand">
                      <div class="prismea-sidebar-text">Commissions</div>
                    </div>
                    <div class="prismea-horizontal-spacing-10--slot"><i class="prismea-icon prismea-glyph-12_caret-down"></i></div>
                  </div>
                </div>
                <div class="prismea-card-tag-selector--list-item ion-hoverable">
                  <div class="prismea-horizontal-spacing-10 -middle prismea-color -color-category2-hover">
                    <div class="prismea-horizontal-spacing-10--slot"><i class="prismea-icon prismea-glyph-24_collaborators-management"></i></div>
                    <div class="prismea-horizontal-spacing-10--slot -expand">
                      <div class="prismea-sidebar-text">Employee</div>
                    </div>
                    <div class="prismea-horizontal-spacing-10--slot"><i class="prismea-icon prismea-glyph-12_caret-down"></i></div>
                  </div>
                </div>
                <div class="prismea-card-tag-selector--list-item ion-hoverable">
                  <div class="prismea-horizontal-spacing-10 -middle prismea-color -color-category2-hover">
                    <div class="prismea-horizontal-spacing-10--slot"><i class="prismea-icon prismea-glyph-24_finance"></i></div>
                    <div class="prismea-horizontal-spacing-10--slot -expand">
                      <div class="prismea-sidebar-text">Finance</div>
                    </div>
                    <div class="prismea-horizontal-spacing-10--slot"><i class="prismea-icon prismea-glyph-12_caret-down"></i></div>
                  </div>
                </div>
              </div>
            </div>
            <div class="prismea-card-tag-selector--search">
              <div class="prismea-card-tag-selector--search-container">
                <div class="prismea-vertical-spacing-20--slot">
                  <div class="prismea-color -color-grey3 prismea-sidebar-text -min">Search by tags</div>
                </div>
                <div class="prismea-vertical-spacing-20--slot">
                  <div class="prismea-horizontal-spacing-10 -middle">
                    <div class="prismea-horizontal-spacing-10--slot"><i class="prismea-icon prismea-glyph-16_search"></i></div>
                    <div class="prismea-horizontal-spacing-10--slot -expand">
                      <div class="prismea-input">
                        <div class="prismea-input--container">
                          <input type="text" value=""/>
                          <div class="prismea-input--actions">
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
                <div class="prismea-vertical-spacing-20">
                  <div class="prismea-vertical-spacing-20--slot">
                    <div class="prismea-horizontal-spacing-10 -middle prismea-color -color-category2-hover">
                      <div class="prismea-horizontal-spacing-10--slot"><i class="prismea-icon prismea-glyph-24_trip"></i></div>
                      <div>
                        <div class="prismea-sidebar-text -tag">Business trip</div>
                        <div class="prismea-sidebar-text">Fuel</div>
                      </div>
                    </div>
                  </div>
                  <div class="prismea-vertical-spacing-20--slot">
                    <div class="prismea-horizontal-spacing-10 -middle prismea-color -color-category3-hover">
                      <div class="prismea-horizontal-spacing-10--slot"><i class="prismea-icon prismea-glyph-24_management"></i></div>
                      <div>
                        <div class="prismea-sidebar-text -tag">Administrative</div>
                        <div class="prismea-sidebar-text">Postal charges</div>
                      </div>
                    </div>
                  </div>
                  <div class="prismea-vertical-spacing-20--slot">
                    <div class="prismea-horizontal-spacing-10 -middle prismea-color -color-category2">
                      <div class="prismea-horizontal-spacing-10--slot"><i class="prismea-icon prismea-glyph-24_trip"></i></div>
                      <div>
                        <div class="prismea-sidebar-text -tag">Business trip</div>
                        <div class="prismea-sidebar-text">Restaurants</div>
                      </div>
                    </div>
                  </div>
                  <div class="prismea-vertical-spacing-20--slot">
                    <div class="prismea-horizontal-spacing-10 -middle prismea-color -color-category4-hover">
                      <div class="prismea-horizontal-spacing-10--slot"><i class="prismea-icon prismea-glyph-24_finance"></i></div>
                      <div>
                        <div class="prismea-sidebar-text -tag">Finance</div>
                        <div class="prismea-sidebar-text">Term account</div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- category highlighted (suggestions and categories are hidden, search is NOT active)-->
    <div class="prismea-card ion--expandable -ion--expanded" style="margin-bottom:30px;">
      <div class="prismea-card--title -category2 -color-light">
        <div class="prismea-horizontal-spacing-10 -middle">
          <div class="prismea-horizontal-spacing-15--slot"><i class="prismea-icon prismea-glyph-24_trip"></i>
          </div>
          <div class="prismea-horizontal-spacing-15--slot -expand">
            <p class="prismea-text">Restaurants
            </p>
          </div>
        </div>
        <div class="prismea-horizontal-spacing-10 -middle">
          <div class="prismea-card--title-caret"><i class="prismea-icon -x1 prismea-glyph-12_caret-down"></i>
          </div>
        </div>
      </div>
      <div class="prismea-card--body prismea-card-tag-selector">
        <div class="prismea-card--slot">
          <div class="prismea-vertical-spacing-10">
            <div class="prismea-card-tag-selector--scrollable-area">
              <!-- list of all suggested tags-->
              <div class="prismea-vertical-spacing-20">
                <div class="prismea-horizontal-spacing-10 -middle prismea-color -color-category2 prismea-card-tag-selector--list-item">
                  <div class="prismea-horizontal-spacing-10--slot"><i class="prismea-icon prismea-glyph-24_trip"></i></div>
                  <div class="prismea-horizontal-spacing-10--slot -expand">
                    <div class="prismea-sidebar-text">Business trip (user clicked on it)</div>
                  </div>
                  <div class="prismea-horizontal-spacing-10--slot"><i class="prismea-icon prismea-glyph-12_caret-up"></i></div>
                </div>
              </div>
            </div>
            <div class="prismea-card-tag-selector--search -shifted -active">
              <div class="prismea-card-tag-selector--search-container">
                <div class="prismea-vertical-spacing-20--slot">
                  <div class="prismea-color -color-grey3 prismea-sidebar-text -min">Search by tags</div>
                </div>
                <div class="prismea-vertical-spacing-20--slot">
                  <div class="prismea-horizontal-spacing-10 -middle">
                    <div class="prismea-horizontal-spacing-10--slot"><i class="prismea-icon prismea-glyph-16_search"></i></div>
                    <div class="prismea-horizontal-spacing-10--slot -expand">
                      <div class="prismea-input">
                        <div class="prismea-input--container">
                          <input type="text" value=""/>
                          <div class="prismea-input--actions">
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
                <div class="prismea-vertical-spacing-20">
                  <div class="prismea-vertical-spacing-20--slot">
                    <div class="prismea-horizontal-spacing-10 -middle prismea-color -color-category2-hover">
                      <div class="prismea-horizontal-spacing-10--slot"><i class="prismea-icon prismea-glyph-24_trip"></i></div>
                      <div>
                        <div class="prismea-sidebar-text">Fuel</div>
                      </div>
                    </div>
                  </div>
                  <div class="prismea-vertical-spacing-20--slot">
                    <div class="prismea-horizontal-spacing-10 -middle prismea-color -color-category2">
                      <div class="prismea-horizontal-spacing-10--slot"><i class="prismea-icon prismea-glyph-24_trip"></i></div>
                      <div>
                        <div class="prismea-sidebar-text">Restaurants</div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- category highlighted (suggestions and categories are hidden, search is active)-->
    <div class="prismea-card ion--expandable -ion--expanded" style="margin-bottom:30px;">
      <div class="prismea-card--title -category2 -color-light">
        <div class="prismea-horizontal-spacing-10 -middle">
          <div class="prismea-horizontal-spacing-15--slot"><i class="prismea-icon prismea-glyph-24_trip"></i>
          </div>
          <div class="prismea-horizontal-spacing-15--slot -expand">
            <p class="prismea-text">Restaurants
            </p>
          </div>
        </div>
        <div class="prismea-horizontal-spacing-10 -middle">
          <div class="prismea-card--title-caret"><i class="prismea-icon -x1 prismea-glyph-12_caret-down"></i>
          </div>
        </div>
      </div>
      <div class="prismea-card--body prismea-card-tag-selector">
        <div class="prismea-card--slot">
          <div class="prismea-vertical-spacing-10">
            <div class="prismea-card-tag-selector--scrollable-area">
              <!-- list of all suggested tags-->
              <div class="prismea-vertical-spacing-20">
                <div class="prismea-horizontal-spacing-10 -middle prismea-color -color-category2 prismea-card-tag-selector--list-item">
                  <div class="prismea-horizontal-spacing-10--slot"><i class="prismea-icon prismea-glyph-24_trip"></i></div>
                  <div class="prismea-horizontal-spacing-10--slot -expand">
                    <div class="prismea-sidebar-text">Business trip (user clicked on it)</div>
                  </div>
                  <div class="prismea-horizontal-spacing-10--slot"><i class="prismea-icon prismea-glyph-12_caret-up"></i></div>
                </div>
              </div>
            </div>
            <div class="prismea-card-tag-selector--search -shifted -active">
              <div class="prismea-card-tag-selector--search-container">
                <div class="prismea-vertical-spacing-20--slot">
                  <div class="prismea-color -color-grey3 prismea-sidebar-text -min">Search by tags</div>
                </div>
                <div class="prismea-vertical-spacing-20--slot">
                  <div class="prismea-horizontal-spacing-10 -middle">
                    <div class="prismea-horizontal-spacing-10--slot"><i class="prismea-icon prismea-glyph-16_search"></i></div>
                    <div class="prismea-horizontal-spacing-10--slot -expand">
                      <div class="prismea-input">
                        <div class="prismea-input--container -typed">
                          <input type="text" value="r"/>
                          <div class="prismea-input--actions">
                            <div class="prismea-input--actions-item"><i class="prismea-glyph-16_close"></i></div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
                <div class="prismea-vertical-spacing-20">
                  <div class="prismea-vertical-spacing-20--slot">
                    <div class="prismea-horizontal-spacing-10 -middle prismea-color -color-category2">
                      <div class="prismea-horizontal-spacing-10--slot"><i class="prismea-icon prismea-glyph-24_trip"></i></div>
                      <div>
                        <div class="prismea-sidebar-text">Restaurants</div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- search is active (global search)-->
    <div class="prismea-card ion--expandable -ion--expanded" style="margin-bottom:30px;">
      <div class="prismea-card--title -category2 -color-light">
        <div class="prismea-horizontal-spacing-10 -middle">
          <div class="prismea-horizontal-spacing-15--slot"><i class="prismea-icon prismea-glyph-24_trip"></i>
          </div>
          <div class="prismea-horizontal-spacing-15--slot -expand">
            <p class="prismea-text">Restaurants
            </p>
          </div>
        </div>
        <div class="prismea-horizontal-spacing-10 -middle">
          <div class="prismea-card--title-caret"><i class="prismea-icon -x1 prismea-glyph-12_caret-down"></i>
          </div>
        </div>
      </div>
      <div class="prismea-card--body prismea-card-tag-selector">
        <div class="prismea-card--slot">
          <div class="prismea-vertical-spacing-10">
            <div class="prismea-card-tag-selector--scrollable-area">
              <!-- list of all suggested tags-->
              <div class="prismea-card-tag-selector--categories prismea-vertical-spacing-20--slot">
                <div class="prismea-card-tag-selector--list-item">
                  <div class="prismea-color -color-grey3 prismea-sidebar-text -min">Search by categories</div>
                </div>
                <div class="prismea-card-tag-selector--list-item ion-hoverable">
                  <div class="prismea-horizontal-spacing-10 -middle prismea-color -color-category3-hover">
                    <div class="prismea-horizontal-spacing-10--slot"><i class="prismea-icon prismea-glyph-24_management"></i></div>
                    <div class="prismea-horizontal-spacing-10--slot -expand">
                      <div class="prismea-sidebar-text">Administrative</div>
                    </div>
                    <div class="prismea-horizontal-spacing-10--slot"><i class="prismea-icon prismea-glyph-12_caret-down"></i></div>
                  </div>
                </div>
                <div class="prismea-card-tag-selector--list-item ion-hoverable">
                  <div class="prismea-horizontal-spacing-10 -middle prismea-color -color-category2">
                    <div class="prismea-horizontal-spacing-10--slot"><i class="prismea-icon prismea-glyph-24_trip"></i></div>
                    <div class="prismea-horizontal-spacing-10--slot -expand">
                      <div class="prismea-sidebar-text">Business trip</div>
                    </div>
                    <div class="prismea-horizontal-spacing-10--slot"><i class="prismea-icon prismea-glyph-12_caret-down"></i></div>
                  </div>
                </div>
                <div class="prismea-card-tag-selector--list-item ion-hoverable">
                  <div class="prismea-horizontal-spacing-10 -middle prismea-color -color-category1-hover">
                    <div class="prismea-horizontal-spacing-10--slot"><i class="prismea-icon prismea-glyph-24_capital"></i></div>
                    <div class="prismea-horizontal-spacing-10--slot -expand">
                      <div class="prismea-sidebar-text">Capital</div>
                    </div>
                    <div class="prismea-horizontal-spacing-10--slot"><i class="prismea-icon prismea-glyph-12_caret-down"></i></div>
                  </div>
                </div>
                <div class="prismea-card-tag-selector--list-item ion-hoverable">
                  <div class="prismea-horizontal-spacing-10 -middle prismea-color -color-category2-hover">
                    <div class="prismea-horizontal-spacing-10--slot"><i class="prismea-icon prismea-glyph-24_commission"></i></div>
                    <div class="prismea-horizontal-spacing-10--slot -expand">
                      <div class="prismea-sidebar-text">Commissions</div>
                    </div>
                    <div class="prismea-horizontal-spacing-10--slot"><i class="prismea-icon prismea-glyph-12_caret-down"></i></div>
                  </div>
                </div>
                <div class="prismea-card-tag-selector--list-item ion-hoverable">
                  <div class="prismea-horizontal-spacing-10 -middle prismea-color -color-category2-hover">
                    <div class="prismea-horizontal-spacing-10--slot"><i class="prismea-icon prismea-glyph-24_collaborators-management"></i></div>
                    <div class="prismea-horizontal-spacing-10--slot -expand">
                      <div class="prismea-sidebar-text">Employee</div>
                    </div>
                    <div class="prismea-horizontal-spacing-10--slot"><i class="prismea-icon prismea-glyph-12_caret-down"></i></div>
                  </div>
                </div>
                <div class="prismea-card-tag-selector--list-item ion-hoverable">
                  <div class="prismea-horizontal-spacing-10 -middle prismea-color -color-category2-hover">
                    <div class="prismea-horizontal-spacing-10--slot"><i class="prismea-icon prismea-glyph-24_finance"></i></div>
                    <div class="prismea-horizontal-spacing-10--slot -expand">
                      <div class="prismea-sidebar-text">Finance</div>
                    </div>
                    <div class="prismea-horizontal-spacing-10--slot"><i class="prismea-icon prismea-glyph-12_caret-down"></i></div>
                  </div>
                </div>
              </div>
            </div>
            <div class="prismea-card-tag-selector--search -active">
              <div class="prismea-card-tag-selector--search-container">
                <div class="prismea-vertical-spacing-20--slot">
                  <div class="prismea-color -color-grey3 prismea-sidebar-text -min">Search by tags</div>
                </div>
                <div class="prismea-vertical-spacing-20--slot">
                  <div class="prismea-horizontal-spacing-10 -middle">
                    <div class="prismea-horizontal-spacing-10--slot"><i class="prismea-icon prismea-glyph-16_search"></i></div>
                    <div class="prismea-horizontal-spacing-10--slot -expand">
                      <div class="prismea-input">
                        <div class="prismea-input--container -typed">
                          <input type="text" value="r"/>
                          <div class="prismea-input--actions">
                            <div class="prismea-input--actions-item"><i class="prismea-glyph-16_close"></i></div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
                <div class="prismea-vertical-spacing-20">
                  <div class="prismea-vertical-spacing-20--slot">
                    <div class="prismea-horizontal-spacing-10 -middle prismea-color -color-category3-hover">
                      <div class="prismea-horizontal-spacing-10--slot"><i class="prismea-icon prismea-glyph-24_management"></i></div>
                      <div>
                        <div class="prismea-sidebar-text -tag">Administrative</div>
                        <div class="prismea-sidebar-text">Postal charges</div>
                      </div>
                    </div>
                  </div>
                  <div class="prismea-vertical-spacing-20--slot">
                    <div class="prismea-horizontal-spacing-10 -middle prismea-color -color-category2">
                      <div class="prismea-horizontal-spacing-10--slot"><i class="prismea-icon prismea-glyph-24_trip"></i></div>
                      <div>
                        <div class="prismea-sidebar-text -tag">Business trip</div>
                        <div class="prismea-sidebar-text">Restaurants</div>
                      </div>
                    </div>
                  </div>
                  <div class="prismea-vertical-spacing-20--slot">
                    <div class="prismea-horizontal-spacing-10 -middle prismea-color -color-category4-hover">
                      <div class="prismea-horizontal-spacing-10--slot"><i class="prismea-icon prismea-glyph-24_finance"></i></div>
                      <div>
                        <div class="prismea-sidebar-text -tag">Finance</div>
                        <div class="prismea-sidebar-text">Term account</div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
div(style='display:flex;')
  //  without selectedTag
  div(style='width: 305px; margin: 0 auto;')
    //  closed
    .prismea-card.ion--expandable(style='margin-bottom:30px;')
      .prismea-card--title.-color-grey3.-color-black-hover
        .prismea-horizontal-spacing-10.-middle
          .prismea-horizontal-spacing-15--slot
            i.prismea-icon.prismea-glyph-24_category-placeholder
          .prismea-horizontal-spacing-15--slot.-expand
            p.prismea-text.
              Add a tag
              
        .prismea-horizontal-spacing-10.-middle
          .prismea-card--title-caret
            i.prismea-icon.-x1.prismea-glyph-12_caret-down
      .prismea-card--body.prismea-card-tag-selector
        .prismea-card--slot
          .prismea-vertical-spacing-10
            .prismea-card-tag-selector--scrollable-area
              //  list of all suggested tags
              .prismea-card-tag-selector--suggestions.prismea-card-tag-selector--list-item
                .prismea-vertical-spacing-20--slot
                  .prismea-color.-color-grey3.prismea-sidebar-text.-min Suggested tags
                .prismea-vertical-spacing-20--slot
                  .prismea-horizontal-spacing-10.-middle.prismea-color.-color-category2-hover.-all-children-hovered
                    .prismea-horizontal-spacing-10--slot
                      i.prismea-icon.prismea-glyph-24_trip
                    div
                      .prismea-sidebar-text.-tag.prismea-color.-color-grey5 Business trip
                      .prismea-sidebar-text.prismea-color Hotels
                .prismea-vertical-spacing-20--slot
                  .prismea-horizontal-spacing-10.-middle.prismea-color.-color-category2-hover.-all-children-hovered
                    .prismea-horizontal-spacing-10--slot
                      i.prismea-icon.prismea-glyph-24_trip
                    div
                      .prismea-sidebar-text.-tag.prismea-color.-color-grey5 Business trip
                      .prismea-sidebar-text.prismea-color Fuel
              .prismea-card-tag-selector--categories.prismea-vertical-spacing-20--slot
                .prismea-card-tag-selector--list-item
                  .prismea-color.-color-grey3.prismea-sidebar-text.-min Search by categories
                .prismea-card-tag-selector--list-item.ion-hoverable
                  .prismea-horizontal-spacing-10.-middle.prismea-color.-color-category3-hover
                    .prismea-horizontal-spacing-10--slot
                      i.prismea-icon.prismea-glyph-24_management
                    .prismea-horizontal-spacing-10--slot.-expand
                      .prismea-sidebar-text Administrative
                    .prismea-horizontal-spacing-10--slot
                      i.prismea-icon.prismea-glyph-12_caret-down
                .prismea-card-tag-selector--list-item.ion-hoverable
                  .prismea-horizontal-spacing-10.-middle.prismea-color.-color-category4-hover
                    .prismea-horizontal-spacing-10--slot
                      i.prismea-icon.prismea-glyph-24_trip
                    .prismea-horizontal-spacing-10--slot.-expand
                      .prismea-sidebar-text Business trip
                    .prismea-horizontal-spacing-10--slot
                      i.prismea-icon.prismea-glyph-12_caret-down
                .prismea-card-tag-selector--list-item.ion-hoverable
                  .prismea-horizontal-spacing-10.-middle.prismea-color.-color-category1-hover
                    .prismea-horizontal-spacing-10--slot
                      i.prismea-icon.prismea-glyph-24_capital
                    .prismea-horizontal-spacing-10--slot.-expand
                      .prismea-sidebar-text Capital
                    .prismea-horizontal-spacing-10--slot
                      i.prismea-icon.prismea-glyph-12_caret-down
                .prismea-card-tag-selector--list-item.ion-hoverable
                  .prismea-horizontal-spacing-10.-middle.prismea-color.-color-category2-hover
                    .prismea-horizontal-spacing-10--slot
                      i.prismea-icon.prismea-glyph-24_commission
                    .prismea-horizontal-spacing-10--slot.-expand
                      .prismea-sidebar-text Commissions
                    .prismea-horizontal-spacing-10--slot
                      i.prismea-icon.prismea-glyph-12_caret-down
                .prismea-card-tag-selector--list-item.ion-hoverable
                  .prismea-horizontal-spacing-10.-middle.prismea-color.-color-category2-hover
                    .prismea-horizontal-spacing-10--slot
                      i.prismea-icon.prismea-glyph-24_collaborators-management
                    .prismea-horizontal-spacing-10--slot.-expand
                      .prismea-sidebar-text Employee
                    .prismea-horizontal-spacing-10--slot
                      i.prismea-icon.prismea-glyph-12_caret-down
                .prismea-card-tag-selector--list-item.ion-hoverable
                  .prismea-horizontal-spacing-10.-middle.prismea-color.-color-category2-hover
                    .prismea-horizontal-spacing-10--slot
                      i.prismea-icon.prismea-glyph-24_finance
                    .prismea-horizontal-spacing-10--slot.-expand
                      .prismea-sidebar-text Finance
                    .prismea-horizontal-spacing-10--slot
                      i.prismea-icon.prismea-glyph-12_caret-down
            .prismea-card-tag-selector--search
              .prismea-card-tag-selector--search-container
                .prismea-vertical-spacing-20--slot
                  .prismea-color.-color-grey3.prismea-sidebar-text.-min Search by tags
                .prismea-vertical-spacing-20--slot
                  .prismea-horizontal-spacing-10.-middle
                    .prismea-horizontal-spacing-10--slot
                      i.prismea-icon.prismea-glyph-16_search
                    .prismea-horizontal-spacing-10--slot.-expand
                      .prismea-input
                        .prismea-input--container
                          input(type='text')
                          .prismea-input--actions.
                            
                            
                .prismea-vertical-spacing-20
                  .prismea-vertical-spacing-20--slot
                    .prismea-horizontal-spacing-10.-middle.prismea-color.-color-category2-hover
                      .prismea-horizontal-spacing-10--slot
                        i.prismea-icon.prismea-glyph-24_trip
                      div
                        .prismea-sidebar-text.-tag Business trip
                        .prismea-sidebar-text Fuel
                  .prismea-vertical-spacing-20--slot
                    .prismea-horizontal-spacing-10.-middle.prismea-color.-color-category3-hover
                      .prismea-horizontal-spacing-10--slot
                        i.prismea-icon.prismea-glyph-24_management
                      div
                        .prismea-sidebar-text.-tag Administrative
                        .prismea-sidebar-text Postal charges
                  .prismea-vertical-spacing-20--slot
                    .prismea-horizontal-spacing-10.-middle.prismea-color.-color-category2-hover
                      .prismea-horizontal-spacing-10--slot
                        i.prismea-icon.prismea-glyph-24_trip
                      div
                        .prismea-sidebar-text.-tag Business trip
                        .prismea-sidebar-text Restaurants
                  .prismea-vertical-spacing-20--slot
                    .prismea-horizontal-spacing-10.-middle.prismea-color.-color-category4-hover
                      .prismea-horizontal-spacing-10--slot
                        i.prismea-icon.prismea-glyph-24_finance
                      div
                        .prismea-sidebar-text.-tag Finance
                        .prismea-sidebar-text Term account
    //  expanded
    .prismea-card.ion--expandable.-ion--expanded(style='margin-bottom:30px;')
      .prismea-card--title.-color-grey3.-color-black-hover
        .prismea-horizontal-spacing-10.-middle
          .prismea-horizontal-spacing-15--slot
            i.prismea-icon.prismea-glyph-24_category-placeholder
          .prismea-horizontal-spacing-15--slot.-expand
            p.prismea-text.
              Add a tag
              
        .prismea-horizontal-spacing-10.-middle
          .prismea-card--title-caret
            i.prismea-icon.-x1.prismea-glyph-12_caret-down
      .prismea-card--body.prismea-card-tag-selector
        .prismea-card--slot
          .prismea-vertical-spacing-10
            .prismea-card-tag-selector--scrollable-area
              //  list of all suggested tags
              .prismea-card-tag-selector--suggestions.prismea-card-tag-selector--list-item
                .prismea-vertical-spacing-20--slot
                  .prismea-color.-color-grey3.prismea-sidebar-text.-min Suggested tags
                .prismea-vertical-spacing-20--slot
                  .prismea-horizontal-spacing-10.-middle.prismea-color.-color-category2-hover.-all-children-hovered
                    .prismea-horizontal-spacing-10--slot
                      i.prismea-icon.prismea-glyph-24_trip
                    div
                      .prismea-sidebar-text.-tag.prismea-color.-color-grey5 Business trip
                      .prismea-sidebar-text.prismea-color Hotels
                .prismea-vertical-spacing-20--slot
                  .prismea-horizontal-spacing-10.-middle.prismea-color.-color-category2-hover.-all-children-hovered
                    .prismea-horizontal-spacing-10--slot
                      i.prismea-icon.prismea-glyph-24_trip
                    div
                      .prismea-sidebar-text.-tag.prismea-color.-color-grey5 Business trip
                      .prismea-sidebar-text.prismea-color Fuel
              .prismea-card-tag-selector--categories.prismea-vertical-spacing-20--slot
                .prismea-card-tag-selector--list-item
                  .prismea-color.-color-grey3.prismea-sidebar-text.-min Search by categories
                .prismea-card-tag-selector--list-item.ion-hoverable
                  .prismea-horizontal-spacing-10.-middle.prismea-color.-color-category3-hover
                    .prismea-horizontal-spacing-10--slot
                      i.prismea-icon.prismea-glyph-24_management
                    .prismea-horizontal-spacing-10--slot.-expand
                      .prismea-sidebar-text Administrative
                    .prismea-horizontal-spacing-10--slot
                      i.prismea-icon.prismea-glyph-12_caret-down
                .prismea-card-tag-selector--list-item.ion-hoverable
                  .prismea-horizontal-spacing-10.-middle.prismea-color.-color-category4-hover
                    .prismea-horizontal-spacing-10--slot
                      i.prismea-icon.prismea-glyph-24_trip
                    .prismea-horizontal-spacing-10--slot.-expand
                      .prismea-sidebar-text Business trip
                    .prismea-horizontal-spacing-10--slot
                      i.prismea-icon.prismea-glyph-12_caret-down
                .prismea-card-tag-selector--list-item.ion-hoverable
                  .prismea-horizontal-spacing-10.-middle.prismea-color.-color-category1-hover
                    .prismea-horizontal-spacing-10--slot
                      i.prismea-icon.prismea-glyph-24_capital
                    .prismea-horizontal-spacing-10--slot.-expand
                      .prismea-sidebar-text Capital
                    .prismea-horizontal-spacing-10--slot
                      i.prismea-icon.prismea-glyph-12_caret-down
                .prismea-card-tag-selector--list-item.ion-hoverable
                  .prismea-horizontal-spacing-10.-middle.prismea-color.-color-category2-hover
                    .prismea-horizontal-spacing-10--slot
                      i.prismea-icon.prismea-glyph-24_commission
                    .prismea-horizontal-spacing-10--slot.-expand
                      .prismea-sidebar-text Commissions
                    .prismea-horizontal-spacing-10--slot
                      i.prismea-icon.prismea-glyph-12_caret-down
                .prismea-card-tag-selector--list-item.ion-hoverable
                  .prismea-horizontal-spacing-10.-middle.prismea-color.-color-category2-hover
                    .prismea-horizontal-spacing-10--slot
                      i.prismea-icon.prismea-glyph-24_collaborators-management
                    .prismea-horizontal-spacing-10--slot.-expand
                      .prismea-sidebar-text Employee
                    .prismea-horizontal-spacing-10--slot
                      i.prismea-icon.prismea-glyph-12_caret-down
                .prismea-card-tag-selector--list-item.ion-hoverable
                  .prismea-horizontal-spacing-10.-middle.prismea-color.-color-category2-hover
                    .prismea-horizontal-spacing-10--slot
                      i.prismea-icon.prismea-glyph-24_finance
                    .prismea-horizontal-spacing-10--slot.-expand
                      .prismea-sidebar-text Finance
                    .prismea-horizontal-spacing-10--slot
                      i.prismea-icon.prismea-glyph-12_caret-down
            .prismea-card-tag-selector--search
              .prismea-card-tag-selector--search-container
                .prismea-vertical-spacing-20--slot
                  .prismea-color.-color-grey3.prismea-sidebar-text.-min Search by tags
                .prismea-vertical-spacing-20--slot
                  .prismea-horizontal-spacing-10.-middle
                    .prismea-horizontal-spacing-10--slot
                      i.prismea-icon.prismea-glyph-16_search
                    .prismea-horizontal-spacing-10--slot.-expand
                      .prismea-input
                        .prismea-input--container
                          input(type='text')
                          .prismea-input--actions.
                            
                            
                .prismea-vertical-spacing-20
                  .prismea-vertical-spacing-20--slot
                    .prismea-horizontal-spacing-10.-middle.prismea-color.-color-category2-hover
                      .prismea-horizontal-spacing-10--slot
                        i.prismea-icon.prismea-glyph-24_trip
                      div
                        .prismea-sidebar-text.-tag Business trip
                        .prismea-sidebar-text Fuel
                  .prismea-vertical-spacing-20--slot
                    .prismea-horizontal-spacing-10.-middle.prismea-color.-color-category3-hover
                      .prismea-horizontal-spacing-10--slot
                        i.prismea-icon.prismea-glyph-24_management
                      div
                        .prismea-sidebar-text.-tag Administrative
                        .prismea-sidebar-text Postal charges
                  .prismea-vertical-spacing-20--slot
                    .prismea-horizontal-spacing-10.-middle.prismea-color.-color-category2-hover
                      .prismea-horizontal-spacing-10--slot
                        i.prismea-icon.prismea-glyph-24_trip
                      div
                        .prismea-sidebar-text.-tag Business trip
                        .prismea-sidebar-text Restaurants
                  .prismea-vertical-spacing-20--slot
                    .prismea-horizontal-spacing-10.-middle.prismea-color.-color-category4-hover
                      .prismea-horizontal-spacing-10--slot
                        i.prismea-icon.prismea-glyph-24_finance
                      div
                        .prismea-sidebar-text.-tag Finance
                        .prismea-sidebar-text Term account
    //  category highlighted (suggestions and categories are hidden, search is NOT active)
    .prismea-card.ion--expandable.-ion--expanded(style='margin-bottom:30px;')
      .prismea-card--title.-color-grey3.-color-black-hover
        .prismea-horizontal-spacing-10.-middle
          .prismea-horizontal-spacing-15--slot
            i.prismea-icon.prismea-glyph-24_category-placeholder
          .prismea-horizontal-spacing-15--slot.-expand
            p.prismea-text.
              Add a tag
              
        .prismea-horizontal-spacing-10.-middle
          .prismea-card--title-caret
            i.prismea-icon.-x1.prismea-glyph-12_caret-down
      .prismea-card--body.prismea-card-tag-selector
        .prismea-card--slot
          .prismea-vertical-spacing-10
            .prismea-card-tag-selector--scrollable-area
              //  list of all suggested tags
              .prismea-vertical-spacing-20
                .prismea-horizontal-spacing-10.-middle.prismea-color.-color-category2.prismea-card-tag-selector--list-item
                  .prismea-horizontal-spacing-10--slot
                    i.prismea-icon.prismea-glyph-24_trip
                  .prismea-horizontal-spacing-10--slot.-expand
                    .prismea-sidebar-text Business trip (user clicked on it)
                  .prismea-horizontal-spacing-10--slot
                    i.prismea-icon.prismea-glyph-12_caret-up
            .prismea-card-tag-selector--search.-shifted.-active
              .prismea-card-tag-selector--search-container
                .prismea-vertical-spacing-20--slot
                  .prismea-color.-color-grey3.prismea-sidebar-text.-min Search by tags
                .prismea-vertical-spacing-20--slot
                  .prismea-horizontal-spacing-10.-middle
                    .prismea-horizontal-spacing-10--slot
                      i.prismea-icon.prismea-glyph-16_search
                    .prismea-horizontal-spacing-10--slot.-expand
                      .prismea-input
                        .prismea-input--container
                          input(type='text')
                          .prismea-input--actions.
                            
                            
                .prismea-vertical-spacing-20
                  .prismea-vertical-spacing-20--slot
                    .prismea-horizontal-spacing-10.-middle.prismea-color.-color-category2-hover
                      .prismea-horizontal-spacing-10--slot
                        i.prismea-icon.prismea-glyph-24_trip
                      div
                        .prismea-sidebar-text Fuel
                  .prismea-vertical-spacing-20--slot
                    .prismea-horizontal-spacing-10.-middle.prismea-color.-color-category2-hover
                      .prismea-horizontal-spacing-10--slot
                        i.prismea-icon.prismea-glyph-24_trip
                      div
                        .prismea-sidebar-text Restaurants
    //  category highlighted (suggestions and categories are hidden, search is active)
    .prismea-card.ion--expandable.-ion--expanded(style='margin-bottom:30px;')
      .prismea-card--title.-color-grey3.-color-black-hover
        .prismea-horizontal-spacing-10.-middle
          .prismea-horizontal-spacing-15--slot
            i.prismea-icon.prismea-glyph-24_category-placeholder
          .prismea-horizontal-spacing-15--slot.-expand
            p.prismea-text.
              Add a tag
              
        .prismea-horizontal-spacing-10.-middle
          .prismea-card--title-caret
            i.prismea-icon.-x1.prismea-glyph-12_caret-down
      .prismea-card--body.prismea-card-tag-selector
        .prismea-card--slot
          .prismea-vertical-spacing-10
            .prismea-card-tag-selector--scrollable-area
              //  list of all suggested tags
              .prismea-vertical-spacing-20
                .prismea-horizontal-spacing-10.-middle.prismea-color.-color-category2.prismea-card-tag-selector--list-item
                  .prismea-horizontal-spacing-10--slot
                    i.prismea-icon.prismea-glyph-24_trip
                  .prismea-horizontal-spacing-10--slot.-expand
                    .prismea-sidebar-text Business trip (user clicked on it)
                  .prismea-horizontal-spacing-10--slot
                    i.prismea-icon.prismea-glyph-12_caret-up
            .prismea-card-tag-selector--search.-shifted.-active
              .prismea-card-tag-selector--search-container
                .prismea-vertical-spacing-20--slot
                  .prismea-color.-color-grey3.prismea-sidebar-text.-min Search by tags
                .prismea-vertical-spacing-20--slot
                  .prismea-horizontal-spacing-10.-middle
                    .prismea-horizontal-spacing-10--slot
                      i.prismea-icon.prismea-glyph-16_search
                    .prismea-horizontal-spacing-10--slot.-expand
                      .prismea-input
                        .prismea-input--container.-typed
                          input(type='text', value='r')
                          .prismea-input--actions
                            .prismea-input--actions-item
                              i.prismea-glyph-16_close
                .prismea-vertical-spacing-20
                  .prismea-vertical-spacing-20--slot
                    .prismea-horizontal-spacing-10.-middle.prismea-color.-color-category2-hover
                      .prismea-horizontal-spacing-10--slot
                        i.prismea-icon.prismea-glyph-24_trip
                      div
                        .prismea-sidebar-text Restaurants
    //  search is active (global search)
    .prismea-card.ion--expandable.-ion--expanded(style='margin-bottom:30px;')
      .prismea-card--title.-color-grey3.-color-black-hover
        .prismea-horizontal-spacing-10.-middle
          .prismea-horizontal-spacing-15--slot
            i.prismea-icon.prismea-glyph-24_category-placeholder
          .prismea-horizontal-spacing-15--slot.-expand
            p.prismea-text.
              Add a tag
              
        .prismea-horizontal-spacing-10.-middle
          .prismea-card--title-caret
            i.prismea-icon.-x1.prismea-glyph-12_caret-down
      .prismea-card--body.prismea-card-tag-selector
        .prismea-card--slot
          .prismea-vertical-spacing-10
            .prismea-card-tag-selector--scrollable-area
              //  list of all suggested tags
              .prismea-card-tag-selector--suggestions.prismea-card-tag-selector--list-item
                .prismea-vertical-spacing-20--slot
                  .prismea-color.-color-grey3.prismea-sidebar-text.-min Suggested tags
                .prismea-vertical-spacing-20--slot
                  .prismea-horizontal-spacing-10.-middle.prismea-color.-color-category2-hover.-all-children-hovered
                    .prismea-horizontal-spacing-10--slot
                      i.prismea-icon.prismea-glyph-24_trip
                    div
                      .prismea-sidebar-text.-tag.prismea-color.-color-grey5 Business trip
                      .prismea-sidebar-text.prismea-color Hotels
                .prismea-vertical-spacing-20--slot
                  .prismea-horizontal-spacing-10.-middle.prismea-color.-color-category2-hover.-all-children-hovered
                    .prismea-horizontal-spacing-10--slot
                      i.prismea-icon.prismea-glyph-24_trip
                    div
                      .prismea-sidebar-text.-tag.prismea-color.-color-grey5 Business trip
                      .prismea-sidebar-text.prismea-color Fuel
              .prismea-card-tag-selector--categories.prismea-vertical-spacing-20--slot
                .prismea-card-tag-selector--list-item
                  .prismea-color.-color-grey3.prismea-sidebar-text.-min Search by categories
                .prismea-card-tag-selector--list-item.ion-hoverable
                  .prismea-horizontal-spacing-10.-middle.prismea-color.-color-category3-hover
                    .prismea-horizontal-spacing-10--slot
                      i.prismea-icon.prismea-glyph-24_management
                    .prismea-horizontal-spacing-10--slot.-expand
                      .prismea-sidebar-text Administrative
                    .prismea-horizontal-spacing-10--slot
                      i.prismea-icon.prismea-glyph-12_caret-down
                .prismea-card-tag-selector--list-item.ion-hoverable
                  .prismea-horizontal-spacing-10.-middle.prismea-color.-color-category4-hover
                    .prismea-horizontal-spacing-10--slot
                      i.prismea-icon.prismea-glyph-24_trip
                    .prismea-horizontal-spacing-10--slot.-expand
                      .prismea-sidebar-text Business trip
                    .prismea-horizontal-spacing-10--slot
                      i.prismea-icon.prismea-glyph-12_caret-down
                .prismea-card-tag-selector--list-item.ion-hoverable
                  .prismea-horizontal-spacing-10.-middle.prismea-color.-color-category1-hover
                    .prismea-horizontal-spacing-10--slot
                      i.prismea-icon.prismea-glyph-24_capital
                    .prismea-horizontal-spacing-10--slot.-expand
                      .prismea-sidebar-text Capital
                    .prismea-horizontal-spacing-10--slot
                      i.prismea-icon.prismea-glyph-12_caret-down
                .prismea-card-tag-selector--list-item.ion-hoverable
                  .prismea-horizontal-spacing-10.-middle.prismea-color.-color-category2-hover
                    .prismea-horizontal-spacing-10--slot
                      i.prismea-icon.prismea-glyph-24_commission
                    .prismea-horizontal-spacing-10--slot.-expand
                      .prismea-sidebar-text Commissions
                    .prismea-horizontal-spacing-10--slot
                      i.prismea-icon.prismea-glyph-12_caret-down
                .prismea-card-tag-selector--list-item.ion-hoverable
                  .prismea-horizontal-spacing-10.-middle.prismea-color.-color-category2-hover
                    .prismea-horizontal-spacing-10--slot
                      i.prismea-icon.prismea-glyph-24_collaborators-management
                    .prismea-horizontal-spacing-10--slot.-expand
                      .prismea-sidebar-text Employee
                    .prismea-horizontal-spacing-10--slot
                      i.prismea-icon.prismea-glyph-12_caret-down
                .prismea-card-tag-selector--list-item.ion-hoverable
                  .prismea-horizontal-spacing-10.-middle.prismea-color.-color-category2-hover
                    .prismea-horizontal-spacing-10--slot
                      i.prismea-icon.prismea-glyph-24_finance
                    .prismea-horizontal-spacing-10--slot.-expand
                      .prismea-sidebar-text Finance
                    .prismea-horizontal-spacing-10--slot
                      i.prismea-icon.prismea-glyph-12_caret-down
            .prismea-card-tag-selector--search.-active
              .prismea-card-tag-selector--search-container
                .prismea-vertical-spacing-20--slot
                  .prismea-color.-color-grey3.prismea-sidebar-text.-min Search by tags
                .prismea-vertical-spacing-20--slot
                  .prismea-horizontal-spacing-10.-middle
                    .prismea-horizontal-spacing-10--slot
                      i.prismea-icon.prismea-glyph-16_search
                    .prismea-horizontal-spacing-10--slot.-expand
                      .prismea-input
                        .prismea-input--container.-typed
                          input(type='text', value='r')
                          .prismea-input--actions
                            .prismea-input--actions-item
                              i.prismea-glyph-16_close
                .prismea-vertical-spacing-20
                  .prismea-vertical-spacing-20--slot
                    .prismea-horizontal-spacing-10.-middle.prismea-color.-color-category3-hover
                      .prismea-horizontal-spacing-10--slot
                        i.prismea-icon.prismea-glyph-24_management
                      div
                        .prismea-sidebar-text.-tag Administrative
                        .prismea-sidebar-text Postal charges
                  .prismea-vertical-spacing-20--slot
                    .prismea-horizontal-spacing-10.-middle.prismea-color.-color-category2-hover
                      .prismea-horizontal-spacing-10--slot
                        i.prismea-icon.prismea-glyph-24_trip
                      div
                        .prismea-sidebar-text.-tag Business trip
                        .prismea-sidebar-text Restaurants
                  .prismea-vertical-spacing-20--slot
                    .prismea-horizontal-spacing-10.-middle.prismea-color.-color-category4-hover
                      .prismea-horizontal-spacing-10--slot
                        i.prismea-icon.prismea-glyph-24_finance
                      div
                        .prismea-sidebar-text.-tag Finance
                        .prismea-sidebar-text Term account
  //  with selectedTag
  div(style='width: 305px; margin: 0 auto;')
    //  closed
    .prismea-card.ion--expandable(style='margin-bottom:30px;')
      .prismea-card--title.-category2.-color-light
        .prismea-horizontal-spacing-10.-middle
          .prismea-horizontal-spacing-15--slot
            i.prismea-icon.prismea-glyph-24_trip
          .prismea-horizontal-spacing-15--slot.-expand
            p.prismea-text.
              Restaurants
              
        .prismea-horizontal-spacing-10.-middle
          .prismea-card--title-caret
            i.prismea-icon.-x1.prismea-glyph-12_caret-down
      .prismea-card--body.prismea-card-tag-selector
        .prismea-card--slot
          .prismea-vertical-spacing-10
            .prismea-card-tag-selector--scrollable-area
              //  list of all suggested tags
              .prismea-card-tag-selector--categories.prismea-vertical-spacing-20--slot
                .prismea-card-tag-selector--list-item
                  .prismea-color.-color-grey3.prismea-sidebar-text.-min Search by categories
                .prismea-card-tag-selector--list-item.ion-hoverable
                  .prismea-horizontal-spacing-10.-middle.prismea-color.-color-category3-hover
                    .prismea-horizontal-spacing-10--slot
                      i.prismea-icon.prismea-glyph-24_management
                    .prismea-horizontal-spacing-10--slot.-expand
                      .prismea-sidebar-text Administrative
                    .prismea-horizontal-spacing-10--slot
                      i.prismea-icon.prismea-glyph-12_caret-down
                .prismea-card-tag-selector--list-item.ion-hoverable
                  .prismea-horizontal-spacing-10.-middle.prismea-color.-color-category2
                    .prismea-horizontal-spacing-10--slot
                      i.prismea-icon.prismea-glyph-24_trip
                    .prismea-horizontal-spacing-10--slot.-expand
                      .prismea-sidebar-text Business trip
                    .prismea-horizontal-spacing-10--slot
                      i.prismea-icon.prismea-glyph-12_caret-down
                .prismea-card-tag-selector--list-item.ion-hoverable
                  .prismea-horizontal-spacing-10.-middle.prismea-color.-color-category1-hover
                    .prismea-horizontal-spacing-10--slot
                      i.prismea-icon.prismea-glyph-24_capital
                    .prismea-horizontal-spacing-10--slot.-expand
                      .prismea-sidebar-text Capital
                    .prismea-horizontal-spacing-10--slot
                      i.prismea-icon.prismea-glyph-12_caret-down
                .prismea-card-tag-selector--list-item.ion-hoverable
                  .prismea-horizontal-spacing-10.-middle.prismea-color.-color-category2-hover
                    .prismea-horizontal-spacing-10--slot
                      i.prismea-icon.prismea-glyph-24_commission
                    .prismea-horizontal-spacing-10--slot.-expand
                      .prismea-sidebar-text Commissions
                    .prismea-horizontal-spacing-10--slot
                      i.prismea-icon.prismea-glyph-12_caret-down
                .prismea-card-tag-selector--list-item.ion-hoverable
                  .prismea-horizontal-spacing-10.-middle.prismea-color.-color-category2-hover
                    .prismea-horizontal-spacing-10--slot
                      i.prismea-icon.prismea-glyph-24_collaborators-management
                    .prismea-horizontal-spacing-10--slot.-expand
                      .prismea-sidebar-text Employee
                    .prismea-horizontal-spacing-10--slot
                      i.prismea-icon.prismea-glyph-12_caret-down
                .prismea-card-tag-selector--list-item.ion-hoverable
                  .prismea-horizontal-spacing-10.-middle.prismea-color.-color-category2-hover
                    .prismea-horizontal-spacing-10--slot
                      i.prismea-icon.prismea-glyph-24_finance
                    .prismea-horizontal-spacing-10--slot.-expand
                      .prismea-sidebar-text Finance
                    .prismea-horizontal-spacing-10--slot
                      i.prismea-icon.prismea-glyph-12_caret-down
            .prismea-card-tag-selector--search
              .prismea-card-tag-selector--search-container
                .prismea-vertical-spacing-20--slot
                  .prismea-color.-color-grey3.prismea-sidebar-text.-min Search by tags
                .prismea-vertical-spacing-20--slot
                  .prismea-horizontal-spacing-10.-middle
                    .prismea-horizontal-spacing-10--slot
                      i.prismea-icon.prismea-glyph-16_search
                    .prismea-horizontal-spacing-10--slot.-expand
                      .prismea-input
                        .prismea-input--container
                          input(type='text')
                          .prismea-input--actions.
                            
                            
                .prismea-vertical-spacing-20
                  .prismea-vertical-spacing-20--slot
                    .prismea-horizontal-spacing-10.-middle.prismea-color.-color-category2-hover
                      .prismea-horizontal-spacing-10--slot
                        i.prismea-icon.prismea-glyph-24_trip
                      div
                        .prismea-sidebar-text.-tag Business trip
                        .prismea-sidebar-text Fuel
                  .prismea-vertical-spacing-20--slot
                    .prismea-horizontal-spacing-10.-middle.prismea-color.-color-category3-hover
                      .prismea-horizontal-spacing-10--slot
                        i.prismea-icon.prismea-glyph-24_management
                      div
                        .prismea-sidebar-text.-tag Administrative
                        .prismea-sidebar-text Postal charges
                  .prismea-vertical-spacing-20--slot
                    .prismea-horizontal-spacing-10.-middle.prismea-color.-color-category2
                      .prismea-horizontal-spacing-10--slot
                        i.prismea-icon.prismea-glyph-24_trip
                      div
                        .prismea-sidebar-text.-tag Business trip
                        .prismea-sidebar-text Restaurants
                  .prismea-vertical-spacing-20--slot
                    .prismea-horizontal-spacing-10.-middle.prismea-color.-color-category4-hover
                      .prismea-horizontal-spacing-10--slot
                        i.prismea-icon.prismea-glyph-24_finance
                      div
                        .prismea-sidebar-text.-tag Finance
                        .prismea-sidebar-text Term account
    //  expanded
    .prismea-card.ion--expandable.-ion--expanded(style='margin-bottom:30px;')
      .prismea-card--title.-category2.-color-light
        .prismea-horizontal-spacing-10.-middle
          .prismea-horizontal-spacing-15--slot
            i.prismea-icon.prismea-glyph-24_trip
          .prismea-horizontal-spacing-15--slot.-expand
            p.prismea-text.
              Restaurants
              
        .prismea-horizontal-spacing-10.-middle
          .prismea-card--title-caret
            i.prismea-icon.-x1.prismea-glyph-12_caret-down
      .prismea-card--body.prismea-card-tag-selector
        .prismea-card--slot
          .prismea-vertical-spacing-10
            .prismea-card-tag-selector--scrollable-area
              //  list of all suggested tags
              .prismea-card-tag-selector--categories.prismea-vertical-spacing-20--slot
                .prismea-card-tag-selector--list-item
                  .prismea-color.-color-grey3.prismea-sidebar-text.-min Search by categories
                .prismea-card-tag-selector--list-item.ion-hoverable
                  .prismea-horizontal-spacing-10.-middle.prismea-color.-color-category3-hover
                    .prismea-horizontal-spacing-10--slot
                      i.prismea-icon.prismea-glyph-24_management
                    .prismea-horizontal-spacing-10--slot.-expand
                      .prismea-sidebar-text Administrative
                    .prismea-horizontal-spacing-10--slot
                      i.prismea-icon.prismea-glyph-12_caret-down
                .prismea-card-tag-selector--list-item.ion-hoverable
                  .prismea-horizontal-spacing-10.-middle.prismea-color.-color-category2
                    .prismea-horizontal-spacing-10--slot
                      i.prismea-icon.prismea-glyph-24_trip
                    .prismea-horizontal-spacing-10--slot.-expand
                      .prismea-sidebar-text Business trip
                    .prismea-horizontal-spacing-10--slot
                      i.prismea-icon.prismea-glyph-12_caret-down
                .prismea-card-tag-selector--list-item.ion-hoverable
                  .prismea-horizontal-spacing-10.-middle.prismea-color.-color-category1-hover
                    .prismea-horizontal-spacing-10--slot
                      i.prismea-icon.prismea-glyph-24_capital
                    .prismea-horizontal-spacing-10--slot.-expand
                      .prismea-sidebar-text Capital
                    .prismea-horizontal-spacing-10--slot
                      i.prismea-icon.prismea-glyph-12_caret-down
                .prismea-card-tag-selector--list-item.ion-hoverable
                  .prismea-horizontal-spacing-10.-middle.prismea-color.-color-category2-hover
                    .prismea-horizontal-spacing-10--slot
                      i.prismea-icon.prismea-glyph-24_commission
                    .prismea-horizontal-spacing-10--slot.-expand
                      .prismea-sidebar-text Commissions
                    .prismea-horizontal-spacing-10--slot
                      i.prismea-icon.prismea-glyph-12_caret-down
                .prismea-card-tag-selector--list-item.ion-hoverable
                  .prismea-horizontal-spacing-10.-middle.prismea-color.-color-category2-hover
                    .prismea-horizontal-spacing-10--slot
                      i.prismea-icon.prismea-glyph-24_collaborators-management
                    .prismea-horizontal-spacing-10--slot.-expand
                      .prismea-sidebar-text Employee
                    .prismea-horizontal-spacing-10--slot
                      i.prismea-icon.prismea-glyph-12_caret-down
                .prismea-card-tag-selector--list-item.ion-hoverable
                  .prismea-horizontal-spacing-10.-middle.prismea-color.-color-category2-hover
                    .prismea-horizontal-spacing-10--slot
                      i.prismea-icon.prismea-glyph-24_finance
                    .prismea-horizontal-spacing-10--slot.-expand
                      .prismea-sidebar-text Finance
                    .prismea-horizontal-spacing-10--slot
                      i.prismea-icon.prismea-glyph-12_caret-down
            .prismea-card-tag-selector--search
              .prismea-card-tag-selector--search-container
                .prismea-vertical-spacing-20--slot
                  .prismea-color.-color-grey3.prismea-sidebar-text.-min Search by tags
                .prismea-vertical-spacing-20--slot
                  .prismea-horizontal-spacing-10.-middle
                    .prismea-horizontal-spacing-10--slot
                      i.prismea-icon.prismea-glyph-16_search
                    .prismea-horizontal-spacing-10--slot.-expand
                      .prismea-input
                        .prismea-input--container
                          input(type='text')
                          .prismea-input--actions.
                            
                            
                .prismea-vertical-spacing-20
                  .prismea-vertical-spacing-20--slot
                    .prismea-horizontal-spacing-10.-middle.prismea-color.-color-category2-hover
                      .prismea-horizontal-spacing-10--slot
                        i.prismea-icon.prismea-glyph-24_trip
                      div
                        .prismea-sidebar-text.-tag Business trip
                        .prismea-sidebar-text Fuel
                  .prismea-vertical-spacing-20--slot
                    .prismea-horizontal-spacing-10.-middle.prismea-color.-color-category3-hover
                      .prismea-horizontal-spacing-10--slot
                        i.prismea-icon.prismea-glyph-24_management
                      div
                        .prismea-sidebar-text.-tag Administrative
                        .prismea-sidebar-text Postal charges
                  .prismea-vertical-spacing-20--slot
                    .prismea-horizontal-spacing-10.-middle.prismea-color.-color-category2
                      .prismea-horizontal-spacing-10--slot
                        i.prismea-icon.prismea-glyph-24_trip
                      div
                        .prismea-sidebar-text.-tag Business trip
                        .prismea-sidebar-text Restaurants
                  .prismea-vertical-spacing-20--slot
                    .prismea-horizontal-spacing-10.-middle.prismea-color.-color-category4-hover
                      .prismea-horizontal-spacing-10--slot
                        i.prismea-icon.prismea-glyph-24_finance
                      div
                        .prismea-sidebar-text.-tag Finance
                        .prismea-sidebar-text Term account
    //  category highlighted (suggestions and categories are hidden, search is NOT active)
    .prismea-card.ion--expandable.-ion--expanded(style='margin-bottom:30px;')
      .prismea-card--title.-category2.-color-light
        .prismea-horizontal-spacing-10.-middle
          .prismea-horizontal-spacing-15--slot
            i.prismea-icon.prismea-glyph-24_trip
          .prismea-horizontal-spacing-15--slot.-expand
            p.prismea-text.
              Restaurants
              
        .prismea-horizontal-spacing-10.-middle
          .prismea-card--title-caret
            i.prismea-icon.-x1.prismea-glyph-12_caret-down
      .prismea-card--body.prismea-card-tag-selector
        .prismea-card--slot
          .prismea-vertical-spacing-10
            .prismea-card-tag-selector--scrollable-area
              //  list of all suggested tags
              .prismea-vertical-spacing-20
                .prismea-horizontal-spacing-10.-middle.prismea-color.-color-category2.prismea-card-tag-selector--list-item
                  .prismea-horizontal-spacing-10--slot
                    i.prismea-icon.prismea-glyph-24_trip
                  .prismea-horizontal-spacing-10--slot.-expand
                    .prismea-sidebar-text Business trip (user clicked on it)
                  .prismea-horizontal-spacing-10--slot
                    i.prismea-icon.prismea-glyph-12_caret-up
            .prismea-card-tag-selector--search.-shifted.-active
              .prismea-card-tag-selector--search-container
                .prismea-vertical-spacing-20--slot
                  .prismea-color.-color-grey3.prismea-sidebar-text.-min Search by tags
                .prismea-vertical-spacing-20--slot
                  .prismea-horizontal-spacing-10.-middle
                    .prismea-horizontal-spacing-10--slot
                      i.prismea-icon.prismea-glyph-16_search
                    .prismea-horizontal-spacing-10--slot.-expand
                      .prismea-input
                        .prismea-input--container
                          input(type='text')
                          .prismea-input--actions.
                            
                            
                .prismea-vertical-spacing-20
                  .prismea-vertical-spacing-20--slot
                    .prismea-horizontal-spacing-10.-middle.prismea-color.-color-category2-hover
                      .prismea-horizontal-spacing-10--slot
                        i.prismea-icon.prismea-glyph-24_trip
                      div
                        .prismea-sidebar-text Fuel
                  .prismea-vertical-spacing-20--slot
                    .prismea-horizontal-spacing-10.-middle.prismea-color.-color-category2
                      .prismea-horizontal-spacing-10--slot
                        i.prismea-icon.prismea-glyph-24_trip
                      div
                        .prismea-sidebar-text Restaurants
    //  category highlighted (suggestions and categories are hidden, search is active)
    .prismea-card.ion--expandable.-ion--expanded(style='margin-bottom:30px;')
      .prismea-card--title.-category2.-color-light
        .prismea-horizontal-spacing-10.-middle
          .prismea-horizontal-spacing-15--slot
            i.prismea-icon.prismea-glyph-24_trip
          .prismea-horizontal-spacing-15--slot.-expand
            p.prismea-text.
              Restaurants
              
        .prismea-horizontal-spacing-10.-middle
          .prismea-card--title-caret
            i.prismea-icon.-x1.prismea-glyph-12_caret-down
      .prismea-card--body.prismea-card-tag-selector
        .prismea-card--slot
          .prismea-vertical-spacing-10
            .prismea-card-tag-selector--scrollable-area
              //  list of all suggested tags
              .prismea-vertical-spacing-20
                .prismea-horizontal-spacing-10.-middle.prismea-color.-color-category2.prismea-card-tag-selector--list-item
                  .prismea-horizontal-spacing-10--slot
                    i.prismea-icon.prismea-glyph-24_trip
                  .prismea-horizontal-spacing-10--slot.-expand
                    .prismea-sidebar-text Business trip (user clicked on it)
                  .prismea-horizontal-spacing-10--slot
                    i.prismea-icon.prismea-glyph-12_caret-up
            .prismea-card-tag-selector--search.-shifted.-active
              .prismea-card-tag-selector--search-container
                .prismea-vertical-spacing-20--slot
                  .prismea-color.-color-grey3.prismea-sidebar-text.-min Search by tags
                .prismea-vertical-spacing-20--slot
                  .prismea-horizontal-spacing-10.-middle
                    .prismea-horizontal-spacing-10--slot
                      i.prismea-icon.prismea-glyph-16_search
                    .prismea-horizontal-spacing-10--slot.-expand
                      .prismea-input
                        .prismea-input--container.-typed
                          input(type='text', value='r')
                          .prismea-input--actions
                            .prismea-input--actions-item
                              i.prismea-glyph-16_close
                .prismea-vertical-spacing-20
                  .prismea-vertical-spacing-20--slot
                    .prismea-horizontal-spacing-10.-middle.prismea-color.-color-category2
                      .prismea-horizontal-spacing-10--slot
                        i.prismea-icon.prismea-glyph-24_trip
                      div
                        .prismea-sidebar-text Restaurants
    //  search is active (global search)
    .prismea-card.ion--expandable.-ion--expanded(style='margin-bottom:30px;')
      .prismea-card--title.-category2.-color-light
        .prismea-horizontal-spacing-10.-middle
          .prismea-horizontal-spacing-15--slot
            i.prismea-icon.prismea-glyph-24_trip
          .prismea-horizontal-spacing-15--slot.-expand
            p.prismea-text.
              Restaurants
              
        .prismea-horizontal-spacing-10.-middle
          .prismea-card--title-caret
            i.prismea-icon.-x1.prismea-glyph-12_caret-down
      .prismea-card--body.prismea-card-tag-selector
        .prismea-card--slot
          .prismea-vertical-spacing-10
            .prismea-card-tag-selector--scrollable-area
              //  list of all suggested tags
              .prismea-card-tag-selector--categories.prismea-vertical-spacing-20--slot
                .prismea-card-tag-selector--list-item
                  .prismea-color.-color-grey3.prismea-sidebar-text.-min Search by categories
                .prismea-card-tag-selector--list-item.ion-hoverable
                  .prismea-horizontal-spacing-10.-middle.prismea-color.-color-category3-hover
                    .prismea-horizontal-spacing-10--slot
                      i.prismea-icon.prismea-glyph-24_management
                    .prismea-horizontal-spacing-10--slot.-expand
                      .prismea-sidebar-text Administrative
                    .prismea-horizontal-spacing-10--slot
                      i.prismea-icon.prismea-glyph-12_caret-down
                .prismea-card-tag-selector--list-item.ion-hoverable
                  .prismea-horizontal-spacing-10.-middle.prismea-color.-color-category2
                    .prismea-horizontal-spacing-10--slot
                      i.prismea-icon.prismea-glyph-24_trip
                    .prismea-horizontal-spacing-10--slot.-expand
                      .prismea-sidebar-text Business trip
                    .prismea-horizontal-spacing-10--slot
                      i.prismea-icon.prismea-glyph-12_caret-down
                .prismea-card-tag-selector--list-item.ion-hoverable
                  .prismea-horizontal-spacing-10.-middle.prismea-color.-color-category1-hover
                    .prismea-horizontal-spacing-10--slot
                      i.prismea-icon.prismea-glyph-24_capital
                    .prismea-horizontal-spacing-10--slot.-expand
                      .prismea-sidebar-text Capital
                    .prismea-horizontal-spacing-10--slot
                      i.prismea-icon.prismea-glyph-12_caret-down
                .prismea-card-tag-selector--list-item.ion-hoverable
                  .prismea-horizontal-spacing-10.-middle.prismea-color.-color-category2-hover
                    .prismea-horizontal-spacing-10--slot
                      i.prismea-icon.prismea-glyph-24_commission
                    .prismea-horizontal-spacing-10--slot.-expand
                      .prismea-sidebar-text Commissions
                    .prismea-horizontal-spacing-10--slot
                      i.prismea-icon.prismea-glyph-12_caret-down
                .prismea-card-tag-selector--list-item.ion-hoverable
                  .prismea-horizontal-spacing-10.-middle.prismea-color.-color-category2-hover
                    .prismea-horizontal-spacing-10--slot
                      i.prismea-icon.prismea-glyph-24_collaborators-management
                    .prismea-horizontal-spacing-10--slot.-expand
                      .prismea-sidebar-text Employee
                    .prismea-horizontal-spacing-10--slot
                      i.prismea-icon.prismea-glyph-12_caret-down
                .prismea-card-tag-selector--list-item.ion-hoverable
                  .prismea-horizontal-spacing-10.-middle.prismea-color.-color-category2-hover
                    .prismea-horizontal-spacing-10--slot
                      i.prismea-icon.prismea-glyph-24_finance
                    .prismea-horizontal-spacing-10--slot.-expand
                      .prismea-sidebar-text Finance
                    .prismea-horizontal-spacing-10--slot
                      i.prismea-icon.prismea-glyph-12_caret-down
            .prismea-card-tag-selector--search.-active
              .prismea-card-tag-selector--search-container
                .prismea-vertical-spacing-20--slot
                  .prismea-color.-color-grey3.prismea-sidebar-text.-min Search by tags
                .prismea-vertical-spacing-20--slot
                  .prismea-horizontal-spacing-10.-middle
                    .prismea-horizontal-spacing-10--slot
                      i.prismea-icon.prismea-glyph-16_search
                    .prismea-horizontal-spacing-10--slot.-expand
                      .prismea-input
                        .prismea-input--container.-typed
                          input(type='text', value='r')
                          .prismea-input--actions
                            .prismea-input--actions-item
                              i.prismea-glyph-16_close
                .prismea-vertical-spacing-20
                  .prismea-vertical-spacing-20--slot
                    .prismea-horizontal-spacing-10.-middle.prismea-color.-color-category3-hover
                      .prismea-horizontal-spacing-10--slot
                        i.prismea-icon.prismea-glyph-24_management
                      div
                        .prismea-sidebar-text.-tag Administrative
                        .prismea-sidebar-text Postal charges
                  .prismea-vertical-spacing-20--slot
                    .prismea-horizontal-spacing-10.-middle.prismea-color.-color-category2
                      .prismea-horizontal-spacing-10--slot
                        i.prismea-icon.prismea-glyph-24_trip
                      div
                        .prismea-sidebar-text.-tag Business trip
                        .prismea-sidebar-text Restaurants
                  .prismea-vertical-spacing-20--slot
                    .prismea-horizontal-spacing-10.-middle.prismea-color.-color-category4-hover
                      .prismea-horizontal-spacing-10--slot
                        i.prismea-icon.prismea-glyph-24_finance
                      div
                        .prismea-sidebar-text.-tag Finance
                        .prismea-sidebar-text Term account

Sidebar header

Used to display main infos of the sidebar

<div class="prismea-vertical-spacing-5 -center">
  <div class="prismea-vertical-spacing-5--slot">
    <div class="prismea-horizontal-spacing-5 -justify-middle">
      <div class="prismea-horizontal-spacing-5--slot"><i class="prismea-icon -x2 -color-light -circle -primary prismea-glyph-24_dashboard"></i>
      </div>
    </div>
  </div>
  <div class="prismea-vertical-spacing-5--slot">
    <p class="prismea-text -center -text-xs">Title level 3
    </p>
  </div>
  <div class="prismea-vertical-spacing-5--slot">
    <h1 class="prismea-sidebar-title -color-primary">Primary</h1>
  </div>
  <div class="prismea-vertical-spacing-5--slot">
    <h1 class="prismea-sidebar-title">Second Title</h1>
  </div>
</div>
<div class="prismea-vertical-spacing-5 -center">
  <div class="prismea-vertical-spacing-5--slot">
    <div class="prismea-horizontal-spacing-5 -justify-middle">
      <div class="prismea-horizontal-spacing-5--slot"><i class="prismea-icon -x2 -color-light -circle -category1 prismea-glyph-24_dashboard"></i>
      </div>
    </div>
  </div>
  <div class="prismea-vertical-spacing-5--slot">
    <p class="prismea-text -center -text-xs">Title level 3
    </p>
  </div>
  <div class="prismea-vertical-spacing-5--slot">
    <h1 class="prismea-sidebar-title -color-category1">Category 1</h1>
  </div>
  <div class="prismea-vertical-spacing-5--slot">
    <h1 class="prismea-sidebar-title">Second Title</h1>
  </div>
</div>
<div class="prismea-vertical-spacing-5 -center">
  <div class="prismea-vertical-spacing-5--slot">
    <div class="prismea-horizontal-spacing-5 -justify-middle">
      <div class="prismea-horizontal-spacing-5--slot"><i class="prismea-icon -x2 -color-light -circle -category2 prismea-glyph-24_dashboard"></i>
      </div>
    </div>
  </div>
  <div class="prismea-vertical-spacing-5--slot">
    <p class="prismea-text -center -text-xs">Title level 3
    </p>
  </div>
  <div class="prismea-vertical-spacing-5--slot">
    <h1 class="prismea-sidebar-title -color-category2">Category 2</h1>
  </div>
  <div class="prismea-vertical-spacing-5--slot">
    <h1 class="prismea-sidebar-title">Second Title</h1>
  </div>
</div>
<div class="prismea-vertical-spacing-5 -center">
  <div class="prismea-vertical-spacing-5--slot">
    <div class="prismea-horizontal-spacing-5 -justify-middle">
      <div class="prismea-horizontal-spacing-5--slot"><i class="prismea-icon -x2 -color-light -circle -category3 prismea-glyph-24_dashboard"></i>
      </div>
    </div>
  </div>
  <div class="prismea-vertical-spacing-5--slot">
    <p class="prismea-text -center -text-xs">Title level 3
    </p>
  </div>
  <div class="prismea-vertical-spacing-5--slot">
    <h1 class="prismea-sidebar-title -color-category3">Category 3</h1>
  </div>
  <div class="prismea-vertical-spacing-5--slot">
    <h1 class="prismea-sidebar-title">Second Title</h1>
  </div>
</div>
<div class="prismea-vertical-spacing-5 -center">
  <div class="prismea-vertical-spacing-5--slot">
    <div class="prismea-horizontal-spacing-5 -justify-middle">
      <div class="prismea-horizontal-spacing-5--slot"><i class="prismea-icon -x2 -color-light -circle -category4 prismea-glyph-24_dashboard"></i>
      </div>
    </div>
  </div>
  <div class="prismea-vertical-spacing-5--slot">
    <p class="prismea-text -center -text-xs">Title level 3
    </p>
  </div>
  <div class="prismea-vertical-spacing-5--slot">
    <h1 class="prismea-sidebar-title -color-category4">Category 4</h1>
  </div>
  <div class="prismea-vertical-spacing-5--slot">
    <h1 class="prismea-sidebar-title">Second Title</h1>
  </div>
</div>
.prismea-vertical-spacing-5.-center
  .prismea-vertical-spacing-5--slot
    .prismea-horizontal-spacing-5.-justify-middle
      .prismea-horizontal-spacing-5--slot
        i.prismea-icon.-x2.-color-light.-circle.-primary.prismea-glyph-24_dashboard
  .prismea-vertical-spacing-5--slot
    p.prismea-text.-center.-text-xs.
      Title level 3
      
  .prismea-vertical-spacing-5--slot
    h1.prismea-sidebar-title.-color-primary Primary
  .prismea-vertical-spacing-5--slot
    h1.prismea-sidebar-title Second Title
.prismea-vertical-spacing-5.-center
  .prismea-vertical-spacing-5--slot
    .prismea-horizontal-spacing-5.-justify-middle
      .prismea-horizontal-spacing-5--slot
        i.prismea-icon.-x2.-color-light.-circle.-category1.prismea-glyph-24_dashboard
  .prismea-vertical-spacing-5--slot
    p.prismea-text.-center.-text-xs.
      Title level 3
      
  .prismea-vertical-spacing-5--slot
    h1.prismea-sidebar-title.-color-category1 Category 1
  .prismea-vertical-spacing-5--slot
    h1.prismea-sidebar-title Second Title
.prismea-vertical-spacing-5.-center
  .prismea-vertical-spacing-5--slot
    .prismea-horizontal-spacing-5.-justify-middle
      .prismea-horizontal-spacing-5--slot
        i.prismea-icon.-x2.-color-light.-circle.-category2.prismea-glyph-24_dashboard
  .prismea-vertical-spacing-5--slot
    p.prismea-text.-center.-text-xs.
      Title level 3
      
  .prismea-vertical-spacing-5--slot
    h1.prismea-sidebar-title.-color-category2 Category 2
  .prismea-vertical-spacing-5--slot
    h1.prismea-sidebar-title Second Title
.prismea-vertical-spacing-5.-center
  .prismea-vertical-spacing-5--slot
    .prismea-horizontal-spacing-5.-justify-middle
      .prismea-horizontal-spacing-5--slot
        i.prismea-icon.-x2.-color-light.-circle.-category3.prismea-glyph-24_dashboard
  .prismea-vertical-spacing-5--slot
    p.prismea-text.-center.-text-xs.
      Title level 3
      
  .prismea-vertical-spacing-5--slot
    h1.prismea-sidebar-title.-color-category3 Category 3
  .prismea-vertical-spacing-5--slot
    h1.prismea-sidebar-title Second Title
.prismea-vertical-spacing-5.-center
  .prismea-vertical-spacing-5--slot
    .prismea-horizontal-spacing-5.-justify-middle
      .prismea-horizontal-spacing-5--slot
        i.prismea-icon.-x2.-color-light.-circle.-category4.prismea-glyph-24_dashboard
  .prismea-vertical-spacing-5--slot
    p.prismea-text.-center.-text-xs.
      Title level 3
      
  .prismea-vertical-spacing-5--slot
    h1.prismea-sidebar-title.-color-category4 Category 4
  .prismea-vertical-spacing-5--slot
    h1.prismea-sidebar-title Second Title

Superscript Tooltip

<div class="prismea-horizontal-spacing-10"><span class="prismea-horizontal-spacing-10--slot prismea-title-1 prismea-color -color-grey3">Some Title</span>
  <div class="prismea-icon -superscript prismea-glyph-12_info -color-grey5">
    <div class="prismea-superscript-tooltip prismea-badge -rounded -uppercase prismea-color -primary">En attente : 100,00 $</div>
  </div>
</div>
<div class="prismea-horizontal-spacing-10"><span class="prismea-horizontal-spacing-10--slot prismea-title-1 prismea-color -color-grey3">Some Title</span>
  <div class="prismea-icon -superscript prismea-glyph-12_info -color-grey5">
    <div class="prismea-superscript-tooltip -show prismea-badge -rounded -uppercase prismea-color -pending">En attente : 100,00 $</div>
  </div>
</div>
.prismea-horizontal-spacing-10
  span.prismea-horizontal-spacing-10--slot.prismea-title-1.prismea-color.-color-grey3 Some Title
  .prismea-icon.-superscript.prismea-glyph-12_info.-color-grey5
    .prismea-superscript-tooltip.prismea-badge.-rounded.-uppercase.prismea-color.-primary En attente : 100,00 $
.prismea-horizontal-spacing-10
  span.prismea-horizontal-spacing-10--slot.prismea-title-1.prismea-color.-color-grey3 Some Title
  .prismea-icon.-superscript.prismea-glyph-12_info.-color-grey5
    .prismea-superscript-tooltip.-show.prismea-badge.-rounded.-uppercase.prismea-color.-pending En attente : 100,00 $

Tables

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

<h2>Auto</h2>
<table class="prismea-table -default -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 ">
      <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-16_export"></i></button>
          <button class="prismea-icon-button"><i class="prismea-icon-button--icon prismea-glyph-16_checkbox"></i></button>
          <button class="prismea-icon-button"><i class="prismea-icon-button--icon prismea-glyph-16_card"></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-16_export"></i></button>
          <button class="prismea-icon-button"><i class="prismea-icon-button--icon prismea-glyph-16_checkbox"></i></button>
          <button class="prismea-icon-button"><i class="prismea-icon-button--icon prismea-glyph-16_card"></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-pending">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-16_export"></i></button>
          <button class="prismea-icon-button -invisible"><i class="prismea-icon-button--icon prismea-glyph-16_checkbox"></i></button>
          <button class="prismea-icon-button -invisible"><i class="prismea-icon-button--icon prismea-glyph-16_card"></i></button>
        </div>
      </td>
    </tr>
  </tbody>
</table>
<h2>With checkbox</h2>
<table class="prismea-table -default -text-sm">
  <thead class="prismea-table--head">
    <tr class="prismea-table--line">
      <th class="prismea-table--cell -with-checkbox">
        <div class="checkbox">
          <input type="checkbox" id="foo1" checked="checked"/>
          <label for="foo1">
            <svg class="icon-24 icon-color-white">
              <use href="/svg/24x24/line/validate-alt.svg#validate-alt-line-24"></use>
            </svg>
          </label>
        </div>
      </th>
      <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 ">
      <th class="prismea-table--cell -with-checkbox">
        <div class="checkbox">
          <input type="checkbox" id="foo2" checked="checked"/>
          <label for="foo2">
            <svg class="icon-24 icon-color-white">
              <use href="/svg/24x24/line/validate-alt.svg#validate-alt-line-24"></use>
            </svg>
          </label>
        </div>
      </th>
      <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-16_export"></i></button>
          <button class="prismea-icon-button"><i class="prismea-icon-button--icon prismea-glyph-16_checkbox"></i></button>
          <button class="prismea-icon-button"><i class="prismea-icon-button--icon prismea-glyph-16_card"></i></button>
        </div>
      </td>
    </tr>
    <tr class="prismea-table--line ion--hoverable">
      <th class="prismea-table--cell -with-checkbox">
        <div class="checkbox">
          <input type="checkbox" id="foo3" checked="checked"/>
          <label for="foo3">
            <svg class="icon-24 icon-color-white">
              <use href="/svg/24x24/line/validate-alt.svg#validate-alt-line-24"></use>
            </svg>
          </label>
        </div>
      </th>
      <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-16_export"></i></button>
          <button class="prismea-icon-button"><i class="prismea-icon-button--icon prismea-glyph-16_checkbox"></i></button>
          <button class="prismea-icon-button"><i class="prismea-icon-button--icon prismea-glyph-16_card"></i></button>
        </div>
      </td>
    </tr>
    <tr class="prismea-table--line ion--hoverable -ion--staggered-4">
      <th class="prismea-table--cell -with-checkbox">
        <div class="checkbox">
          <input type="checkbox" id="foo4" checked="checked"/>
          <label for="foo4">
            <svg class="icon-24 icon-color-white">
              <use href="/svg/24x24/line/validate-alt.svg#validate-alt-line-24"></use>
            </svg>
          </label>
        </div>
      </th>
      <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-pending">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-16_export"></i></button>
          <button class="prismea-icon-button -invisible"><i class="prismea-icon-button--icon prismea-glyph-16_checkbox"></i></button>
          <button class="prismea-icon-button -invisible"><i class="prismea-icon-button--icon prismea-glyph-16_card"></i></button>
        </div>
      </td>
    </tr>
  </tbody>
</table>
<h2>Disabled Table</h2>
<table class="prismea-table -default -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 ">
      <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-16_export"></i></button>
          <button class="prismea-icon-button"><i class="prismea-icon-button--icon prismea-glyph-16_checkbox"></i></button>
          <button class="prismea-icon-button"><i class="prismea-icon-button--icon prismea-glyph-16_card"></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-16_export"></i></button>
          <button class="prismea-icon-button"><i class="prismea-icon-button--icon prismea-glyph-16_checkbox"></i></button>
          <button class="prismea-icon-button"><i class="prismea-icon-button--icon prismea-glyph-16_card"></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-pending">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-16_export"></i></button>
          <button class="prismea-icon-button -invisible"><i class="prismea-icon-button--icon prismea-glyph-16_checkbox"></i></button>
          <button class="prismea-icon-button -invisible"><i class="prismea-icon-button--icon prismea-glyph-16_card"></i></button>
        </div>
      </td>
    </tr>
  </tbody>
</table>
<h2>Disabled / Highlighted Line</h2>
<table class="prismea-table -default -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  ion--disabled">
      <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-16_export"></i></button>
          <button class="prismea-icon-button"><i class="prismea-icon-button--icon prismea-glyph-16_checkbox"></i></button>
          <button class="prismea-icon-button"><i class="prismea-icon-button--icon prismea-glyph-16_card"></i></button>
        </div>
      </td>
    </tr>
    <tr class="prismea-table--line ion--hoverable -highlighted">
      <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-16_export"></i></button>
          <button class="prismea-icon-button"><i class="prismea-icon-button--icon prismea-glyph-16_checkbox"></i></button>
          <button class="prismea-icon-button"><i class="prismea-icon-button--icon prismea-glyph-16_card"></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-pending">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-16_export"></i></button>
          <button class="prismea-icon-button -invisible"><i class="prismea-icon-button--icon prismea-glyph-16_checkbox"></i></button>
          <button class="prismea-icon-button -invisible"><i class="prismea-icon-button--icon prismea-glyph-16_card"></i></button>
        </div>
      </td>
    </tr>
  </tbody>
</table>
<h2>Equivalent / First column 400 / Row with badge</h2>
<table class="prismea-table -default -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 ">
      <td class="prismea-table--cell"><a class="prismea-link -hoverable" href="#">Line A1
          <div class="prismea-table--alert-text prismea-badge prismea-color -rounded -uppercase -negative">Wrong</div></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-16_export"></i></button>
          <button class="prismea-icon-button"><i class="prismea-icon-button--icon prismea-glyph-16_checkbox"></i></button>
          <button class="prismea-icon-button"><i class="prismea-icon-button--icon prismea-glyph-16_card"></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-16_export"></i></button>
          <button class="prismea-icon-button"><i class="prismea-icon-button--icon prismea-glyph-16_checkbox"></i></button>
          <button class="prismea-icon-button"><i class="prismea-icon-button--icon prismea-glyph-16_card"></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-pending">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-16_export"></i></button>
          <button class="prismea-icon-button -invisible"><i class="prismea-icon-button--icon prismea-glyph-16_checkbox"></i></button>
          <button class="prismea-icon-button -invisible"><i class="prismea-icon-button--icon prismea-glyph-16_card"></i></button>
        </div>
      </td>
    </tr>
  </tbody>
</table>
<h2>Equivalent / Stripped / First column 400 / Row disabled</h2>
<table class="prismea-table -default -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  ion--disabled">
      <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-16_export"></i></button>
          <button class="prismea-icon-button"><i class="prismea-icon-button--icon prismea-glyph-16_checkbox"></i></button>
          <button class="prismea-icon-button"><i class="prismea-icon-button--icon prismea-glyph-16_card"></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-16_export"></i></button>
          <button class="prismea-icon-button"><i class="prismea-icon-button--icon prismea-glyph-16_checkbox"></i></button>
          <button class="prismea-icon-button"><i class="prismea-icon-button--icon prismea-glyph-16_card"></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-pending">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-16_export"></i></button>
          <button class="prismea-icon-button -invisible"><i class="prismea-icon-button--icon prismea-glyph-16_checkbox"></i></button>
          <button class="prismea-icon-button -invisible"><i class="prismea-icon-button--icon prismea-glyph-16_card"></i></button>
        </div>
      </td>
    </tr>
  </tbody>
</table>
<h2>Equivalent / Stripped / First column 400 / Row selected</h2>
<table class="prismea-table -default -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 ">
      <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-16_export"></i></button>
          <button class="prismea-icon-button"><i class="prismea-icon-button--icon prismea-glyph-16_checkbox"></i></button>
          <button class="prismea-icon-button"><i class="prismea-icon-button--icon prismea-glyph-16_card"></i></button>
        </div>
      </td>
    </tr>
    <tr class="prismea-table--line ion--hoverable -selected">
      <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-16_export"></i></button>
          <button class="prismea-icon-button"><i class="prismea-icon-button--icon prismea-glyph-16_checkbox"></i></button>
          <button class="prismea-icon-button"><i class="prismea-icon-button--icon prismea-glyph-16_card"></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-pending">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-16_export"></i></button>
          <button class="prismea-icon-button -invisible"><i class="prismea-icon-button--icon prismea-glyph-16_checkbox"></i></button>
          <button class="prismea-icon-button -invisible"><i class="prismea-icon-button--icon prismea-glyph-16_card"></i></button>
        </div>
      </td>
    </tr>
  </tbody>
</table>
<h2>Equivalent / Stripped / First column 400 / Row selected / Custom Headers</h2>
<table class="prismea-table -as-plan -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-spacer -width-15"></th>
      <th class="prismea-table--cell -center -primary -color-grey1 -selected">Column B
        <div class="prismea-table--cell-selected-border -shadow-color-primary" style="height:482px"></div>
      </th>
      <th class="prismea-table--cell-spacer -width-15"></th>
      <th class="prismea-table--cell -center -secondary -color-grey1"> Column C</th>
      <th class="prismea-table--cell-spacer -width-15"></th>
      <th class="prismea-table--cell -center -tertiary -color-grey1"> Column D</th>
      <th class="prismea-table--cell-spacer -width-15"></th>
      <th class="prismea-table--cell -center -color-primary"> Column E</th>
      <th class="prismea-table--cell-spacer -width-15"></th>
      <th class="prismea-table--cell -center"></th>
    </tr>
  </thead>
  <tbody class="prismea-table--body">
    <tr class="ion--hoverable prismea-table--line ">
      <td class="prismea-table--cell"><a class="prismea-link -hoverable" href="#">Line A1</a>
      </td>
      <td class="prismea-table--cell-spacer -width-15"></td>
      <td class="prismea-table--cell -center"><span class="prismea-numeral">Line B1 numeral</span></td>
      <td class="prismea-table--cell-spacer -width-15"></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-spacer -width-15"></td>
      <td class="prismea-table--cell -center"><span class="prismea-numeral prismea-color -color-positive">Line D1</span></td>
      <td class="prismea-table--cell-spacer -width-15"></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-spacer -width-15"></td>
      <td class="prismea-table--cell -center -action--cell">
        <div>
          <button class="prismea-icon-button"><i class="prismea-icon-button--icon prismea-glyph-16_export"></i></button>
          <button class="prismea-icon-button"><i class="prismea-icon-button--icon prismea-glyph-16_checkbox"></i></button>
          <button class="prismea-icon-button"><i class="prismea-icon-button--icon prismea-glyph-16_card"></i></button>
        </div>
      </td>
    </tr>
    <tr class="prismea-table--line ion--hoverable -selected">
      <td class="prismea-table--cell">Line A2</td>
      <td class="prismea-table--cell-spacer -width-15"></td>
      <td class="prismea-table--cell -center"><span class="prismea-numeral">Line B2 numeral</span></td>
      <td class="prismea-table--cell-spacer -width-15"></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-spacer -width-15"></td>
      <td class="prismea-table--cell -center"><span class="prismea-numeral prismea-color -color-negative">Line D2</span></td>
      <td class="prismea-table--cell-spacer -width-15"></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-spacer -width-15"></td>
      <td class="prismea-table--cell -center -action--cell">
        <div>
          <button class="prismea-icon-button"><i class="prismea-icon-button--icon prismea-glyph-16_export"></i></button>
          <button class="prismea-icon-button"><i class="prismea-icon-button--icon prismea-glyph-16_checkbox"></i></button>
          <button class="prismea-icon-button"><i class="prismea-icon-button--icon prismea-glyph-16_card"></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-spacer -width-15"></td>
      <td class="prismea-table--cell -center"><span class="prismea-numeral">Line B3 numeral</span></td>
      <td class="prismea-table--cell-spacer -width-15"></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-spacer -width-15"></td>
      <td class="prismea-table--cell -center"><span class="prismea-numeral prismea-color -color-pending">Line D3</span></td>
      <td class="prismea-table--cell-spacer -width-15"></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-spacer -width-15"></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-16_export"></i></button>
          <button class="prismea-icon-button -invisible"><i class="prismea-icon-button--icon prismea-glyph-16_checkbox"></i></button>
          <button class="prismea-icon-button -invisible"><i class="prismea-icon-button--icon prismea-glyph-16_card"></i></button>
        </div>
      </td>
    </tr>
    <tr class="prismea-table--line ion--hoverable -ion--staggered-4 -ion--expanded">
      <td class="prismea-table--cell">
        <div class="prismea-horizontal-spacing-5">
          <div class="prismea-horizontal-spacing-5--slot">
            <p class="prismea-text">Line A4</p>
          </div>
          <div class="prismea-horizontal-spacing-5--slot">
            <button class="prismea-icon-button"><i class="prismea-icon-button--icon prismea-glyph-16_export"></i></button>
          </div>
        </div>
      </td>
      <td class="prismea-table--cell-spacer -width-15"></td>
      <td class="prismea-table--cell -center"><span class="prismea-numeral">Line B3 numeral</span></td>
      <td class="prismea-table--cell-spacer -width-15"></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-spacer -width-15"></td>
      <td class="prismea-table--cell -center"><span class="prismea-numeral prismea-color -color-pending">Line D3</span></td>
      <td class="prismea-table--cell-spacer -width-15"></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-spacer -width-15"></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-16_export"></i></button>
          <button class="prismea-icon-button -invisible"><i class="prismea-icon-button--icon prismea-glyph-16_checkbox"></i></button>
          <button class="prismea-icon-button -invisible"><i class="prismea-icon-button--icon prismea-glyph-16_card"></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">
            <p class="prismea-text">At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias</p>
          </div>
        </div>
      </td>
      <td class="prismea-table--cell" colspan="10">
        <div class="prismea-table--expanded-cell">
          <div class="prismea-vertical-spacing-15"></div>
        </div>
      </td>
    </tr>
  </tbody>
  <tfoot>
    <tr class="prismea-table--line ion--hoverable -ion--staggered-4">
      <td class="prismea-table--cell"></td>
      <td class="prismea-table--cell-spacer -width-15"></td>
      <td class="prismea-table--cell -center">
        <button class="prismea-button -link -pill" style="margin: 0 5px;">Button
        </button>
      </td>
      <td class="prismea-table--cell-spacer -width-15"></td>
      <td class="prismea-table--cell -center">
        <button class="prismea-button -secondary -pill" style="margin: 0 5px;">Button
        </button>
      </td>
      <td class="prismea-table--cell-spacer -width-15"></td>
      <td class="prismea-table--cell -center">
        <button class="prismea-button -tertiary -pill" style="margin: 0 5px;">Button
        </button>
      </td>
      <td class="prismea-table--cell-spacer -width-15"></td>
      <td class="prismea-table--cell -center"></td>
      <td class="prismea-table--cell-spacer -width-15"></td>
      <td class="prismea-table--cell -center"></td>
    </tr>
  </tfoot>
</table>
<h2>Equivalent / Row selected / Dropdown / Expanded</h2>
<table class="prismea-table -default -equivalent -text-sm -colored-header">
  <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 ">
      <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-16_export"></i></button>
          <button class="prismea-icon-button"><i class="prismea-icon-button--icon prismea-glyph-16_checkbox"></i></button>
          <button class="prismea-icon-button"><i class="prismea-icon-button--icon prismea-glyph-16_card"></i></button>
        </div>
      </td>
    </tr>
    <tr class="prismea-table--line ion--hoverable -selected">
      <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-16_export"></i></button>
          <button class="prismea-icon-button"><i class="prismea-icon-button--icon prismea-glyph-16_checkbox"></i></button>
          <button class="prismea-icon-button"><i class="prismea-icon-button--icon prismea-glyph-16_card"></i></button>
        </div>
      </td>
    </tr>
    <tr class="prismea-table--line ion--expanded">
      <td class="prismea-table--cell">
        <div class="prismea-table--expanded-cell"><span>At vero eos et accusamus</span></div>
      </td>
      <td class="prismea-table--cell -center">
        <div class="prismea-table--expanded-cell"><span>1023</span></div>
      </td>
      <td class="prismea-table--cell -center">
        <div class="prismea-table--expanded-cell"><span>1023</span></div>
      </td>
      <td class="prismea-table--cell -center">
        <div class="prismea-table--expanded-cell"><span>1023</span></div>
      </td>
      <td class="prismea-table--cell -center">
        <div class="prismea-table--expanded-cell"><span>1023</span></div>
      </td>
      <td class="prismea-table--cell -center">
        <div class="prismea-table--expanded-cell"><span>1023</span></div>
      </td>
    </tr>
    <tr class="prismea-table--line ion--expanded">
      <td class="prismea-table--cell">
        <div class="prismea-table--expanded-cell"><span>At vero eos et accusamus</span></div>
      </td>
      <td class="prismea-table--cell -center">
        <div class="prismea-table--expanded-cell"><span>1023</span></div>
      </td>
      <td class="prismea-table--cell -center">
        <div class="prismea-table--expanded-cell"><span>1023</span></div>
      </td>
      <td class="prismea-table--cell -center">
        <div class="prismea-table--expanded-cell"><span>1023</span></div>
      </td>
      <td class="prismea-table--cell -center">
        <div class="prismea-table--expanded-cell"><span>1023</span></div>
      </td>
      <td class="prismea-table--cell -center">
        <div class="prismea-table--expanded-cell"><span>1023</span></div>
      </td>
    </tr>
    <tr class="prismea-table--line ion--expanded">
      <td class="prismea-table--cell">
        <div class="prismea-table--expanded-cell"><span>At vero eos et accusamus</span></div>
      </td>
      <td class="prismea-table--cell -center">
        <div class="prismea-table--expanded-cell"><span>1023</span></div>
      </td>
      <td class="prismea-table--cell -center">
        <div class="prismea-table--expanded-cell"><span>1023</span></div>
      </td>
      <td class="prismea-table--cell -center">
        <div class="prismea-table--expanded-cell"><span>1023</span></div>
      </td>
      <td class="prismea-table--cell -center">
        <div class="prismea-table--expanded-cell"><span>1023</span></div>
      </td>
      <td class="prismea-table--cell -center">
        <div class="prismea-table--expanded-cell"><span>1023</span></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-pending">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-16_export"></i></button>
          <button class="prismea-icon-button -invisible"><i class="prismea-icon-button--icon prismea-glyph-16_checkbox"></i></button>
          <button class="prismea-icon-button -invisible"><i class="prismea-icon-button--icon prismea-glyph-16_card"></i></button>
        </div>
      </td>
    </tr>
  </tbody>
</table>
h2 Auto
table.prismea-table.-default.-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
      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-16_export
          button.prismea-icon-button
            i.prismea-icon-button--icon.prismea-glyph-16_checkbox
          button.prismea-icon-button
            i.prismea-icon-button--icon.prismea-glyph-16_card
    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-16_export
          button.prismea-icon-button
            i.prismea-icon-button--icon.prismea-glyph-16_checkbox
          button.prismea-icon-button
            i.prismea-icon-button--icon.prismea-glyph-16_card
    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-pending 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-16_export
          button.prismea-icon-button.-invisible
            i.prismea-icon-button--icon.prismea-glyph-16_checkbox
          button.prismea-icon-button.-invisible
            i.prismea-icon-button--icon.prismea-glyph-16_card
h2 With checkbox
table.prismea-table.-default.-text-sm
  thead.prismea-table--head
    tr.prismea-table--line
      th.prismea-table--cell.-with-checkbox
        .checkbox
          input#foo1(type='checkbox', checked)
          label(for='foo1')
            svg.icon-24.icon-color-white
              use(href='/svg/24x24/line/validate-alt.svg#validate-alt-line-24')
      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
      th.prismea-table--cell.-with-checkbox
        .checkbox
          input#foo2(type='checkbox', checked)
          label(for='foo2')
            svg.icon-24.icon-color-white
              use(href='/svg/24x24/line/validate-alt.svg#validate-alt-line-24')
      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-16_export
          button.prismea-icon-button
            i.prismea-icon-button--icon.prismea-glyph-16_checkbox
          button.prismea-icon-button
            i.prismea-icon-button--icon.prismea-glyph-16_card
    tr.prismea-table--line.ion--hoverable
      th.prismea-table--cell.-with-checkbox
        .checkbox
          input#foo3(type='checkbox', checked)
          label(for='foo3')
            svg.icon-24.icon-color-white
              use(href='/svg/24x24/line/validate-alt.svg#validate-alt-line-24')
      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-16_export
          button.prismea-icon-button
            i.prismea-icon-button--icon.prismea-glyph-16_checkbox
          button.prismea-icon-button
            i.prismea-icon-button--icon.prismea-glyph-16_card
    tr.prismea-table--line.ion--hoverable.-ion--staggered-4
      th.prismea-table--cell.-with-checkbox
        .checkbox
          input#foo4(type='checkbox', checked)
          label(for='foo4')
            svg.icon-24.icon-color-white
              use(href='/svg/24x24/line/validate-alt.svg#validate-alt-line-24')
      td.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-pending 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-16_export
          button.prismea-icon-button.-invisible
            i.prismea-icon-button--icon.prismea-glyph-16_checkbox
          button.prismea-icon-button.-invisible
            i.prismea-icon-button--icon.prismea-glyph-16_card
h2 Disabled Table
table.prismea-table.-default.-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
      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-16_export
          button.prismea-icon-button
            i.prismea-icon-button--icon.prismea-glyph-16_checkbox
          button.prismea-icon-button
            i.prismea-icon-button--icon.prismea-glyph-16_card
    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-16_export
          button.prismea-icon-button
            i.prismea-icon-button--icon.prismea-glyph-16_checkbox
          button.prismea-icon-button
            i.prismea-icon-button--icon.prismea-glyph-16_card
    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-pending 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-16_export
          button.prismea-icon-button.-invisible
            i.prismea-icon-button--icon.prismea-glyph-16_checkbox
          button.prismea-icon-button.-invisible
            i.prismea-icon-button--icon.prismea-glyph-16_card
h2 Disabled / Highlighted Line
table.prismea-table.-default.-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.ion--disabled
      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-16_export
          button.prismea-icon-button
            i.prismea-icon-button--icon.prismea-glyph-16_checkbox
          button.prismea-icon-button
            i.prismea-icon-button--icon.prismea-glyph-16_card
    tr.prismea-table--line.ion--hoverable.-highlighted
      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-16_export
          button.prismea-icon-button
            i.prismea-icon-button--icon.prismea-glyph-16_checkbox
          button.prismea-icon-button
            i.prismea-icon-button--icon.prismea-glyph-16_card
    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-pending 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-16_export
          button.prismea-icon-button.-invisible
            i.prismea-icon-button--icon.prismea-glyph-16_checkbox
          button.prismea-icon-button.-invisible
            i.prismea-icon-button--icon.prismea-glyph-16_card
h2 Equivalent / First column 400 / Row with badge
table.prismea-table.-default.-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
      td.prismea-table--cell
        a.prismea-link.-hoverable(href='#')
          | Line A1

          .prismea-table--alert-text.prismea-badge.prismea-color.-rounded.-uppercase.-negative Wrong
      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-16_export
          button.prismea-icon-button
            i.prismea-icon-button--icon.prismea-glyph-16_checkbox
          button.prismea-icon-button
            i.prismea-icon-button--icon.prismea-glyph-16_card
    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-16_export
          button.prismea-icon-button
            i.prismea-icon-button--icon.prismea-glyph-16_checkbox
          button.prismea-icon-button
            i.prismea-icon-button--icon.prismea-glyph-16_card
    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-pending 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-16_export
          button.prismea-icon-button.-invisible
            i.prismea-icon-button--icon.prismea-glyph-16_checkbox
          button.prismea-icon-button.-invisible
            i.prismea-icon-button--icon.prismea-glyph-16_card
h2 Equivalent / Stripped / First column 400 / Row disabled
table.prismea-table.-default.-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.ion--disabled
      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-16_export
          button.prismea-icon-button
            i.prismea-icon-button--icon.prismea-glyph-16_checkbox
          button.prismea-icon-button
            i.prismea-icon-button--icon.prismea-glyph-16_card
    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-16_export
          button.prismea-icon-button
            i.prismea-icon-button--icon.prismea-glyph-16_checkbox
          button.prismea-icon-button
            i.prismea-icon-button--icon.prismea-glyph-16_card
    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-pending 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-16_export
          button.prismea-icon-button.-invisible
            i.prismea-icon-button--icon.prismea-glyph-16_checkbox
          button.prismea-icon-button.-invisible
            i.prismea-icon-button--icon.prismea-glyph-16_card
h2 Equivalent / Stripped / First column 400 / Row selected
table.prismea-table.-default.-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
      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-16_export
          button.prismea-icon-button
            i.prismea-icon-button--icon.prismea-glyph-16_checkbox
          button.prismea-icon-button
            i.prismea-icon-button--icon.prismea-glyph-16_card
    tr.prismea-table--line.ion--hoverable.-selected
      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-16_export
          button.prismea-icon-button
            i.prismea-icon-button--icon.prismea-glyph-16_checkbox
          button.prismea-icon-button
            i.prismea-icon-button--icon.prismea-glyph-16_card
    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-pending 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-16_export
          button.prismea-icon-button.-invisible
            i.prismea-icon-button--icon.prismea-glyph-16_checkbox
          button.prismea-icon-button.-invisible
            i.prismea-icon-button--icon.prismea-glyph-16_card
h2 Equivalent / Stripped / First column 400 / Row selected / Custom Headers
table.prismea-table.-as-plan.-striped.-equivalent.-text-sm
  thead.prismea-table--head
    tr.prismea-table--line
      th.prismea-table--cell.-width-400 Column A
      th.prismea-table--cell-spacer.-width-15
      th.prismea-table--cell.-center.-primary.-color-grey1.-selected
        | Column B

        .prismea-table--cell-selected-border.-shadow-color-primary(style='height:482px')
      th.prismea-table--cell-spacer.-width-15
      th.prismea-table--cell.-center.-secondary.-color-grey1 Column C
      th.prismea-table--cell-spacer.-width-15
      th.prismea-table--cell.-center.-tertiary.-color-grey1 Column D
      th.prismea-table--cell-spacer.-width-15
      th.prismea-table--cell.-center.-color-primary Column E
      th.prismea-table--cell-spacer.-width-15
      th.prismea-table--cell.-center
  tbody.prismea-table--body
    tr.ion--hoverable.prismea-table--line
      td.prismea-table--cell
        a.prismea-link.-hoverable(href='#') Line A1
      td.prismea-table--cell-spacer.-width-15
      td.prismea-table--cell.-center
        span.prismea-numeral Line B1 numeral
      td.prismea-table--cell-spacer.-width-15
      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-spacer.-width-15
      td.prismea-table--cell.-center
        span.prismea-numeral.prismea-color.-color-positive Line D1
      td.prismea-table--cell-spacer.-width-15
      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-spacer.-width-15
      td.prismea-table--cell.-center.-action--cell
        div
          button.prismea-icon-button
            i.prismea-icon-button--icon.prismea-glyph-16_export
          button.prismea-icon-button
            i.prismea-icon-button--icon.prismea-glyph-16_checkbox
          button.prismea-icon-button
            i.prismea-icon-button--icon.prismea-glyph-16_card
    tr.prismea-table--line.ion--hoverable.-selected
      td.prismea-table--cell Line A2
      td.prismea-table--cell-spacer.-width-15
      td.prismea-table--cell.-center
        span.prismea-numeral Line B2 numeral
      td.prismea-table--cell-spacer.-width-15
      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-spacer.-width-15
      td.prismea-table--cell.-center
        span.prismea-numeral.prismea-color.-color-negative Line D2
      td.prismea-table--cell-spacer.-width-15
      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-spacer.-width-15
      td.prismea-table--cell.-center.-action--cell
        div
          button.prismea-icon-button
            i.prismea-icon-button--icon.prismea-glyph-16_export
          button.prismea-icon-button
            i.prismea-icon-button--icon.prismea-glyph-16_checkbox
          button.prismea-icon-button
            i.prismea-icon-button--icon.prismea-glyph-16_card
    tr.prismea-table--line.ion--hoverable.-ion--staggered-4
      td.prismea-table--cell Line A3
      td.prismea-table--cell-spacer.-width-15
      td.prismea-table--cell.-center
        span.prismea-numeral Line B3 numeral
      td.prismea-table--cell-spacer.-width-15
      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-spacer.-width-15
      td.prismea-table--cell.-center
        span.prismea-numeral.prismea-color.-color-pending Line D3
      td.prismea-table--cell-spacer.-width-15
      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-spacer.-width-15
      td.prismea-table--cell.-center.-action--cell
        div
          button.prismea-icon-button.-invisible.-selected
            i.prismea-icon-button--icon.prismea-glyph-16_export
          button.prismea-icon-button.-invisible
            i.prismea-icon-button--icon.prismea-glyph-16_checkbox
          button.prismea-icon-button.-invisible
            i.prismea-icon-button--icon.prismea-glyph-16_card
    tr.prismea-table--line.ion--hoverable.-ion--staggered-4.-ion--expanded
      td.prismea-table--cell
        .prismea-horizontal-spacing-5
          .prismea-horizontal-spacing-5--slot
            p.prismea-text Line A4
          .prismea-horizontal-spacing-5--slot
            button.prismea-icon-button
              i.prismea-icon-button--icon.prismea-glyph-16_export
      td.prismea-table--cell-spacer.-width-15
      td.prismea-table--cell.-center
        span.prismea-numeral Line B3 numeral
      td.prismea-table--cell-spacer.-width-15
      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-spacer.-width-15
      td.prismea-table--cell.-center
        span.prismea-numeral.prismea-color.-color-pending Line D3
      td.prismea-table--cell-spacer.-width-15
      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-spacer.-width-15
      td.prismea-table--cell.-center.-action--cell
        div
          button.prismea-icon-button.-invisible.-selected
            i.prismea-icon-button--icon.prismea-glyph-16_export
          button.prismea-icon-button.-invisible
            i.prismea-icon-button--icon.prismea-glyph-16_checkbox
          button.prismea-icon-button.-invisible
            i.prismea-icon-button--icon.prismea-glyph-16_card
    tr.prismea-table--line.ion--expandable
      td.prismea-table--cell
        .prismea-table--expanded-cell
          .prismea-vertical-spacing-15
            p.prismea-text At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias
      td.prismea-table--cell(colspan='10')
        .prismea-table--expanded-cell
          .prismea-vertical-spacing-15
  tfoot
    tr.prismea-table--line.ion--hoverable.-ion--staggered-4
      td.prismea-table--cell
      td.prismea-table--cell-spacer.-width-15
      td.prismea-table--cell.-center
        button.prismea-button.-link.-pill(style='margin: 0 5px;').
          Button
          
      td.prismea-table--cell-spacer.-width-15
      td.prismea-table--cell.-center
        button.prismea-button.-secondary.-pill(style='margin: 0 5px;').
          Button
          
      td.prismea-table--cell-spacer.-width-15
      td.prismea-table--cell.-center
        button.prismea-button.-tertiary.-pill(style='margin: 0 5px;').
          Button
          
      td.prismea-table--cell-spacer.-width-15
      td.prismea-table--cell.-center
      td.prismea-table--cell-spacer.-width-15
      td.prismea-table--cell.-center
h2 Equivalent / Row selected / Dropdown / Expanded
table.prismea-table.-default.-equivalent.-text-sm.-colored-header
  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
      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-16_export
          button.prismea-icon-button
            i.prismea-icon-button--icon.prismea-glyph-16_checkbox
          button.prismea-icon-button
            i.prismea-icon-button--icon.prismea-glyph-16_card
    tr.prismea-table--line.ion--hoverable.-selected
      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-16_export
          button.prismea-icon-button
            i.prismea-icon-button--icon.prismea-glyph-16_checkbox
          button.prismea-icon-button
            i.prismea-icon-button--icon.prismea-glyph-16_card
    tr.prismea-table--line.ion--expanded
      td.prismea-table--cell
        .prismea-table--expanded-cell
          span At vero eos et accusamus
      td.prismea-table--cell.-center
        .prismea-table--expanded-cell
          span 1023
      td.prismea-table--cell.-center
        .prismea-table--expanded-cell
          span 1023
      td.prismea-table--cell.-center
        .prismea-table--expanded-cell
          span 1023
      td.prismea-table--cell.-center
        .prismea-table--expanded-cell
          span 1023
      td.prismea-table--cell.-center
        .prismea-table--expanded-cell
          span 1023
    tr.prismea-table--line.ion--expanded
      td.prismea-table--cell
        .prismea-table--expanded-cell
          span At vero eos et accusamus
      td.prismea-table--cell.-center
        .prismea-table--expanded-cell
          span 1023
      td.prismea-table--cell.-center
        .prismea-table--expanded-cell
          span 1023
      td.prismea-table--cell.-center
        .prismea-table--expanded-cell
          span 1023
      td.prismea-table--cell.-center
        .prismea-table--expanded-cell
          span 1023
      td.prismea-table--cell.-center
        .prismea-table--expanded-cell
          span 1023
    tr.prismea-table--line.ion--expanded
      td.prismea-table--cell
        .prismea-table--expanded-cell
          span At vero eos et accusamus
      td.prismea-table--cell.-center
        .prismea-table--expanded-cell
          span 1023
      td.prismea-table--cell.-center
        .prismea-table--expanded-cell
          span 1023
      td.prismea-table--cell.-center
        .prismea-table--expanded-cell
          span 1023
      td.prismea-table--cell.-center
        .prismea-table--expanded-cell
          span 1023
      td.prismea-table--cell.-center
        .prismea-table--expanded-cell
          span 1023
    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-pending 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-16_export
          button.prismea-icon-button.-invisible
            i.prismea-icon-button--icon.prismea-glyph-16_checkbox
          button.prismea-icon-button.-invisible
            i.prismea-icon-button--icon.prismea-glyph-16_card

Authorizations table

This table is located in the settings of the webapp

<table class="table-authorizations">
  <thead class="prismea-table--head">
    <tr class="prismea-table--line">
      <th></th>
      <th class="prismea-table--cell -width-200 prismea-color -color-grey5 -border-right">Lecture</th>
      <th class="prismea-table--cell -width-200 prismea-color -color-grey5">Écriture</th>
      <th></th>
      <th></th>
    </tr>
    <tr class="prismea-table--line">
      <th class="prismea-table--cell -width-300"></th>
      <th class="prismea-table--cell -width-200 -border-right">
        <div class="prismea-vertical-spacing-5">
          <div class="prismea-vertical-spacing-5--slot"><span>Read movements</span></div>
          <div class="prismea-vertical-spacing-5--slot">
            <div class="prismea-text prismea-color -color-grey4 prismea-sidebar-text -min -no-transform">Ceci est une description</div>
          </div>
        </div>
      </th>
      <th class="prismea-table--cell -width-200">
        <div class="prismea-vertical-spacing-5">
          <div class="prismea-vertical-spacing-5--slot"><span>Cards</span></div>
          <div class="prismea-vertical-spacing-5--slot">
            <div class="prismea-text prismea-color -color-grey4 prismea-sidebar-text -min -no-transform">Ceci est une description</div>
          </div>
        </div>
      </th>
      <th class="prismea-table--cell -width-200">
        <div class="prismea-vertical-spacing-5">
          <div class="prismea-vertical-spacing-5--slot"><span>Transfers</span></div>
          <div class="prismea-vertical-spacing-5--slot">
            <div class="prismea-text prismea-color -color-grey4 prismea-sidebar-text -min -no-transform">Ceci est une description</div>
          </div>
        </div>
      </th>
      <th class="prismea-table--cell -width-200">
        <div class="prismea-vertical-spacing-5">
          <div class="prismea-vertical-spacing-5--slot"><span>Direct debits</span></div>
          <div class="prismea-vertical-spacing-5--slot">
            <div class="prismea-text prismea-color -color-grey4 prismea-sidebar-text -min -no-transform">Ceci est une description</div>
          </div>
        </div>
      </th>
    </tr>
  </thead>
  <tbody class="prismea-table--body">
    <!-- Administrators (title)-->
    <tr class="prismea-table--line -grey2">
      <td class="prismea-table--cell">
        <p class="prismea-text -text-bold prismea-color -color-grey5">Administrators</p>
      </td>
      <td class="prismea-table--cell -border-right"></td>
      <td class="prismea-table--cell"></td>
      <td class="prismea-table--cell"></td>
      <td class="prismea-table--cell"></td>
    </tr>
    <!-- Administrators-->
    <!-- Admin 1-->
    <tr class="prismea-table--line -no-border -user">
      <td class="prismea-table--cell -center">
        <div class="prismea-vertical-spacing-5">
          <div class="prismea-vertical-spacing-5--slot"><span>Hugo Montero</span></div>
          <div class="prismea-vertical-spacing-5--slot"><span class="prismea-text -text-xs">Administrator</span></div>
        </div>
      </td>
      <td class="prismea-table--cell -border-right">
        <div class="prismea-checkbox -disabled" style="margin-bottom: 15px;">
          <input type="checkbox" checked="checked" onclick="return false;"/>
          <label><i class="prismea-icon prismea-glyph-16_checkbox -color-light"></i>
          </label>
        </div>
      </td>
      <td class="prismea-table--cell">
        <div class="prismea-checkbox -disabled" style="margin-bottom: 15px;">
          <input type="checkbox" checked="checked" onclick="return false;"/>
          <label><i class="prismea-icon prismea-glyph-16_checkbox -color-light"></i>
          </label>
        </div>
      </td>
      <td class="prismea-table--cell">
        <div class="prismea-checkbox -disabled" style="margin-bottom: 15px;">
          <input type="checkbox" checked="checked" onclick="return false;"/>
          <label><i class="prismea-icon prismea-glyph-16_checkbox -color-light"></i>
          </label>
        </div>
      </td>
      <td class="prismea-table--cell">
        <div class="prismea-checkbox -disabled" style="margin-bottom: 15px;">
          <input type="checkbox" checked="checked" onclick="return false;"/>
          <label><i class="prismea-icon prismea-glyph-16_checkbox -color-light"></i>
          </label>
        </div>
      </td>
    </tr>
    <!-- Admin 2-->
    <tr class="prismea-table--line -no-border -user">
      <td class="prismea-table--cell -center">
        <div class="prismea-vertical-spacing-5">
          <div class="prismea-vertical-spacing-5--slot"><span>Jon Slow</span></div>
          <div class="prismea-vertical-spacing-5--slot"><span class="prismea-text -text-xs">Co-Administrator</span></div>
        </div>
      </td>
      <td class="prismea-table--cell -border-right">
        <div class="prismea-checkbox -disabled" style="margin-bottom: 15px;">
          <input type="checkbox" checked="checked" onclick="return false;"/>
          <label><i class="prismea-icon prismea-glyph-16_checkbox -color-light"></i>
          </label>
        </div>
      </td>
      <td class="prismea-table--cell">
        <div class="prismea-checkbox -disabled" style="margin-bottom: 15px;">
          <input type="checkbox" checked="checked" onclick="return false;"/>
          <label><i class="prismea-icon prismea-glyph-16_checkbox -color-light"></i>
          </label>
        </div>
      </td>
      <td class="prismea-table--cell">
        <div class="prismea-checkbox -disabled" style="margin-bottom: 15px;">
          <input type="checkbox" checked="checked" onclick="return false;"/>
          <label><i class="prismea-icon prismea-glyph-16_checkbox -color-light"></i>
          </label>
        </div>
      </td>
      <td class="prismea-table--cell">
        <div class="prismea-checkbox -disabled" style="margin-bottom: 15px;">
          <input type="checkbox" checked="checked" onclick="return false;"/>
          <label><i class="prismea-icon prismea-glyph-16_checkbox -color-light"></i>
          </label>
        </div>
      </td>
    </tr>
    <!-- Collaborators (title)-->
    <tr class="prismea-table--line -grey2">
      <td class="prismea-table--cell">
        <p class="prismea-text -text-bold prismea-color -color-grey5">Collaborators</p>
      </td>
      <td class="prismea-table--cell -border-right"></td>
      <td class="prismea-table--cell"></td>
      <td class="prismea-table--cell"></td>
      <td class="prismea-table--cell"></td>
    </tr>
    <!-- Collaborators-->
    <!-- Collab 1-->
    <tr class="prismea-table--line -no-border -user">
      <td class="prismea-table--cell -center">
        <div class="prismea-vertical-spacing-5">
          <div class="prismea-vertical-spacing-5--slot"><span>Alfred Grims</span></div>
          <div class="prismea-vertical-spacing-5--slot"><span class="prismea-text -text-xs">Collaborator</span></div>
        </div>
      </td>
      <td class="prismea-table--cell -border-right">
        <div class="prismea-checkbox" style="margin-bottom: 15px;">
          <input type="checkbox" id="2324" checked="checked" onclick=""/>
          <label for="2324"><i class="prismea-icon prismea-glyph-16_checkbox -color-light"></i>
          </label>
        </div>
      </td>
      <td class="prismea-table--cell">
        <div class="prismea-checkbox" style="margin-bottom: 15px;">
          <input type="checkbox" id="353" checked="checked" onclick=""/>
          <label for="353"><i class="prismea-icon prismea-glyph-16_checkbox -color-light"></i>
          </label>
        </div>
      </td>
      <td class="prismea-table--cell">
        <div class="prismea-checkbox" style="margin-bottom: 15px;">
          <input type="checkbox" id="4634" onclick=""/>
          <label for="4634"><i class="prismea-icon prismea-glyph-16_checkbox -color-light"></i>
          </label>
        </div>
      </td>
      <td class="prismea-table--cell">
        <div class="prismea-checkbox" style="margin-bottom: 15px;">
          <input type="checkbox" id="5443" onclick=""/>
          <label for="5443"><i class="prismea-icon prismea-glyph-16_checkbox -color-light"></i>
          </label>
        </div>
      </td>
    </tr>
    <!-- Collab 2-->
    <tr class="prismea-table--line -no-border -user">
      <td class="prismea-table--cell -center">
        <div class="prismea-vertical-spacing-5">
          <div class="prismea-vertical-spacing-5--slot"><span>Shaun Morris</span></div>
          <div class="prismea-vertical-spacing-5--slot"><span class="prismea-text -text-xs">Collaborator</span></div>
        </div>
      </td>
      <td class="prismea-table--cell -border-right">
        <div class="prismea-checkbox" style="margin-bottom: 15px;">
          <input type="checkbox" id="8686" checked="checked" onclick=""/>
          <label for="8686"><i class="prismea-icon prismea-glyph-16_checkbox -color-light"></i>
          </label>
        </div>
      </td>
      <td class="prismea-table--cell">
        <div class="prismea-checkbox" style="margin-bottom: 15px;">
          <input type="checkbox" id="57" onclick=""/>
          <label for="57"><i class="prismea-icon prismea-glyph-16_checkbox -color-light"></i>
          </label>
        </div>
      </td>
      <td class="prismea-table--cell">
        <div class="prismea-checkbox" style="margin-bottom: 15px;">
          <input type="checkbox" id="976" checked="checked" onclick=""/>
          <label for="976"><i class="prismea-icon prismea-glyph-16_checkbox -color-light"></i>
          </label>
        </div>
      </td>
      <td class="prismea-table--cell">
        <div class="prismea-checkbox" style="margin-bottom: 15px;">
          <input type="checkbox" id="3246" onclick=""/>
          <label for="3246"><i class="prismea-icon prismea-glyph-16_checkbox -color-light"></i>
          </label>
        </div>
      </td>
    </tr>
    <!-- Collab 2-->
    <tr class="prismea-table--line -no-border -user">
      <td class="prismea-table--cell -center">
        <div class="prismea-vertical-spacing-5">
          <div class="prismea-vertical-spacing-5--slot"><span>William Nobody</span></div>
          <div class="prismea-vertical-spacing-5--slot"><span class="prismea-text -text-xs">Collaborator</span></div>
        </div>
      </td>
      <td class="prismea-table--cell -border-right">
        <div class="prismea-checkbox" style="margin-bottom: 15px;">
          <input type="checkbox" id="908" onclick=""/>
          <label for="908"><i class="prismea-icon prismea-glyph-16_checkbox -color-light"></i>
          </label>
        </div>
      </td>
      <td class="prismea-table--cell">
        <div class="prismea-checkbox" style="margin-bottom: 15px;">
          <input type="checkbox" id="956" onclick=""/>
          <label for="956"><i class="prismea-icon prismea-glyph-16_checkbox -color-light"></i>
          </label>
        </div>
      </td>
      <td class="prismea-table--cell">
        <div class="prismea-checkbox" style="margin-bottom: 15px;">
          <input type="checkbox" id="46" onclick=""/>
          <label for="46"><i class="prismea-icon prismea-glyph-16_checkbox -color-light"></i>
          </label>
        </div>
      </td>
      <td class="prismea-table--cell">
        <div class="prismea-checkbox" style="margin-bottom: 15px;">
          <input type="checkbox" id="784" onclick=""/>
          <label for="784"><i class="prismea-icon prismea-glyph-16_checkbox -color-light"></i>
          </label>
        </div>
      </td>
    </tr>
  </tbody>
</table>
table.table-authorizations
  thead.prismea-table--head
    tr.prismea-table--line
      th
      th.prismea-table--cell.-width-200.prismea-color.-color-grey5.-border-right Lecture
      th.prismea-table--cell.-width-200.prismea-color.-color-grey5 Écriture
      th
      th
    tr.prismea-table--line
      th.prismea-table--cell.-width-300
      th.prismea-table--cell.-width-200.-border-right
        .prismea-vertical-spacing-5
          .prismea-vertical-spacing-5--slot
            span Read movements
          .prismea-vertical-spacing-5--slot
            .prismea-text.prismea-color.-color-grey4.prismea-sidebar-text.-min.-no-transform Ceci est une description
      th.prismea-table--cell.-width-200
        .prismea-vertical-spacing-5
          .prismea-vertical-spacing-5--slot
            span Cards
          .prismea-vertical-spacing-5--slot
            .prismea-text.prismea-color.-color-grey4.prismea-sidebar-text.-min.-no-transform Ceci est une description
      th.prismea-table--cell.-width-200
        .prismea-vertical-spacing-5
          .prismea-vertical-spacing-5--slot
            span Transfers
          .prismea-vertical-spacing-5--slot
            .prismea-text.prismea-color.-color-grey4.prismea-sidebar-text.-min.-no-transform Ceci est une description
      th.prismea-table--cell.-width-200
        .prismea-vertical-spacing-5
          .prismea-vertical-spacing-5--slot
            span Direct debits
          .prismea-vertical-spacing-5--slot
            .prismea-text.prismea-color.-color-grey4.prismea-sidebar-text.-min.-no-transform Ceci est une description
  tbody.prismea-table--body
    //  Administrators (title)
    tr.prismea-table--line.-grey2
      td.prismea-table--cell
        p.prismea-text.-text-bold.prismea-color.-color-grey5 Administrators
      td.prismea-table--cell.-border-right
      td.prismea-table--cell
      td.prismea-table--cell
      td.prismea-table--cell
    //  Administrators
    //  Admin 1
    tr.prismea-table--line.-no-border.-user
      td.prismea-table--cell.-center
        .prismea-vertical-spacing-5
          .prismea-vertical-spacing-5--slot
            span Hugo Montero
          .prismea-vertical-spacing-5--slot
            span.prismea-text.-text-xs Administrator
      td.prismea-table--cell.-border-right
        .prismea-checkbox.-disabled(style='margin-bottom: 15px;')
          input(type='checkbox', checked, onclick='return false;')
          label
            i.prismea-icon.prismea-glyph-16_checkbox.-color-light
      td.prismea-table--cell
        .prismea-checkbox.-disabled(style='margin-bottom: 15px;')
          input(type='checkbox', checked, onclick='return false;')
          label
            i.prismea-icon.prismea-glyph-16_checkbox.-color-light
      td.prismea-table--cell
        .prismea-checkbox.-disabled(style='margin-bottom: 15px;')
          input(type='checkbox', checked, onclick='return false;')
          label
            i.prismea-icon.prismea-glyph-16_checkbox.-color-light
      td.prismea-table--cell
        .prismea-checkbox.-disabled(style='margin-bottom: 15px;')
          input(type='checkbox', checked, onclick='return false;')
          label
            i.prismea-icon.prismea-glyph-16_checkbox.-color-light
    //  Admin 2
    tr.prismea-table--line.-no-border.-user
      td.prismea-table--cell.-center
        .prismea-vertical-spacing-5
          .prismea-vertical-spacing-5--slot
            span Jon Slow
          .prismea-vertical-spacing-5--slot
            span.prismea-text.-text-xs Co-Administrator
      td.prismea-table--cell.-border-right
        .prismea-checkbox.-disabled(style='margin-bottom: 15px;')
          input(type='checkbox', checked, onclick='return false;')
          label
            i.prismea-icon.prismea-glyph-16_checkbox.-color-light
      td.prismea-table--cell
        .prismea-checkbox.-disabled(style='margin-bottom: 15px;')
          input(type='checkbox', checked, onclick='return false;')
          label
            i.prismea-icon.prismea-glyph-16_checkbox.-color-light
      td.prismea-table--cell
        .prismea-checkbox.-disabled(style='margin-bottom: 15px;')
          input(type='checkbox', checked, onclick='return false;')
          label
            i.prismea-icon.prismea-glyph-16_checkbox.-color-light
      td.prismea-table--cell
        .prismea-checkbox.-disabled(style='margin-bottom: 15px;')
          input(type='checkbox', checked, onclick='return false;')
          label
            i.prismea-icon.prismea-glyph-16_checkbox.-color-light
    //  Collaborators (title)
    tr.prismea-table--line.-grey2
      td.prismea-table--cell
        p.prismea-text.-text-bold.prismea-color.-color-grey5 Collaborators
      td.prismea-table--cell.-border-right
      td.prismea-table--cell
      td.prismea-table--cell
      td.prismea-table--cell
    //  Collaborators
    //  Collab 1
    tr.prismea-table--line.-no-border.-user
      td.prismea-table--cell.-center
        .prismea-vertical-spacing-5
          .prismea-vertical-spacing-5--slot
            span Alfred Grims
          .prismea-vertical-spacing-5--slot
            span.prismea-text.-text-xs Collaborator
      td.prismea-table--cell.-border-right
        .prismea-checkbox(style='margin-bottom: 15px;')
          input#2324(type='checkbox', checked)
          label(for='2324')
            i.prismea-icon.prismea-glyph-16_checkbox.-color-light
      td.prismea-table--cell
        .prismea-checkbox(style='margin-bottom: 15px;')
          input#353(type='checkbox', checked)
          label(for='353')
            i.prismea-icon.prismea-glyph-16_checkbox.-color-light
      td.prismea-table--cell
        .prismea-checkbox(style='margin-bottom: 15px;')
          input#4634(type='checkbox')
          label(for='4634')
            i.prismea-icon.prismea-glyph-16_checkbox.-color-light
      td.prismea-table--cell
        .prismea-checkbox(style='margin-bottom: 15px;')
          input#5443(type='checkbox')
          label(for='5443')
            i.prismea-icon.prismea-glyph-16_checkbox.-color-light
    //  Collab 2
    tr.prismea-table--line.-no-border.-user
      td.prismea-table--cell.-center
        .prismea-vertical-spacing-5
          .prismea-vertical-spacing-5--slot
            span Shaun Morris
          .prismea-vertical-spacing-5--slot
            span.prismea-text.-text-xs Collaborator
      td.prismea-table--cell.-border-right
        .prismea-checkbox(style='margin-bottom: 15px;')
          input#8686(type='checkbox', checked)
          label(for='8686')
            i.prismea-icon.prismea-glyph-16_checkbox.-color-light
      td.prismea-table--cell
        .prismea-checkbox(style='margin-bottom: 15px;')
          input#57(type='checkbox')
          label(for='57')
            i.prismea-icon.prismea-glyph-16_checkbox.-color-light
      td.prismea-table--cell
        .prismea-checkbox(style='margin-bottom: 15px;')
          input#976(type='checkbox', checked)
          label(for='976')
            i.prismea-icon.prismea-glyph-16_checkbox.-color-light
      td.prismea-table--cell
        .prismea-checkbox(style='margin-bottom: 15px;')
          input#3246(type='checkbox')
          label(for='3246')
            i.prismea-icon.prismea-glyph-16_checkbox.-color-light
    //  Collab 2
    tr.prismea-table--line.-no-border.-user
      td.prismea-table--cell.-center
        .prismea-vertical-spacing-5
          .prismea-vertical-spacing-5--slot
            span William Nobody
          .prismea-vertical-spacing-5--slot
            span.prismea-text.-text-xs Collaborator
      td.prismea-table--cell.-border-right
        .prismea-checkbox(style='margin-bottom: 15px;')
          input#908(type='checkbox')
          label(for='908')
            i.prismea-icon.prismea-glyph-16_checkbox.-color-light
      td.prismea-table--cell
        .prismea-checkbox(style='margin-bottom: 15px;')
          input#956(type='checkbox')
          label(for='956')
            i.prismea-icon.prismea-glyph-16_checkbox.-color-light
      td.prismea-table--cell
        .prismea-checkbox(style='margin-bottom: 15px;')
          input#46(type='checkbox')
          label(for='46')
            i.prismea-icon.prismea-glyph-16_checkbox.-color-light
      td.prismea-table--cell
        .prismea-checkbox(style='margin-bottom: 15px;')
          input#784(type='checkbox')
          label(for='784')
            i.prismea-icon.prismea-glyph-16_checkbox.-color-light

Group of categories cell

This table cell is located in the categories chart in the dashboard of the webapp

<div class="category-table">
  <div class="category-table-row">
    <div class="category-table-cell">
      <div class="prismea-horizontal-spacing-10 -middle">
        <div class="prismea-horizontal-spacing-10--slot">
          <div class="checkbox checkbox-color-orange--400">
            <input type="checkbox" checked="checked"/>
            <label>
              <svg class="icon-24 icon-color-white">
                <use href="/svg/24x24/line/validate-alt.svg#validate-alt-line-24"></use>
              </svg>
            </label>
          </div>
        </div>
        <div class="prismea-horizontal-spacing-10--slot">
          <svg class="icon-24 icon-color-orange--400">
            <use href="/svg/24x24/line/shop.svg#shop-line-24"></use>
          </svg>
        </div>
        <div class="prismea-horizontal-spacing-10--slot">
          <p class="prismea-text prismea-color color-orange--400">Group of categories label</p>
        </div>
      </div>
    </div>
    <div class="category-table-cell -justify-end -middle">
      <p class="prismea-numeral">8 647,00 €</p>
    </div>
    <div class="category-table-cell -justify-end -middle">
      <p class="prismea-numeral">8 647,00 €</p>
    </div>
  </div>
  <div class="category-table-details">
    <div class="category-table-details-row">
      <div></div>
      <div class="category-table-cell">
        <div class="prismea-horizontal-spacing-10">
          <div class="prismea-horizontal-spacing-10--slot"><i class="prismea-icon prismea-color prismea-glyph-24_outgoing-direct-debit" style="color:orange--400;"></i></div>
          <div class="prismea-horizontal-spacing-10--slot">
            <p class="prismea-text prismea-color -color-grey5">Category label</p>
          </div>
        </div>
      </div>
      <div class="category-table-cell -justify-end -middle">
        <p class="prismea-numeral prismea-color -color-grey5">8 647,00 €</p>
      </div>
      <div class="category-table-cell -justify-end -middle">
        <p class="prismea-numeral prismea-color -color-grey5">8 647,00 €</p>
      </div>
    </div>
    <div class="category-table-details-row">
      <div></div>
      <div class="category-table-cell">
        <div class="prismea-horizontal-spacing-10">
          <div class="prismea-horizontal-spacing-10--slot"><i class="prismea-icon prismea-color prismea-glyph-24_outgoing-direct-debit" style="color:orange--400;"></i></div>
          <div class="prismea-horizontal-spacing-10--slot">
            <p class="prismea-text prismea-color -color-grey5">Category label</p>
          </div>
        </div>
      </div>
      <div class="category-table-cell -justify-end -middle">
        <p class="prismea-numeral prismea-color -color-grey5">8 647,00 €</p>
      </div>
      <div class="category-table-cell -justify-end -middle">
        <p class="prismea-numeral prismea-color -color-grey5">8 647,00 €</p>
      </div>
    </div>
  </div>
</div>
.category-table
  .category-table-row
    .category-table-cell
      .prismea-horizontal-spacing-10.-middle
        .prismea-horizontal-spacing-10--slot
          .checkbox.checkbox-color-orange--400
            input(type='checkbox', checked)
            label
              svg.icon-24.icon-color-white
                use(href='/svg/24x24/line/validate-alt.svg#validate-alt-line-24')
        .prismea-horizontal-spacing-10--slot
          svg.icon-24.icon-color-orange--400
            use(href='/svg/24x24/line/shop.svg#shop-line-24')
        .prismea-horizontal-spacing-10--slot
          p.prismea-text.prismea-color.color-orange--400 Group of categories label
    .category-table-cell.-justify-end.-middle
      p.prismea-numeral 8 647,00 €
    .category-table-cell.-justify-end.-middle
      p.prismea-numeral 8 647,00 €
  .category-table-details
    .category-table-details-row
      div
      .category-table-cell
        .prismea-horizontal-spacing-10
          .prismea-horizontal-spacing-10--slot
            i.prismea-icon.prismea-color.prismea-glyph-24_outgoing-direct-debit(style='color:orange--400;')
          .prismea-horizontal-spacing-10--slot
            p.prismea-text.prismea-color.-color-grey5 Category label
      .category-table-cell.-justify-end.-middle
        p.prismea-numeral.prismea-color.-color-grey5 8 647,00 €
      .category-table-cell.-justify-end.-middle
        p.prismea-numeral.prismea-color.-color-grey5 8 647,00 €
    .category-table-details-row
      div
      .category-table-cell
        .prismea-horizontal-spacing-10
          .prismea-horizontal-spacing-10--slot
            i.prismea-icon.prismea-color.prismea-glyph-24_outgoing-direct-debit(style='color:orange--400;')
          .prismea-horizontal-spacing-10--slot
            p.prismea-text.prismea-color.-color-grey5 Category label
      .category-table-cell.-justify-end.-middle
        p.prismea-numeral.prismea-color.-color-grey5 8 647,00 €
      .category-table-cell.-justify-end.-middle
        p.prismea-numeral.prismea-color.-color-grey5 8 647,00 €

Categories table

This table is located in the dashboard of the webapp

<div class="prismea-categories-filters-table">
  <div class="categories-filters-table-head">
    <div class="categories-filters-table-cell -middle">
      <p class="prismea-text -text-bold -uppercase">Catégories</p>
    </div>
    <div class="categories-filters-table-cell -justify-end">
      <p class="prismea-text -text-bold -uppercase">12 derniers mois</p>
    </div>
    <div class="categories-filters-table-cell -justify-end">
      <div class="prismea-horizontal-spacing-5 -middle">
        <div class="prismea-horizontal-spacing-5--slot"><i class="prismea-glyph-12_caret-down"></i></div>
        <div class="prismea-horizontal-spacing-5--slot">
          <p class="prismea-text -text-bold -uppercase">Nov. 2020</p>
        </div>
      </div>
    </div>
  </div>
  <div class="categories-filters-table-body">
    <div class="category-table">
      <div class="category-table-row">
        <div class="category-table-cell">
          <div class="prismea-horizontal-spacing-10 -middle">
            <div class="prismea-horizontal-spacing-10--slot">
              <div class="checkbox checkbox-color-purple--400">
                <input type="checkbox" checked="checked"/>
                <label>
                  <svg class="icon-24 icon-color-white">
                    <use href="/svg/24x24/line/validate-alt.svg#validate-alt-line-24"></use>
                  </svg>
                </label>
              </div>
            </div>
            <div class="prismea-horizontal-spacing-10--slot">
              <svg class="icon-24 icon-color-purple--400">
                <use href="/svg/24x24/line/shop.svg#shop-line-24"></use>
              </svg>
            </div>
            <div class="prismea-horizontal-spacing-10--slot">
              <p class="prismea-text prismea-color color-purple--400">Group of categories label</p>
            </div>
          </div>
        </div>
        <div class="category-table-cell -justify-end -middle">
          <p class="prismea-numeral">8 647,00 €</p>
        </div>
        <div class="category-table-cell -justify-end -middle">
          <p class="prismea-numeral">8 647,00 €</p>
        </div>
      </div>
      <div class="category-table-details">
        <div class="category-table-details-row">
          <div></div>
          <div class="category-table-cell">
            <div class="prismea-horizontal-spacing-10">
              <div class="prismea-horizontal-spacing-10--slot"><i class="prismea-icon prismea-color prismea-glyph-24_outgoing-direct-debit" style="color:purple--400;"></i></div>
              <div class="prismea-horizontal-spacing-10--slot">
                <p class="prismea-text prismea-color -color-grey5">Category label</p>
              </div>
            </div>
          </div>
          <div class="category-table-cell -justify-end -middle">
            <p class="prismea-numeral prismea-color -color-grey5">8 647,00 €</p>
          </div>
          <div class="category-table-cell -justify-end -middle">
            <p class="prismea-numeral prismea-color -color-grey5">8 647,00 €</p>
          </div>
        </div>
        <div class="category-table-details-row">
          <div></div>
          <div class="category-table-cell">
            <div class="prismea-horizontal-spacing-10">
              <div class="prismea-horizontal-spacing-10--slot"><i class="prismea-icon prismea-color prismea-glyph-24_outgoing-direct-debit" style="color:purple--400;"></i></div>
              <div class="prismea-horizontal-spacing-10--slot">
                <p class="prismea-text prismea-color -color-grey5">Category label</p>
              </div>
            </div>
          </div>
          <div class="category-table-cell -justify-end -middle">
            <p class="prismea-numeral prismea-color -color-grey5">8 647,00 €</p>
          </div>
          <div class="category-table-cell -justify-end -middle">
            <p class="prismea-numeral prismea-color -color-grey5">8 647,00 €</p>
          </div>
        </div>
      </div>
    </div>
    <div class="category-table">
      <div class="category-table-row">
        <div class="category-table-cell">
          <div class="prismea-horizontal-spacing-10 -middle">
            <div class="prismea-horizontal-spacing-10--slot">
              <div class="checkbox checkbox-color-purple--400">
                <input type="checkbox" checked="checked"/>
                <label>
                  <svg class="icon-24 icon-color-white">
                    <use href="/svg/24x24/line/validate-alt.svg#validate-alt-line-24"></use>
                  </svg>
                </label>
              </div>
            </div>
            <div class="prismea-horizontal-spacing-10--slot">
              <svg class="icon-24 icon-color-purple--400">
                <use href="/svg/24x24/line/shop.svg#shop-line-24"></use>
              </svg>
            </div>
            <div class="prismea-horizontal-spacing-10--slot">
              <p class="prismea-text prismea-color color-purple--400">Group of categories label</p>
            </div>
          </div>
        </div>
        <div class="category-table-cell -justify-end -middle">
          <p class="prismea-numeral">8 647,00 €</p>
        </div>
        <div class="category-table-cell -justify-end -middle">
          <p class="prismea-numeral">8 647,00 €</p>
        </div>
      </div>
      <div class="category-table-details">
        <div class="category-table-details-row">
          <div></div>
          <div class="category-table-cell">
            <div class="prismea-horizontal-spacing-10">
              <div class="prismea-horizontal-spacing-10--slot"><i class="prismea-icon prismea-color prismea-glyph-24_outgoing-direct-debit" style="color:purple--400;"></i></div>
              <div class="prismea-horizontal-spacing-10--slot">
                <p class="prismea-text prismea-color -color-grey5">Category label</p>
              </div>
            </div>
          </div>
          <div class="category-table-cell -justify-end -middle">
            <p class="prismea-numeral prismea-color -color-grey5">8 647,00 €</p>
          </div>
          <div class="category-table-cell -justify-end -middle">
            <p class="prismea-numeral prismea-color -color-grey5">8 647,00 €</p>
          </div>
        </div>
        <div class="category-table-details-row">
          <div></div>
          <div class="category-table-cell">
            <div class="prismea-horizontal-spacing-10">
              <div class="prismea-horizontal-spacing-10--slot"><i class="prismea-icon prismea-color prismea-glyph-24_outgoing-direct-debit" style="color:purple--400;"></i></div>
              <div class="prismea-horizontal-spacing-10--slot">
                <p class="prismea-text prismea-color -color-grey5">Category label</p>
              </div>
            </div>
          </div>
          <div class="category-table-cell -justify-end -middle">
            <p class="prismea-numeral prismea-color -color-grey5">8 647,00 €</p>
          </div>
          <div class="category-table-cell -justify-end -middle">
            <p class="prismea-numeral prismea-color -color-grey5">8 647,00 €</p>
          </div>
        </div>
        <div class="category-table-details-row">
          <div></div>
          <div class="category-table-cell">
            <div class="prismea-horizontal-spacing-10">
              <div class="prismea-horizontal-spacing-10--slot"><i class="prismea-icon prismea-color prismea-glyph-24_outgoing-direct-debit" style="color:purple--400;"></i></div>
              <div class="prismea-horizontal-spacing-10--slot">
                <p class="prismea-text prismea-color -color-grey5">Category label</p>
              </div>
            </div>
          </div>
          <div class="category-table-cell -justify-end -middle">
            <p class="prismea-numeral prismea-color -color-grey5">8 647,00 €</p>
          </div>
          <div class="category-table-cell -justify-end -middle">
            <p class="prismea-numeral prismea-color -color-grey5">8 647,00 €</p>
          </div>
        </div>
        <div class="category-table-details-row">
          <div></div>
          <div class="category-table-cell">
            <div class="prismea-horizontal-spacing-10">
              <div class="prismea-horizontal-spacing-10--slot"><i class="prismea-icon prismea-color prismea-glyph-24_outgoing-direct-debit" style="color:purple--400;"></i></div>
              <div class="prismea-horizontal-spacing-10--slot">
                <p class="prismea-text prismea-color -color-grey5">Category label</p>
              </div>
            </div>
          </div>
          <div class="category-table-cell -justify-end -middle">
            <p class="prismea-numeral prismea-color -color-grey5">8 647,00 €</p>
          </div>
          <div class="category-table-cell -justify-end -middle">
            <p class="prismea-numeral prismea-color -color-grey5">8 647,00 €</p>
          </div>
        </div>
      </div>
    </div>
    <div class="category-table">
      <div class="category-table-row">
        <div class="category-table-cell">
          <div class="prismea-horizontal-spacing-10 -middle">
            <div class="prismea-horizontal-spacing-10--slot">
              <div class="checkbox checkbox-color-orange--400">
                <input type="checkbox" checked="checked"/>
                <label>
                  <svg class="icon-24 icon-color-white">
                    <use href="/svg/24x24/line/validate-alt.svg#validate-alt-line-24"></use>
                  </svg>
                </label>
              </div>
            </div>
            <div class="prismea-horizontal-spacing-10--slot">
              <svg class="icon-24 icon-color-orange--400">
                <use href="/svg/24x24/line/shop.svg#shop-line-24"></use>
              </svg>
            </div>
            <div class="prismea-horizontal-spacing-10--slot">
              <p class="prismea-text prismea-color color-orange--400">Group of categories label</p>
            </div>
          </div>
        </div>
        <div class="category-table-cell -justify-end -middle">
          <p class="prismea-numeral">8 647,00 €</p>
        </div>
        <div class="category-table-cell -justify-end -middle">
          <p class="prismea-numeral">8 647,00 €</p>
        </div>
      </div>
    </div>
  </div>
  <div class="categories-filters-table-footer">
    <div></div>
    <div class="categories-filters-table-cell">
      <p class="prismea-text -text-bold -uppercase">Total sorties</p>
    </div>
    <div class="categories-filters-table-cell -justify-end -middle">
      <p class="prismea-numeral">8 647,00 €</p>
    </div>
    <div class="categories-filters-table-cell -justify-end -middle">
      <p class="prismea-numeral">8 647,00 €</p>
    </div>
  </div>
</div>
.prismea-categories-filters-table
  .categories-filters-table-head
    .categories-filters-table-cell.-middle
      p.prismea-text.-text-bold.-uppercase Catégories
    .categories-filters-table-cell.-justify-end
      p.prismea-text.-text-bold.-uppercase 12 derniers mois
    .categories-filters-table-cell.-justify-end
      .prismea-horizontal-spacing-5.-middle
        .prismea-horizontal-spacing-5--slot
          i.prismea-glyph-12_caret-down
        .prismea-horizontal-spacing-5--slot
          p.prismea-text.-text-bold.-uppercase Nov. 2020
  .categories-filters-table-body
    .category-table
      .category-table-row
        .category-table-cell
          .prismea-horizontal-spacing-10.-middle
            .prismea-horizontal-spacing-10--slot
              .checkbox.checkbox-color-purple--400
                input(type='checkbox', checked)
                label
                  svg.icon-24.icon-color-white
                    use(href='/svg/24x24/line/validate-alt.svg#validate-alt-line-24')
            .prismea-horizontal-spacing-10--slot
              svg.icon-24.icon-color-purple--400
                use(href='/svg/24x24/line/shop.svg#shop-line-24')
            .prismea-horizontal-spacing-10--slot
              p.prismea-text.prismea-color.color-purple--400 Group of categories label
        .category-table-cell.-justify-end.-middle
          p.prismea-numeral 8 647,00 €
        .category-table-cell.-justify-end.-middle
          p.prismea-numeral 8 647,00 €
      .category-table-details
        .category-table-details-row
          div
          .category-table-cell
            .prismea-horizontal-spacing-10
              .prismea-horizontal-spacing-10--slot
                i.prismea-icon.prismea-color.prismea-glyph-24_outgoing-direct-debit(style='color:purple--400;')
              .prismea-horizontal-spacing-10--slot
                p.prismea-text.prismea-color.-color-grey5 Category label
          .category-table-cell.-justify-end.-middle
            p.prismea-numeral.prismea-color.-color-grey5 8 647,00 €
          .category-table-cell.-justify-end.-middle
            p.prismea-numeral.prismea-color.-color-grey5 8 647,00 €
        .category-table-details-row
          div
          .category-table-cell
            .prismea-horizontal-spacing-10
              .prismea-horizontal-spacing-10--slot
                i.prismea-icon.prismea-color.prismea-glyph-24_outgoing-direct-debit(style='color:purple--400;')
              .prismea-horizontal-spacing-10--slot
                p.prismea-text.prismea-color.-color-grey5 Category label
          .category-table-cell.-justify-end.-middle
            p.prismea-numeral.prismea-color.-color-grey5 8 647,00 €
          .category-table-cell.-justify-end.-middle
            p.prismea-numeral.prismea-color.-color-grey5 8 647,00 €
    .category-table
      .category-table-row
        .category-table-cell
          .prismea-horizontal-spacing-10.-middle
            .prismea-horizontal-spacing-10--slot
              .checkbox.checkbox-color-purple--400
                input(type='checkbox', checked)
                label
                  svg.icon-24.icon-color-white
                    use(href='/svg/24x24/line/validate-alt.svg#validate-alt-line-24')
            .prismea-horizontal-spacing-10--slot
              svg.icon-24.icon-color-purple--400
                use(href='/svg/24x24/line/shop.svg#shop-line-24')
            .prismea-horizontal-spacing-10--slot
              p.prismea-text.prismea-color.color-purple--400 Group of categories label
        .category-table-cell.-justify-end.-middle
          p.prismea-numeral 8 647,00 €
        .category-table-cell.-justify-end.-middle
          p.prismea-numeral 8 647,00 €
      .category-table-details
        .category-table-details-row
          div
          .category-table-cell
            .prismea-horizontal-spacing-10
              .prismea-horizontal-spacing-10--slot
                i.prismea-icon.prismea-color.prismea-glyph-24_outgoing-direct-debit(style='color:purple--400;')
              .prismea-horizontal-spacing-10--slot
                p.prismea-text.prismea-color.-color-grey5 Category label
          .category-table-cell.-justify-end.-middle
            p.prismea-numeral.prismea-color.-color-grey5 8 647,00 €
          .category-table-cell.-justify-end.-middle
            p.prismea-numeral.prismea-color.-color-grey5 8 647,00 €
        .category-table-details-row
          div
          .category-table-cell
            .prismea-horizontal-spacing-10
              .prismea-horizontal-spacing-10--slot
                i.prismea-icon.prismea-color.prismea-glyph-24_outgoing-direct-debit(style='color:purple--400;')
              .prismea-horizontal-spacing-10--slot
                p.prismea-text.prismea-color.-color-grey5 Category label
          .category-table-cell.-justify-end.-middle
            p.prismea-numeral.prismea-color.-color-grey5 8 647,00 €
          .category-table-cell.-justify-end.-middle
            p.prismea-numeral.prismea-color.-color-grey5 8 647,00 €
        .category-table-details-row
          div
          .category-table-cell
            .prismea-horizontal-spacing-10
              .prismea-horizontal-spacing-10--slot
                i.prismea-icon.prismea-color.prismea-glyph-24_outgoing-direct-debit(style='color:purple--400;')
              .prismea-horizontal-spacing-10--slot
                p.prismea-text.prismea-color.-color-grey5 Category label
          .category-table-cell.-justify-end.-middle
            p.prismea-numeral.prismea-color.-color-grey5 8 647,00 €
          .category-table-cell.-justify-end.-middle
            p.prismea-numeral.prismea-color.-color-grey5 8 647,00 €
        .category-table-details-row
          div
          .category-table-cell
            .prismea-horizontal-spacing-10
              .prismea-horizontal-spacing-10--slot
                i.prismea-icon.prismea-color.prismea-glyph-24_outgoing-direct-debit(style='color:purple--400;')
              .prismea-horizontal-spacing-10--slot
                p.prismea-text.prismea-color.-color-grey5 Category label
          .category-table-cell.-justify-end.-middle
            p.prismea-numeral.prismea-color.-color-grey5 8 647,00 €
          .category-table-cell.-justify-end.-middle
            p.prismea-numeral.prismea-color.-color-grey5 8 647,00 €
    .category-table
      .category-table-row
        .category-table-cell
          .prismea-horizontal-spacing-10.-middle
            .prismea-horizontal-spacing-10--slot
              .checkbox.checkbox-color-orange--400
                input(type='checkbox', checked)
                label
                  svg.icon-24.icon-color-white
                    use(href='/svg/24x24/line/validate-alt.svg#validate-alt-line-24')
            .prismea-horizontal-spacing-10--slot
              svg.icon-24.icon-color-orange--400
                use(href='/svg/24x24/line/shop.svg#shop-line-24')
            .prismea-horizontal-spacing-10--slot
              p.prismea-text.prismea-color.color-orange--400 Group of categories label
        .category-table-cell.-justify-end.-middle
          p.prismea-numeral 8 647,00 €
        .category-table-cell.-justify-end.-middle
          p.prismea-numeral 8 647,00 €
  .categories-filters-table-footer
    div
    .categories-filters-table-cell
      p.prismea-text.-text-bold.-uppercase Total sorties
    .categories-filters-table-cell.-justify-end.-middle
      p.prismea-numeral 8 647,00 €
    .categories-filters-table-cell.-justify-end.-middle
      p.prismea-numeral 8 647,00 €

Tabs

<div style="background-color: #effffd; display: flex; justify-content: center; padding: 10px">
  <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>
</div>
div(style='background-color: #effffd; display: flex; justify-content: center; padding: 10px')
  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-vertical-spacing-10">
  <div class="prismea-vertical-spacing-10--slot">
    <div class="prismea-toast">
      <div class="prismea-toast--header"><i class="prismea-toast--header--icon prismea-glyph-12_info"></i>
        <div class="prismea-toast--header--title">Default</div>
        <div class="prismea-toast--header--close"><i class="prismea-glyph-12_cross"></i></div>
      </div>
      <div class="prismea-toast--content">Nothing happening</div>
    </div>
  </div>
  <div class="prismea-vertical-spacing-10--slot">
    <div class="prismea-toast -warn">
      <div class="prismea-toast--header"><i class="prismea-toast--header--icon prismea-glyph-12_info"></i>
        <div class="prismea-toast--header--title">Warning</div>
        <div class="prismea-toast--header--close"><i class="prismea-glyph-12_cross"></i></div>
      </div>
      <div class="prismea-toast--content">You have to be careful</div>
    </div>
  </div>
  <div class="prismea-vertical-spacing-10--slot">
    <div class="prismea-toast -error">
      <div class="prismea-toast--header"><i class="prismea-toast--header--icon prismea-glyph-12_info"></i>
        <div class="prismea-toast--header--title">Error</div>
        <div class="prismea-toast--header--close"><i class="prismea-glyph-12_cross"></i></div>
      </div>
      <div class="prismea-toast--content">There is a terrible error</div>
    </div>
  </div>
</div>
.prismea-vertical-spacing-10
  .prismea-vertical-spacing-10--slot
    .prismea-toast
      .prismea-toast--header
        i.prismea-toast--header--icon.prismea-glyph-12_info
        .prismea-toast--header--title Default
        .prismea-toast--header--close
          i.prismea-glyph-12_cross
      .prismea-toast--content Nothing happening
  .prismea-vertical-spacing-10--slot
    .prismea-toast.-warn
      .prismea-toast--header
        i.prismea-toast--header--icon.prismea-glyph-12_info
        .prismea-toast--header--title Warning
        .prismea-toast--header--close
          i.prismea-glyph-12_cross
      .prismea-toast--content You have to be careful
  .prismea-vertical-spacing-10--slot
    .prismea-toast.-error
      .prismea-toast--header
        i.prismea-toast--header--icon.prismea-glyph-12_info
        .prismea-toast--header--title Error
        .prismea-toast--header--close
          i.prismea-glyph-12_cross
      .prismea-toast--content There is a terrible error

Toolbar

<h3>Default view</h3>
<div class="prismea-toolbar-wrapper">
  <div class="prismea-toolbar">
    <div class="prismea-toolbar--tab-wrapper">
      <div class="prismea-toolbar--tab">
        <div class="prismea-horizontal-spacing-5 -middle">
          <div class="prismea-horizontal-spacing-5--slot"><i class="prismea-icon prismea-glyph-16_period"></i>
          </div>
          <div class="prismea-horizontal-spacing-5--slot -expand"><span>Period</span></div>
          <div class="prismea-horizontal-spacing-5--slot"><i class="prismea-icon prismea-glyph-12_caret-down"></i>
          </div>
        </div>
      </div>
    </div>
    <div class="prismea-toolbar--tab-wrapper">
      <div class="prismea-toolbar--tab">
        <div class="prismea-horizontal-spacing-5 -middle">
          <div class="prismea-horizontal-spacing-5--slot"><i class="prismea-icon prismea-glyph-16_settings"></i>
          </div>
          <div class="prismea-horizontal-spacing-5--slot -expand -min"><span>Advanced search</span></div>
          <div class="prismea-horizontal-spacing-5--slot"><i class="prismea-icon prismea-glyph-12_caret-down"></i>
          </div>
        </div>
      </div>
    </div>
    <div class="prismea-toolbar--tab-wrapper prismea-toolbar--bank-account-selector">
      <div class="prismea-toolbar--tab">
        <div class="prismea-horizontal-spacing-5 -middle">
          <div class="prismea-horizontal-spacing-5--slot"><i class="prismea-icon prismea-glyph-16_operations"></i>
          </div>
          <div class="prismea-horizontal-spacing-5--slot">
            <div class="prismea-text">Prismea Main Account</div>
          </div>
          <div class="prismea-horizontal-spacing-5--slot -expand">
            <div class="prismea-color -color-grey3">FR76 1679 8000 0100 0006 6983 956</div>
          </div>
          <div class="prismea-horizontal-spacing-5--slot">
            <div class="prismea-numeral">+1 400€</div>
          </div>
          <div class="prismea-horizontal-spacing-5--slot"><i class="prismea-icon prismea-glyph-12_caret-down"></i>
          </div>
        </div>
      </div>
      <ul class="prismea-toolbar--account-list">
        <li class="prismea-select--option -disabled">
          <div class="prismea-horizontal-spacing-5 -middle">
            <div class="prismea-horizontal-spacing-5--slot"><i class="prismea-icon prismea-glyph-16_operations"></i>
            </div>
            <div class="prismea-horizontal-spacing-5--slot">
              <div class="prismea-text">Prismea main account</div>
            </div>
            <div class="prismea-horizontal-spacing-5--slot -expand">
              <div class="prismea-text -hidden-text">FR76 1679 8000 0100 0006 6983 956</div>
            </div>
            <div class="prismea-horizontal-spacing-5--slot">
              <div class="prismea-numeral">+1 400€</div>
            </div>
          </div>
        </li>
        <li class="prismea-select--option">
          <div class="prismea-horizontal-spacing-5 -middle">
            <div class="prismea-horizontal-spacing-5--slot"><i class="prismea-icon prismea-glyph-16_operations"></i>
            </div>
            <div class="prismea-horizontal-spacing-5--slot">
              <div class="prismea-text">Prismea secondary account</div>
            </div>
            <div class="prismea-horizontal-spacing-5--slot -expand">
              <div class="prismea-text -hidden-text">FR76 1679 8000 0100 0006 7242 674</div>
            </div>
            <div class="prismea-horizontal-spacing-5--slot">
              <div class="prismea-numeral">+430€</div>
            </div>
          </div>
        </li>
      </ul>
    </div>
    <div class="prismea-toolbar--tab-wrapper">
      <div class="prismea-toolbar--tab">
        <div class="prismea-horizontal-spacing-5 -middle">
          <div class="prismea-horizontal-spacing-5--slot"><i class="prismea-icon prismea-glyph-16_export"></i>
          </div>
          <div class="prismea-horizontal-spacing-5--slot -expand -min"><span>Export</span></div>
        </div>
      </div>
    </div>
  </div>
</div>
<h3>First tab is disabled (hover me)</h3>
<div class="prismea-toolbar-wrapper">
  <div class="prismea-toolbar">
    <div class="prismea-toolbar--tab-wrapper -disabled">
      <div class="prismea-toolbar--tab">
        <div class="prismea-horizontal-spacing-5 -middle">
          <div class="prismea-horizontal-spacing-5--slot"><i class="prismea-icon prismea-glyph-16_period"></i>
          </div>
          <div class="prismea-horizontal-spacing-5--slot -expand"><span>Period</span></div>
          <div class="prismea-horizontal-spacing-5--slot"><i class="prismea-icon prismea-glyph-12_caret-down"></i>
          </div>
        </div>
      </div>
    </div>
    <div class="prismea-toolbar--tab-wrapper">
      <div class="prismea-toolbar--tab">
        <div class="prismea-horizontal-spacing-5 -middle">
          <div class="prismea-horizontal-spacing-5--slot"><i class="prismea-icon prismea-glyph-16_settings"></i>
          </div>
          <div class="prismea-horizontal-spacing-5--slot -expand -min"><span>Advanced search</span></div>
          <div class="prismea-horizontal-spacing-5--slot"><i class="prismea-icon prismea-glyph-12_caret-down"></i>
          </div>
        </div>
      </div>
    </div>
    <div class="prismea-toolbar--tab-wrapper prismea-toolbar--bank-account-selector">
      <div class="prismea-toolbar--tab">
        <div class="prismea-horizontal-spacing-5 -middle">
          <div class="prismea-horizontal-spacing-5--slot"><i class="prismea-icon prismea-glyph-16_operations"></i>
          </div>
          <div class="prismea-horizontal-spacing-5--slot">
            <div class="prismea-text">Prismea Main Account</div>
          </div>
          <div class="prismea-horizontal-spacing-5--slot -expand">
            <div class="prismea-color -color-grey3">FR76 1679 8000 0100 0006 6983 956</div>
          </div>
          <div class="prismea-horizontal-spacing-5--slot">
            <div class="prismea-numeral">+1 400€</div>
          </div>
          <div class="prismea-horizontal-spacing-5--slot"><i class="prismea-icon prismea-glyph-12_caret-down"></i>
          </div>
        </div>
      </div>
      <ul class="prismea-toolbar--account-list">
        <li class="prismea-select--option -disabled">
          <div class="prismea-horizontal-spacing-5 -middle">
            <div class="prismea-horizontal-spacing-5--slot"><i class="prismea-icon prismea-glyph-16_operations"></i>
            </div>
            <div class="prismea-horizontal-spacing-5--slot">
              <div class="prismea-text">Prismea main account</div>
            </div>
            <div class="prismea-horizontal-spacing-5--slot -expand">
              <div class="prismea-text -hidden-text">FR76 1679 8000 0100 0006 6983 956</div>
            </div>
            <div class="prismea-horizontal-spacing-5--slot">
              <div class="prismea-numeral">+1 400€</div>
            </div>
          </div>
        </li>
        <li class="prismea-select--option">
          <div class="prismea-horizontal-spacing-5 -middle">
            <div class="prismea-horizontal-spacing-5--slot"><i class="prismea-icon prismea-glyph-16_operations"></i>
            </div>
            <div class="prismea-horizontal-spacing-5--slot">
              <div class="prismea-text">Prismea secondary account</div>
            </div>
            <div class="prismea-horizontal-spacing-5--slot -expand">
              <div class="prismea-text -hidden-text">FR76 1679 8000 0100 0006 7242 674</div>
            </div>
            <div class="prismea-horizontal-spacing-5--slot">
              <div class="prismea-numeral">+430€</div>
            </div>
          </div>
        </li>
      </ul>
    </div>
    <div class="prismea-toolbar--tab-wrapper">
      <div class="prismea-toolbar--tab">
        <div class="prismea-horizontal-spacing-5 -middle">
          <div class="prismea-horizontal-spacing-5--slot"><i class="prismea-icon prismea-glyph-16_export"></i>
          </div>
          <div class="prismea-horizontal-spacing-5--slot -expand -min"><span>Export</span></div>
        </div>
      </div>
    </div>
  </div>
</div>
<h3>Filters are visible</h3>
<div class="prismea-toolbar-wrapper">
  <div class="prismea-toolbar -open">
    <div class="prismea-toolbar--tab-wrapper -expanded">
      <div class="prismea-toolbar--tab">
        <div class="prismea-horizontal-spacing-5 -middle">
          <div class="prismea-horizontal-spacing-5--slot"><i class="prismea-icon prismea-glyph-16_period"></i>
          </div>
          <div class="prismea-horizontal-spacing-5--slot -expand"><span>Period</span></div>
          <div class="prismea-horizontal-spacing-5--slot"><i class="prismea-icon prismea-glyph-12_caret-down"></i>
          </div>
        </div>
      </div>
    </div>
    <div class="prismea-toolbar--tab-wrapper">
      <div class="prismea-toolbar--tab">
        <div class="prismea-horizontal-spacing-5 -middle">
          <div class="prismea-horizontal-spacing-5--slot"><i class="prismea-icon prismea-glyph-16_settings"></i>
          </div>
          <div class="prismea-horizontal-spacing-5--slot -expand -min"><span>Advanced search</span></div>
          <div class="prismea-horizontal-spacing-5--slot"><i class="prismea-icon prismea-glyph-12_caret-down"></i>
          </div>
        </div>
      </div>
    </div>
    <div class="prismea-toolbar--tab-wrapper prismea-toolbar--bank-account-selector">
      <div class="prismea-toolbar--tab">
        <div class="prismea-horizontal-spacing-5 -middle">
          <div class="prismea-horizontal-spacing-5--slot"><i class="prismea-icon prismea-glyph-16_operations"></i>
          </div>
          <div class="prismea-horizontal-spacing-5--slot">
            <div class="prismea-text">Prismea Main Account</div>
          </div>
          <div class="prismea-horizontal-spacing-5--slot -expand">
            <div class="prismea-color -color-grey3">FR76 1679 8000 0100 0006 6983 956</div>
          </div>
          <div class="prismea-horizontal-spacing-5--slot">
            <div class="prismea-numeral">+1 400€</div>
          </div>
          <div class="prismea-horizontal-spacing-5--slot"><i class="prismea-icon prismea-glyph-12_caret-down"></i>
          </div>
        </div>
      </div>
      <ul class="prismea-toolbar--account-list">
        <li class="prismea-select--option -disabled">
          <div class="prismea-horizontal-spacing-5 -middle">
            <div class="prismea-horizontal-spacing-5--slot"><i class="prismea-icon prismea-glyph-16_operations"></i>
            </div>
            <div class="prismea-horizontal-spacing-5--slot">
              <div class="prismea-text">Prismea main account</div>
            </div>
            <div class="prismea-horizontal-spacing-5--slot -expand">
              <div class="prismea-text -hidden-text">FR76 1679 8000 0100 0006 6983 956</div>
            </div>
            <div class="prismea-horizontal-spacing-5--slot">
              <div class="prismea-numeral">+1 400€</div>
            </div>
          </div>
        </li>
        <li class="prismea-select--option">
          <div class="prismea-horizontal-spacing-5 -middle">
            <div class="prismea-horizontal-spacing-5--slot"><i class="prismea-icon prismea-glyph-16_operations"></i>
            </div>
            <div class="prismea-horizontal-spacing-5--slot">
              <div class="prismea-text">Prismea secondary account</div>
            </div>
            <div class="prismea-horizontal-spacing-5--slot -expand">
              <div class="prismea-text -hidden-text">FR76 1679 8000 0100 0006 7242 674</div>
            </div>
            <div class="prismea-horizontal-spacing-5--slot">
              <div class="prismea-numeral">+430€</div>
            </div>
          </div>
        </li>
      </ul>
    </div>
    <div class="prismea-toolbar--tab-wrapper">
      <div class="prismea-toolbar--tab">
        <div class="prismea-horizontal-spacing-5 -middle">
          <div class="prismea-horizontal-spacing-5--slot"><i class="prismea-icon prismea-glyph-16_export"></i>
          </div>
          <div class="prismea-horizontal-spacing-5--slot -expand -min"><span>Export</span></div>
        </div>
      </div>
    </div>
  </div>
  <div class="prismea-toolbar-filters">
    <div class="prismea-toolbar-filters--pill-wrapper">
      <div class="prismea-toolbar-filters--pill"><i class="prismea-icon prismea-glyph-12_plus"></i><span>Label 1</span>
      </div>
      <div class="prismea-toolbar-filters--pill"><i class="prismea-icon prismea-glyph-12_plus"></i><span>Label 2</span>
      </div>
      <div class="prismea-toolbar-filters--pill -selected"><i class="prismea-icon prismea-glyph-12_delete"></i><span>Label 3 (selected)</span>
      </div>
      <div class="prismea-toolbar-filters--pill"><i class="prismea-icon prismea-glyph-12_plus"></i><span>Label 4</span>
      </div>
      <div class="prismea-toolbar-filters--pill"><i class="prismea-icon prismea-glyph-12_plus"></i><span>Label 5</span>
      </div>
      <div class="prismea-toolbar-filters--pill"><i class="prismea-icon prismea-glyph-12_plus"></i><span>Label 6</span>
      </div>
    </div>
  </div>
</div>
<h3>Hidden dropdown is visible</h3>
<div class="prismea-toolbar-wrapper">
  <div class="prismea-toolbar">
    <div class="prismea-toolbar--tab-wrapper">
      <div class="prismea-toolbar--tab">
        <div class="prismea-horizontal-spacing-5 -middle">
          <div class="prismea-horizontal-spacing-5--slot"><i class="prismea-icon prismea-glyph-16_period"></i>
          </div>
          <div class="prismea-horizontal-spacing-5--slot -expand"><span>Period</span></div>
          <div class="prismea-horizontal-spacing-5--slot"><i class="prismea-icon prismea-glyph-12_caret-down"></i>
          </div>
        </div>
      </div>
    </div>
    <div class="prismea-toolbar--tab-wrapper">
      <div class="prismea-toolbar--tab">
        <div class="prismea-horizontal-spacing-5 -middle">
          <div class="prismea-horizontal-spacing-5--slot"><i class="prismea-icon prismea-glyph-16_settings"></i>
          </div>
          <div class="prismea-horizontal-spacing-5--slot -expand -min"><span>Advanced search</span></div>
          <div class="prismea-horizontal-spacing-5--slot"><i class="prismea-icon prismea-glyph-12_caret-down"></i>
          </div>
        </div>
      </div>
    </div>
    <div class="prismea-toolbar--tab-wrapper prismea-toolbar--bank-account-selector -expanded">
      <div class="prismea-toolbar--tab">
        <div class="prismea-horizontal-spacing-5 -middle">
          <div class="prismea-horizontal-spacing-5--slot"><i class="prismea-icon prismea-glyph-16_operations"></i>
          </div>
          <div class="prismea-horizontal-spacing-5--slot">
            <div class="prismea-text">Prismea Main Account</div>
          </div>
          <div class="prismea-horizontal-spacing-5--slot -expand">
            <div class="prismea-color -color-grey3">FR76 1679 8000 0100 0006 6983 956</div>
          </div>
          <div class="prismea-horizontal-spacing-5--slot">
            <div class="prismea-numeral">+1 400€</div>
          </div>
          <div class="prismea-horizontal-spacing-5--slot"><i class="prismea-icon prismea-glyph-12_caret-down"></i>
          </div>
        </div>
      </div>
      <ul class="prismea-toolbar--account-list">
        <li class="prismea-select--option -disabled">
          <div class="prismea-horizontal-spacing-5 -middle">
            <div class="prismea-horizontal-spacing-5--slot"><i class="prismea-icon prismea-glyph-16_operations"></i>
            </div>
            <div class="prismea-horizontal-spacing-5--slot">
              <div class="prismea-text">Prismea main account</div>
            </div>
            <div class="prismea-horizontal-spacing-5--slot -expand">
              <div class="prismea-text -hidden-text">FR76 1679 8000 0100 0006 6983 956</div>
            </div>
            <div class="prismea-horizontal-spacing-5--slot">
              <div class="prismea-numeral">+1 400€</div>
            </div>
          </div>
        </li>
        <li class="prismea-select--option">
          <div class="prismea-horizontal-spacing-5 -middle">
            <div class="prismea-horizontal-spacing-5--slot"><i class="prismea-icon prismea-glyph-16_operations"></i>
            </div>
            <div class="prismea-horizontal-spacing-5--slot">
              <div class="prismea-text">Prismea secondary account</div>
            </div>
            <div class="prismea-horizontal-spacing-5--slot -expand">
              <div class="prismea-text -hidden-text">FR76 1679 8000 0100 0006 7242 674</div>
            </div>
            <div class="prismea-horizontal-spacing-5--slot">
              <div class="prismea-numeral">+430€</div>
            </div>
          </div>
        </li>
      </ul>
    </div>
    <div class="prismea-toolbar--tab-wrapper">
      <div class="prismea-toolbar--tab">
        <div class="prismea-horizontal-spacing-5 -middle">
          <div class="prismea-horizontal-spacing-5--slot"><i class="prismea-icon prismea-glyph-16_export"></i>
          </div>
          <div class="prismea-horizontal-spacing-5--slot -expand -min"><span>Export</span></div>
        </div>
      </div>
    </div>
  </div>
</div>
h3 Default view
.prismea-toolbar-wrapper
  .prismea-toolbar
    .prismea-toolbar--tab-wrapper
      .prismea-toolbar--tab
        .prismea-horizontal-spacing-5.-middle
          .prismea-horizontal-spacing-5--slot
            i.prismea-icon.prismea-glyph-16_period
          .prismea-horizontal-spacing-5--slot.-expand
            span Period
          .prismea-horizontal-spacing-5--slot
            i.prismea-icon.prismea-glyph-12_caret-down
    .prismea-toolbar--tab-wrapper
      .prismea-toolbar--tab
        .prismea-horizontal-spacing-5.-middle
          .prismea-horizontal-spacing-5--slot
            i.prismea-icon.prismea-glyph-16_settings
          .prismea-horizontal-spacing-5--slot.-expand.-min
            span Advanced search
          .prismea-horizontal-spacing-5--slot
            i.prismea-icon.prismea-glyph-12_caret-down
    .prismea-toolbar--tab-wrapper.prismea-toolbar--bank-account-selector
      .prismea-toolbar--tab
        .prismea-horizontal-spacing-5.-middle
          .prismea-horizontal-spacing-5--slot
            i.prismea-icon.prismea-glyph-16_operations
          .prismea-horizontal-spacing-5--slot
            .prismea-text Prismea Main Account
          .prismea-horizontal-spacing-5--slot.-expand
            .prismea-color.-color-grey3 FR76 1679 8000 0100 0006 6983 956
          .prismea-horizontal-spacing-5--slot
            .prismea-numeral +1 400€
          .prismea-horizontal-spacing-5--slot
            i.prismea-icon.prismea-glyph-12_caret-down
      ul.prismea-toolbar--account-list
        li.prismea-select--option.-disabled
          .prismea-horizontal-spacing-5.-middle
            .prismea-horizontal-spacing-5--slot
              i.prismea-icon.prismea-glyph-16_operations
            .prismea-horizontal-spacing-5--slot
              .prismea-text Prismea main account
            .prismea-horizontal-spacing-5--slot.-expand
              .prismea-text.-hidden-text FR76 1679 8000 0100 0006 6983 956
            .prismea-horizontal-spacing-5--slot
              .prismea-numeral +1 400€
        li.prismea-select--option
          .prismea-horizontal-spacing-5.-middle
            .prismea-horizontal-spacing-5--slot
              i.prismea-icon.prismea-glyph-16_operations
            .prismea-horizontal-spacing-5--slot
              .prismea-text Prismea secondary account
            .prismea-horizontal-spacing-5--slot.-expand
              .prismea-text.-hidden-text FR76 1679 8000 0100 0006 7242 674
            .prismea-horizontal-spacing-5--slot
              .prismea-numeral +430€
    .prismea-toolbar--tab-wrapper
      .prismea-toolbar--tab
        .prismea-horizontal-spacing-5.-middle
          .prismea-horizontal-spacing-5--slot
            i.prismea-icon.prismea-glyph-16_export
          .prismea-horizontal-spacing-5--slot.-expand.-min
            span Export
h3 First tab is disabled (hover me)
.prismea-toolbar-wrapper
  .prismea-toolbar
    .prismea-toolbar--tab-wrapper.-disabled
      .prismea-toolbar--tab
        .prismea-horizontal-spacing-5.-middle
          .prismea-horizontal-spacing-5--slot
            i.prismea-icon.prismea-glyph-16_period
          .prismea-horizontal-spacing-5--slot.-expand
            span Period
          .prismea-horizontal-spacing-5--slot
            i.prismea-icon.prismea-glyph-12_caret-down
    .prismea-toolbar--tab-wrapper
      .prismea-toolbar--tab
        .prismea-horizontal-spacing-5.-middle
          .prismea-horizontal-spacing-5--slot
            i.prismea-icon.prismea-glyph-16_settings
          .prismea-horizontal-spacing-5--slot.-expand.-min
            span Advanced search
          .prismea-horizontal-spacing-5--slot
            i.prismea-icon.prismea-glyph-12_caret-down
    .prismea-toolbar--tab-wrapper.prismea-toolbar--bank-account-selector
      .prismea-toolbar--tab
        .prismea-horizontal-spacing-5.-middle
          .prismea-horizontal-spacing-5--slot
            i.prismea-icon.prismea-glyph-16_operations
          .prismea-horizontal-spacing-5--slot
            .prismea-text Prismea Main Account
          .prismea-horizontal-spacing-5--slot.-expand
            .prismea-color.-color-grey3 FR76 1679 8000 0100 0006 6983 956
          .prismea-horizontal-spacing-5--slot
            .prismea-numeral +1 400€
          .prismea-horizontal-spacing-5--slot
            i.prismea-icon.prismea-glyph-12_caret-down
      ul.prismea-toolbar--account-list
        li.prismea-select--option.-disabled
          .prismea-horizontal-spacing-5.-middle
            .prismea-horizontal-spacing-5--slot
              i.prismea-icon.prismea-glyph-16_operations
            .prismea-horizontal-spacing-5--slot
              .prismea-text Prismea main account
            .prismea-horizontal-spacing-5--slot.-expand
              .prismea-text.-hidden-text FR76 1679 8000 0100 0006 6983 956
            .prismea-horizontal-spacing-5--slot
              .prismea-numeral +1 400€
        li.prismea-select--option
          .prismea-horizontal-spacing-5.-middle
            .prismea-horizontal-spacing-5--slot
              i.prismea-icon.prismea-glyph-16_operations
            .prismea-horizontal-spacing-5--slot
              .prismea-text Prismea secondary account
            .prismea-horizontal-spacing-5--slot.-expand
              .prismea-text.-hidden-text FR76 1679 8000 0100 0006 7242 674
            .prismea-horizontal-spacing-5--slot
              .prismea-numeral +430€
    .prismea-toolbar--tab-wrapper
      .prismea-toolbar--tab
        .prismea-horizontal-spacing-5.-middle
          .prismea-horizontal-spacing-5--slot
            i.prismea-icon.prismea-glyph-16_export
          .prismea-horizontal-spacing-5--slot.-expand.-min
            span Export
h3 Filters are visible
.prismea-toolbar-wrapper
  .prismea-toolbar.-open
    .prismea-toolbar--tab-wrapper.-expanded
      .prismea-toolbar--tab
        .prismea-horizontal-spacing-5.-middle
          .prismea-horizontal-spacing-5--slot
            i.prismea-icon.prismea-glyph-16_period
          .prismea-horizontal-spacing-5--slot.-expand
            span Period
          .prismea-horizontal-spacing-5--slot
            i.prismea-icon.prismea-glyph-12_caret-down
    .prismea-toolbar--tab-wrapper
      .prismea-toolbar--tab
        .prismea-horizontal-spacing-5.-middle
          .prismea-horizontal-spacing-5--slot
            i.prismea-icon.prismea-glyph-16_settings
          .prismea-horizontal-spacing-5--slot.-expand.-min
            span Advanced search
          .prismea-horizontal-spacing-5--slot
            i.prismea-icon.prismea-glyph-12_caret-down
    .prismea-toolbar--tab-wrapper.prismea-toolbar--bank-account-selector
      .prismea-toolbar--tab
        .prismea-horizontal-spacing-5.-middle
          .prismea-horizontal-spacing-5--slot
            i.prismea-icon.prismea-glyph-16_operations
          .prismea-horizontal-spacing-5--slot
            .prismea-text Prismea Main Account
          .prismea-horizontal-spacing-5--slot.-expand
            .prismea-color.-color-grey3 FR76 1679 8000 0100 0006 6983 956
          .prismea-horizontal-spacing-5--slot
            .prismea-numeral +1 400€
          .prismea-horizontal-spacing-5--slot
            i.prismea-icon.prismea-glyph-12_caret-down
      ul.prismea-toolbar--account-list
        li.prismea-select--option.-disabled
          .prismea-horizontal-spacing-5.-middle
            .prismea-horizontal-spacing-5--slot
              i.prismea-icon.prismea-glyph-16_operations
            .prismea-horizontal-spacing-5--slot
              .prismea-text Prismea main account
            .prismea-horizontal-spacing-5--slot.-expand
              .prismea-text.-hidden-text FR76 1679 8000 0100 0006 6983 956
            .prismea-horizontal-spacing-5--slot
              .prismea-numeral +1 400€
        li.prismea-select--option
          .prismea-horizontal-spacing-5.-middle
            .prismea-horizontal-spacing-5--slot
              i.prismea-icon.prismea-glyph-16_operations
            .prismea-horizontal-spacing-5--slot
              .prismea-text Prismea secondary account
            .prismea-horizontal-spacing-5--slot.-expand
              .prismea-text.-hidden-text FR76 1679 8000 0100 0006 7242 674
            .prismea-horizontal-spacing-5--slot
              .prismea-numeral +430€
    .prismea-toolbar--tab-wrapper
      .prismea-toolbar--tab
        .prismea-horizontal-spacing-5.-middle
          .prismea-horizontal-spacing-5--slot
            i.prismea-icon.prismea-glyph-16_export
          .prismea-horizontal-spacing-5--slot.-expand.-min
            span Export
  .prismea-toolbar-filters
    .prismea-toolbar-filters--pill-wrapper
      .prismea-toolbar-filters--pill
        i.prismea-icon.prismea-glyph-12_plus
        span Label 1
      .prismea-toolbar-filters--pill
        i.prismea-icon.prismea-glyph-12_plus
        span Label 2
      .prismea-toolbar-filters--pill.-selected
        i.prismea-icon.prismea-glyph-12_delete
        span Label 3 (selected)
      .prismea-toolbar-filters--pill
        i.prismea-icon.prismea-glyph-12_plus
        span Label 4
      .prismea-toolbar-filters--pill
        i.prismea-icon.prismea-glyph-12_plus
        span Label 5
      .prismea-toolbar-filters--pill
        i.prismea-icon.prismea-glyph-12_plus
        span Label 6
h3 Hidden dropdown is visible
.prismea-toolbar-wrapper
  .prismea-toolbar
    .prismea-toolbar--tab-wrapper
      .prismea-toolbar--tab
        .prismea-horizontal-spacing-5.-middle
          .prismea-horizontal-spacing-5--slot
            i.prismea-icon.prismea-glyph-16_period
          .prismea-horizontal-spacing-5--slot.-expand
            span Period
          .prismea-horizontal-spacing-5--slot
            i.prismea-icon.prismea-glyph-12_caret-down
    .prismea-toolbar--tab-wrapper
      .prismea-toolbar--tab
        .prismea-horizontal-spacing-5.-middle
          .prismea-horizontal-spacing-5--slot
            i.prismea-icon.prismea-glyph-16_settings
          .prismea-horizontal-spacing-5--slot.-expand.-min
            span Advanced search
          .prismea-horizontal-spacing-5--slot
            i.prismea-icon.prismea-glyph-12_caret-down
    .prismea-toolbar--tab-wrapper.prismea-toolbar--bank-account-selector.-expanded
      .prismea-toolbar--tab
        .prismea-horizontal-spacing-5.-middle
          .prismea-horizontal-spacing-5--slot
            i.prismea-icon.prismea-glyph-16_operations
          .prismea-horizontal-spacing-5--slot
            .prismea-text Prismea Main Account
          .prismea-horizontal-spacing-5--slot.-expand
            .prismea-color.-color-grey3 FR76 1679 8000 0100 0006 6983 956
          .prismea-horizontal-spacing-5--slot
            .prismea-numeral +1 400€
          .prismea-horizontal-spacing-5--slot
            i.prismea-icon.prismea-glyph-12_caret-down
      ul.prismea-toolbar--account-list
        li.prismea-select--option.-disabled
          .prismea-horizontal-spacing-5.-middle
            .prismea-horizontal-spacing-5--slot
              i.prismea-icon.prismea-glyph-16_operations
            .prismea-horizontal-spacing-5--slot
              .prismea-text Prismea main account
            .prismea-horizontal-spacing-5--slot.-expand
              .prismea-text.-hidden-text FR76 1679 8000 0100 0006 6983 956
            .prismea-horizontal-spacing-5--slot
              .prismea-numeral +1 400€
        li.prismea-select--option
          .prismea-horizontal-spacing-5.-middle
            .prismea-horizontal-spacing-5--slot
              i.prismea-icon.prismea-glyph-16_operations
            .prismea-horizontal-spacing-5--slot
              .prismea-text Prismea secondary account
            .prismea-horizontal-spacing-5--slot.-expand
              .prismea-text.-hidden-text FR76 1679 8000 0100 0006 7242 674
            .prismea-horizontal-spacing-5--slot
              .prismea-numeral +430€
    .prismea-toolbar--tab-wrapper
      .prismea-toolbar--tab
        .prismea-horizontal-spacing-5.-middle
          .prismea-horizontal-spacing-5--slot
            i.prismea-icon.prismea-glyph-16_export
          .prismea-horizontal-spacing-5--slot.-expand.-min
            span Export