Organisms

Organisms are groups of molecules joined together to form a relatively complex, distinct section of an interface.

Building up from molecules to organisms encourages creating standalone, portable, reusable components.

Atomic Design by Brad Frost
<div class="prismea-carousel">
  <div class="prismea-carousel--left-gradient"></div>
  <div class="prismea-carousel-navigation prismea-carousel-navigation-prev"><i class="prismea-icon prismea-glyph-12_arrow-left"></i></div>
  <div class="prismea-carousel--container">
    <div class="prismea-carousel--item">
      <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>
    <div class="prismea-carousel--item">
      <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>
    <div class="prismea-carousel--item">
      <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>
    <div class="prismea-carousel--item">
      <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>
    <div class="prismea-carousel--item">
      <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>
    <div class="prismea-carousel--item">
      <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>
    <div class="prismea-carousel--item">
      <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>
    <div class="prismea-carousel--item">
      <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>
    <div class="prismea-carousel--item">
      <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>
    <div class="prismea-carousel--item">
      <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>
  </div>
  <div class="prismea-carousel--right-gradient"></div>
  <div class="prismea-carousel-navigation prismea-carousel-navigation-next"><i class="prismea-icon prismea-glyph-12_arrow-right"></i></div>
</div>
.prismea-carousel
  .prismea-carousel--left-gradient
  .prismea-carousel-navigation.prismea-carousel-navigation-prev
    i.prismea-icon.prismea-glyph-12_arrow-left
  .prismea-carousel--container
    .prismea-carousel--item
      .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--item
      .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--item
      .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--item
      .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--item
      .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--item
      .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--item
      .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--item
      .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--item
      .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--item
      .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--right-gradient
  .prismea-carousel-navigation.prismea-carousel-navigation-next
    i.prismea-icon.prismea-glyph-12_arrow-right

Goodbye Message

<div class="goodbye-message bg-color-primary--50">
  <div class="goodbye-message__close">
    <button class="btn-icon btn-icon--md">
      <svg class="icon-24">
        <use href="/svg/24x24/line/close.svg#close-line-24"></use>
      </svg>
    </button>
  </div>
  <div class="goodbye-message__picture"><img src="https://images.unsplash.com/photo-1658966931690-00580ff55429?ixlib=rb-1.2.1&amp;ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&amp;auto=format&amp;fit=crop&amp;w=550&amp;h=300&amp;q=80"/></div>
  <div class="goodbye-message__content">
    <p class="goodbye-message__title prismea-text title-2 color-primary--600">Title</p>
    <p class="goodbye-message__description prismea-text color-primary--600">Description</p>
    <div class="goodbye-message__actions">
      <div class="prismea-horizontal-spacing-10--slot">
        <button class="btn btn--outlined btn--md w-full">Button 1</button>
      </div>
      <div class="prismea-horizontal-spacing-10--slot"><a class="btn btn--primary btn--md w-full text-decoration-none">Button Link</a></div>
    </div>
  </div>
</div>
.goodbye-message.bg-color-primary--50
  .goodbye-message__close
    button.btn-icon.btn-icon--md
      svg.icon-24
        use(href='/svg/24x24/line/close.svg#close-line-24')
  .goodbye-message__picture
    img(src='https://images.unsplash.com/photo-1658966931690-00580ff55429?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=550&h=300&q=80')
  .goodbye-message__content
    p.goodbye-message__title.prismea-text.title-2.color-primary--600 Title
    p.goodbye-message__description.prismea-text.color-primary--600 Description
    .goodbye-message__actions
      .prismea-horizontal-spacing-10--slot
        button.btn.btn--outlined.btn--md.w-full Button 1
      .prismea-horizontal-spacing-10--slot
        a.btn.btn--primary.btn--md.w-full.text-decoration-none Button Link

Sidebar main

Displayed on the left of the screen, it contains :

  • Logged user infos
  • Navigation
  • App actions (parameters, disconnection, help, …)
<div class="prismea-webapp-sidebar-main">
  <div class="prismea-webapp--header">
    <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>
  <hr class="prismea-line -light"/>
  <div class="prismea-webapp--navigation">
    <div class="prismea-vertical-spacing-10">
      <div class="prismea-vertical-spacing-10--slot">
        <div class="list-item">
          <div class="text">Vue d'ensemble</div>
        </div>
      </div>
      <div class="prismea-vertical-spacing-10--slot">
        <div class="list-item">
          <div class="text">Opérations</div>
        </div>
      </div>
      <div class="prismea-vertical-spacing-10--slot">
        <div class="list-item">
          <div class="text">Cartes</div>
        </div>
      </div>
      <div class="prismea-vertical-spacing-10--slot">
        <div class="list-item">
          <div class="text">Virements</div>
        </div>
      </div>
      <div class="prismea-vertical-spacing-10--slot">
        <div class="list-item">
          <div class="text">Prélèvements</div>
        </div>
      </div>
    </div>
  </div>
  <hr class="prismea-line -light"/>
  <div class="prismea-webapp--footer">
    <div class="prismea-vertical-spacing-10">
      <div class="prismea-vertical-spacing-10--slot">
        <div class="list-item">
          <div class="text">Paramètres</div>
        </div>
      </div>
      <div class="prismea-vertical-spacing-10--slot">
        <div class="list-item">
          <div class="text">Aide et documentation</div>
        </div>
      </div>
      <div class="prismea-vertical-spacing-10--slot">
        <div class="list-item">
          <div class="text">Déconnexion</div>
        </div>
      </div>
    </div>
  </div>
</div>
.prismea-webapp-sidebar-main
  .prismea-webapp--header
    .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.
  hr.prismea-line.-light
  .prismea-webapp--navigation
    .prismea-vertical-spacing-10
      .prismea-vertical-spacing-10--slot
        .list-item
          .text Vue d'ensemble
      .prismea-vertical-spacing-10--slot
        .list-item
          .text Opérations
      .prismea-vertical-spacing-10--slot
        .list-item
          .text Cartes
      .prismea-vertical-spacing-10--slot
        .list-item
          .text Virements
      .prismea-vertical-spacing-10--slot
        .list-item
          .text Prélèvements
  hr.prismea-line.-light
  .prismea-webapp--footer
    .prismea-vertical-spacing-10
      .prismea-vertical-spacing-10--slot
        .list-item
          .text Paramètres
      .prismea-vertical-spacing-10--slot
        .list-item
          .text Aide et documentation
      .prismea-vertical-spacing-10--slot
        .list-item
          .text Déconnexion

Sidebar details

Displayed on the right of the screen, it can contains details regarding a:

  • Bank movement
  • Card
  • Collaborator
  • Direct debit
  • Transfer
<div class="prismea-webapp-sidebar-details" style="TRANSFORM: translate3d(0,0,0); opacity: 1; pointer-events: all;">
  <div class="prismea-vertical-spacing-30--slot">
    <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>
  </div>
  <div class="prismea-vertical-spacing-30--slot">
    <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>
  <div class="prismea-vertical-spacing-20--slot">
    <div class="prismea-card" style="margin-bottom:30px;">
      <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>
  <div class="prismea-vertical-spacing-20--slot">
    <div class="prismea-card ion--expandable -ion--expanded" style="margin-bottom:30px;">
      <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>
  <div class="prismea-vertical-spacing-20--slot">
    <div class="prismea-card ion--expandable" style="margin-bottom:30px;">
      <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>
</div>
.prismea-webapp-sidebar-details(style='TRANSFORM: translate3d(0,0,0); opacity: 1; pointer-events: all;')
  .prismea-vertical-spacing-30--slot
    .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
  .prismea-vertical-spacing-30--slot
    .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-20--slot
    .prismea-card(style='margin-bottom:30px;')
      .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-vertical-spacing-20--slot
    .prismea-card.ion--expandable.-ion--expanded(style='margin-bottom:30px;')
      .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-20--slot
    .prismea-card.ion--expandable(style='margin-bottom:30px;')
      .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

Design System

Analytics Table

<h3>Single Row</h3>
<table class="analytics-table prismea-table -default bg-color-sapin--50 -text-sm  -collapsed">
  <thead class="prismea-table--head">
    <tr class="prismea-table--line">
      <th class="prismea-table--cell -width-200">
        <div class="analytics-table__title">
          <svg class="icon-32 icon-color-sapin--600">
            <use href="/svg/32x32/line/transaction-incoming.svg#transaction-incoming-line-32"></use>
          </svg><span class="color-sapin--600">Label</span>
          <svg class="icon-16 icon-rotate-180">
            <use href="/svg/16x16/line/chevron-up.svg#chevron-up-line-16"></use>
          </svg>
        </div>
      </th>
      <th class="prismea-table--cell -right -width-100"><span class="color-grey--900">178394</span></th>
      <th class="prismea-table--cell -right -width-100"><span class="color-grey--900">178394</span></th>
      <th class="prismea-table--cell -right -width-100"><span class="color-grey--900">178394</span></th>
      <th class="prismea-table--cell -right -width-100"><span class="color-grey--900">178394</span></th>
      <th class="prismea-table--cell -right -width-100"><span class="color-grey--900">178394</span></th>
      <th class="prismea-table--cell -right -width-100"><span class="color-grey--900">178394</span></th>
      <th class="prismea-table--cell -right -width-100"><span class="color-grey--900">178394</span></th>
      <th class="prismea-table--cell -right -width-100"><span class="color-grey--900">178394</span></th>
      <th class="prismea-table--cell -right -width-100"><span class="color-grey--900">178394</span></th>
      <th class="prismea-table--cell -right -width-100"><span class="color-grey--900">178394</span></th>
      <th class="prismea-table--cell -right -width-100"><span class="color-grey--900">178394</span></th>
      <th class="prismea-table--cell -right -width-100"><span class="color-grey--900">178394</span></th>
      <th class="prismea-table--cell -right -width-100"><span class="color-grey--900">178394</span></th>
    </tr>
  </thead>
  <tbody class="prismea-table--body">
    <tr class="prismea-table--line ion--hoverable">
      <td class="prismea-table--cell">
        <div class="analytics-table__title"><span>Category 1</span>
          <svg class="icon-16 icon-rotate-180">
            <use href="/svg/16x16/line/chevron-up.svg#chevron-up-line-16"></use>
          </svg>
        </div>
      </td>
      <td class="prismea-table--cell -right"><span>17200</span></td>
      <td class="prismea-table--cell -right"><span>16374</span></td>
      <td class="prismea-table--cell -right"><span>128398394</span></td>
      <td class="prismea-table--cell -right"><span>273</span></td>
      <td class="prismea-table--cell -right"><span>394404</span></td>
      <td class="prismea-table--cell -right"><span>2838</span></td>
      <td class="prismea-table--cell -right"><span>190</span></td>
      <td class="prismea-table--cell -right"><span>3948484</span></td>
      <td class="prismea-table--cell -right"><span>28383</span></td>
      <td class="prismea-table--cell -right"><span>19233</span></td>
      <td class="prismea-table--cell -right"><span>9448437</span></td>
      <td class="prismea-table--cell -right"><span>292923847482</span></td>
      <td class="prismea-table--cell -right"><span>2737489</span></td>
    </tr>
    <tr class="prismea-table--line ion--hoverable -selected">
      <td class="prismea-table--cell">
        <div class="analytics-table__title"><span>Category 2</span>
          <svg class="icon-16">
            <use href="/svg/16x16/line/chevron-up.svg#chevron-up-line-16"></use>
          </svg>
        </div>
      </td>
      <td class="prismea-table--cell -right"><span>17200</span></td>
      <td class="prismea-table--cell -right"><span>16374</span></td>
      <td class="prismea-table--cell -right"><span>128398394</span></td>
      <td class="prismea-table--cell -right"><span>273</span></td>
      <td class="prismea-table--cell -right"><span>394404</span></td>
      <td class="prismea-table--cell -right"><span>2838</span></td>
      <td class="prismea-table--cell -right"><span>190</span></td>
      <td class="prismea-table--cell -right"><span>3948484</span></td>
      <td class="prismea-table--cell -right"><span>28383</span></td>
      <td class="prismea-table--cell -right"><span>19233</span></td>
      <td class="prismea-table--cell -right"><span>9448437</span></td>
      <td class="prismea-table--cell -right"><span>292923847482</span></td>
      <td class="prismea-table--cell -right"><span>2737489</span></td>
    </tr>
    <tr class="prismea-table--line ion--expanded">
      <td class="prismea-table--cell">
        <div class="prismea-table--expanded-cell"><span>Tag 1</span></div>
      </td>
      <td class="prismea-table--cell -right">
        <div class="prismea-table--expanded-cell"><span>17200</span></div>
      </td>
      <td class="prismea-table--cell -right">
        <div class="prismea-table--expanded-cell"><span>16374</span></div>
      </td>
      <td class="prismea-table--cell -right">
        <div class="prismea-table--expanded-cell"><span>128398394</span></div>
      </td>
      <td class="prismea-table--cell -right">
        <div class="prismea-table--expanded-cell"><span>273</span></div>
      </td>
      <td class="prismea-table--cell -right">
        <div class="prismea-table--expanded-cell"><span>394404</span></div>
      </td>
      <td class="prismea-table--cell -right">
        <div class="prismea-table--expanded-cell"><span>2838</span></div>
      </td>
      <td class="prismea-table--cell -right">
        <div class="prismea-table--expanded-cell"><span>190</span></div>
      </td>
      <td class="prismea-table--cell -right">
        <div class="prismea-table--expanded-cell"><span>3948484</span></div>
      </td>
      <td class="prismea-table--cell -right">
        <div class="prismea-table--expanded-cell"><span>28383</span></div>
      </td>
      <td class="prismea-table--cell -right">
        <div class="prismea-table--expanded-cell"><span>19233</span></div>
      </td>
      <td class="prismea-table--cell -right">
        <div class="prismea-table--expanded-cell"><span>9448437</span></div>
      </td>
      <td class="prismea-table--cell -right">
        <div class="prismea-table--expanded-cell"><span>292923847482</span></div>
      </td>
      <td class="prismea-table--cell -right">
        <div class="prismea-table--expanded-cell"><span>2737489</span></div>
      </td>
    </tr>
    <tr class="prismea-table--line ion--expanded">
      <td class="prismea-table--cell">
        <div class="prismea-table--expanded-cell"><span> Tag 2</span></div>
      </td>
      <td class="prismea-table--cell -right">
        <div class="prismea-table--expanded-cell"><span>17200</span></div>
      </td>
      <td class="prismea-table--cell -right">
        <div class="prismea-table--expanded-cell"><span>16374</span></div>
      </td>
      <td class="prismea-table--cell -right">
        <div class="prismea-table--expanded-cell"><span>128398394</span></div>
      </td>
      <td class="prismea-table--cell -right">
        <div class="prismea-table--expanded-cell"><span>273</span></div>
      </td>
      <td class="prismea-table--cell -right">
        <div class="prismea-table--expanded-cell"><span>394404</span></div>
      </td>
      <td class="prismea-table--cell -right">
        <div class="prismea-table--expanded-cell"><span>2838</span></div>
      </td>
      <td class="prismea-table--cell -right">
        <div class="prismea-table--expanded-cell"><span>190</span></div>
      </td>
      <td class="prismea-table--cell -right">
        <div class="prismea-table--expanded-cell"><span>3948484</span></div>
      </td>
      <td class="prismea-table--cell -right">
        <div class="prismea-table--expanded-cell"><span>28383</span></div>
      </td>
      <td class="prismea-table--cell -right">
        <div class="prismea-table--expanded-cell"><span>19233</span></div>
      </td>
      <td class="prismea-table--cell -right">
        <div class="prismea-table--expanded-cell"><span>9448437</span></div>
      </td>
      <td class="prismea-table--cell -right">
        <div class="prismea-table--expanded-cell"><span>292923847482</span></div>
      </td>
      <td class="prismea-table--cell -right">
        <div class="prismea-table--expanded-cell"><span>2737489</span></div>
      </td>
    </tr>
    <tr class="prismea-table--line ion--expanded">
      <td class="prismea-table--cell">
        <div class="prismea-table--expanded-cell"><span>Tag 3</span></div>
      </td>
      <td class="prismea-table--cell -right">
        <div class="prismea-table--expanded-cell"><span>17200</span></div>
      </td>
      <td class="prismea-table--cell -right">
        <div class="prismea-table--expanded-cell"><span>16374</span></div>
      </td>
      <td class="prismea-table--cell -right">
        <div class="prismea-table--expanded-cell"><span>128398394</span></div>
      </td>
      <td class="prismea-table--cell -right">
        <div class="prismea-table--expanded-cell"><span>273</span></div>
      </td>
      <td class="prismea-table--cell -right">
        <div class="prismea-table--expanded-cell"><span>394404</span></div>
      </td>
      <td class="prismea-table--cell -right">
        <div class="prismea-table--expanded-cell"><span>2838</span></div>
      </td>
      <td class="prismea-table--cell -right">
        <div class="prismea-table--expanded-cell"><span>190</span></div>
      </td>
      <td class="prismea-table--cell -right">
        <div class="prismea-table--expanded-cell"><span>3948484</span></div>
      </td>
      <td class="prismea-table--cell -right">
        <div class="prismea-table--expanded-cell"><span>28383</span></div>
      </td>
      <td class="prismea-table--cell -right">
        <div class="prismea-table--expanded-cell"><span>19233</span></div>
      </td>
      <td class="prismea-table--cell -right">
        <div class="prismea-table--expanded-cell"><span>9448437</span></div>
      </td>
      <td class="prismea-table--cell -right">
        <div class="prismea-table--expanded-cell"><span>292923847482</span></div>
      </td>
      <td class="prismea-table--cell -right">
        <div class="prismea-table--expanded-cell"><span>2737489</span></div>
      </td>
    </tr>
  </tbody>
</table>
<table class="analytics-table prismea-table -default bg-color-purple--50 -text-sm  -collapsed">
  <thead class="prismea-table--head">
    <tr class="prismea-table--line">
      <th class="prismea-table--cell -width-200">
        <div class="analytics-table__title">
          <svg class="icon-32 icon-color-purple--600">
            <use href="/svg/32x32/line/transaction-incoming.svg#transaction-incoming-line-32"></use>
          </svg><span class="color-purple--600">Label</span>
          <svg class="icon-16 icon-rotate-180">
            <use href="/svg/16x16/line/chevron-up.svg#chevron-up-line-16"></use>
          </svg>
        </div>
      </th>
      <th class="prismea-table--cell -right -width-100"><span class="color-grey--900">178394</span></th>
      <th class="prismea-table--cell -right -width-100"><span class="color-grey--900">178394</span></th>
      <th class="prismea-table--cell -right -width-100"><span class="color-grey--900">178394</span></th>
      <th class="prismea-table--cell -right -width-100"><span class="color-grey--900">178394</span></th>
      <th class="prismea-table--cell -right -width-100"><span class="color-grey--900">178394</span></th>
      <th class="prismea-table--cell -right -width-100"><span class="color-grey--900">178394</span></th>
      <th class="prismea-table--cell -right -width-100"><span class="color-grey--900">178394</span></th>
      <th class="prismea-table--cell -right -width-100"><span class="color-grey--900">178394</span></th>
      <th class="prismea-table--cell -right -width-100"><span class="color-grey--900">178394</span></th>
      <th class="prismea-table--cell -right -width-100"><span class="color-grey--900">178394</span></th>
      <th class="prismea-table--cell -right -width-100"><span class="color-grey--900">178394</span></th>
      <th class="prismea-table--cell -right -width-100"><span class="color-grey--900">178394</span></th>
      <th class="prismea-table--cell -right -width-100"><span class="color-grey--900">178394</span></th>
    </tr>
  </thead>
  <tbody class="prismea-table--body">
    <tr class="prismea-table--line ion--hoverable">
      <td class="prismea-table--cell">
        <div class="analytics-table__title"><span>Category 1</span>
          <svg class="icon-16 icon-rotate-180">
            <use href="/svg/16x16/line/chevron-up.svg#chevron-up-line-16"></use>
          </svg>
        </div>
      </td>
      <td class="prismea-table--cell -right"><span>17200</span></td>
      <td class="prismea-table--cell -right"><span>16374</span></td>
      <td class="prismea-table--cell -right"><span>128398394</span></td>
      <td class="prismea-table--cell -right"><span>273</span></td>
      <td class="prismea-table--cell -right"><span>394404</span></td>
      <td class="prismea-table--cell -right"><span>2838</span></td>
      <td class="prismea-table--cell -right"><span>190</span></td>
      <td class="prismea-table--cell -right"><span>3948484</span></td>
      <td class="prismea-table--cell -right"><span>28383</span></td>
      <td class="prismea-table--cell -right"><span>19233</span></td>
      <td class="prismea-table--cell -right"><span>9448437</span></td>
      <td class="prismea-table--cell -right"><span>292923847482</span></td>
      <td class="prismea-table--cell -right"><span>2737489</span></td>
    </tr>
    <tr class="prismea-table--line ion--hoverable -selected">
      <td class="prismea-table--cell">
        <div class="analytics-table__title"><span>Category 2</span>
          <svg class="icon-16">
            <use href="/svg/16x16/line/chevron-up.svg#chevron-up-line-16"></use>
          </svg>
        </div>
      </td>
      <td class="prismea-table--cell -right"><span>17200</span></td>
      <td class="prismea-table--cell -right"><span>16374</span></td>
      <td class="prismea-table--cell -right"><span>128398394</span></td>
      <td class="prismea-table--cell -right"><span>273</span></td>
      <td class="prismea-table--cell -right"><span>394404</span></td>
      <td class="prismea-table--cell -right"><span>2838</span></td>
      <td class="prismea-table--cell -right"><span>190</span></td>
      <td class="prismea-table--cell -right"><span>3948484</span></td>
      <td class="prismea-table--cell -right"><span>28383</span></td>
      <td class="prismea-table--cell -right"><span>19233</span></td>
      <td class="prismea-table--cell -right"><span>9448437</span></td>
      <td class="prismea-table--cell -right"><span>292923847482</span></td>
      <td class="prismea-table--cell -right"><span>2737489</span></td>
    </tr>
    <tr class="prismea-table--line ion--expanded">
      <td class="prismea-table--cell">
        <div class="prismea-table--expanded-cell"><span>Tag 1</span></div>
      </td>
      <td class="prismea-table--cell -right">
        <div class="prismea-table--expanded-cell"><span>17200</span></div>
      </td>
      <td class="prismea-table--cell -right">
        <div class="prismea-table--expanded-cell"><span>16374</span></div>
      </td>
      <td class="prismea-table--cell -right">
        <div class="prismea-table--expanded-cell"><span>128398394</span></div>
      </td>
      <td class="prismea-table--cell -right">
        <div class="prismea-table--expanded-cell"><span>273</span></div>
      </td>
      <td class="prismea-table--cell -right">
        <div class="prismea-table--expanded-cell"><span>394404</span></div>
      </td>
      <td class="prismea-table--cell -right">
        <div class="prismea-table--expanded-cell"><span>2838</span></div>
      </td>
      <td class="prismea-table--cell -right">
        <div class="prismea-table--expanded-cell"><span>190</span></div>
      </td>
      <td class="prismea-table--cell -right">
        <div class="prismea-table--expanded-cell"><span>3948484</span></div>
      </td>
      <td class="prismea-table--cell -right">
        <div class="prismea-table--expanded-cell"><span>28383</span></div>
      </td>
      <td class="prismea-table--cell -right">
        <div class="prismea-table--expanded-cell"><span>19233</span></div>
      </td>
      <td class="prismea-table--cell -right">
        <div class="prismea-table--expanded-cell"><span>9448437</span></div>
      </td>
      <td class="prismea-table--cell -right">
        <div class="prismea-table--expanded-cell"><span>292923847482</span></div>
      </td>
      <td class="prismea-table--cell -right">
        <div class="prismea-table--expanded-cell"><span>2737489</span></div>
      </td>
    </tr>
    <tr class="prismea-table--line ion--expanded">
      <td class="prismea-table--cell">
        <div class="prismea-table--expanded-cell"><span> Tag 2</span></div>
      </td>
      <td class="prismea-table--cell -right">
        <div class="prismea-table--expanded-cell"><span>17200</span></div>
      </td>
      <td class="prismea-table--cell -right">
        <div class="prismea-table--expanded-cell"><span>16374</span></div>
      </td>
      <td class="prismea-table--cell -right">
        <div class="prismea-table--expanded-cell"><span>128398394</span></div>
      </td>
      <td class="prismea-table--cell -right">
        <div class="prismea-table--expanded-cell"><span>273</span></div>
      </td>
      <td class="prismea-table--cell -right">
        <div class="prismea-table--expanded-cell"><span>394404</span></div>
      </td>
      <td class="prismea-table--cell -right">
        <div class="prismea-table--expanded-cell"><span>2838</span></div>
      </td>
      <td class="prismea-table--cell -right">
        <div class="prismea-table--expanded-cell"><span>190</span></div>
      </td>
      <td class="prismea-table--cell -right">
        <div class="prismea-table--expanded-cell"><span>3948484</span></div>
      </td>
      <td class="prismea-table--cell -right">
        <div class="prismea-table--expanded-cell"><span>28383</span></div>
      </td>
      <td class="prismea-table--cell -right">
        <div class="prismea-table--expanded-cell"><span>19233</span></div>
      </td>
      <td class="prismea-table--cell -right">
        <div class="prismea-table--expanded-cell"><span>9448437</span></div>
      </td>
      <td class="prismea-table--cell -right">
        <div class="prismea-table--expanded-cell"><span>292923847482</span></div>
      </td>
      <td class="prismea-table--cell -right">
        <div class="prismea-table--expanded-cell"><span>2737489</span></div>
      </td>
    </tr>
    <tr class="prismea-table--line ion--expanded">
      <td class="prismea-table--cell">
        <div class="prismea-table--expanded-cell"><span>Tag 3</span></div>
      </td>
      <td class="prismea-table--cell -right">
        <div class="prismea-table--expanded-cell"><span>17200</span></div>
      </td>
      <td class="prismea-table--cell -right">
        <div class="prismea-table--expanded-cell"><span>16374</span></div>
      </td>
      <td class="prismea-table--cell -right">
        <div class="prismea-table--expanded-cell"><span>128398394</span></div>
      </td>
      <td class="prismea-table--cell -right">
        <div class="prismea-table--expanded-cell"><span>273</span></div>
      </td>
      <td class="prismea-table--cell -right">
        <div class="prismea-table--expanded-cell"><span>394404</span></div>
      </td>
      <td class="prismea-table--cell -right">
        <div class="prismea-table--expanded-cell"><span>2838</span></div>
      </td>
      <td class="prismea-table--cell -right">
        <div class="prismea-table--expanded-cell"><span>190</span></div>
      </td>
      <td class="prismea-table--cell -right">
        <div class="prismea-table--expanded-cell"><span>3948484</span></div>
      </td>
      <td class="prismea-table--cell -right">
        <div class="prismea-table--expanded-cell"><span>28383</span></div>
      </td>
      <td class="prismea-table--cell -right">
        <div class="prismea-table--expanded-cell"><span>19233</span></div>
      </td>
      <td class="prismea-table--cell -right">
        <div class="prismea-table--expanded-cell"><span>9448437</span></div>
      </td>
      <td class="prismea-table--cell -right">
        <div class="prismea-table--expanded-cell"><span>292923847482</span></div>
      </td>
      <td class="prismea-table--cell -right">
        <div class="prismea-table--expanded-cell"><span>2737489</span></div>
      </td>
    </tr>
  </tbody>
</table>
<h3>Collapsed View</h3>
<table class="analytics-table prismea-table -default  -text-sm  -collapsed">
  <thead class="prismea-table--head">
    <tr class="prismea-table--line">
      <th class="prismea-table--cell -width-200">
        <div class="analytics-table__title">
          <svg class="icon-32 color-warning--700">
            <use href="/svg/32x32/line/transaction-incoming.svg#transaction-incoming-line-32"></use>
          </svg><span class="color-warning--700">Label</span>
          <svg class="icon-16 icon-rotate-180">
            <use href="/svg/16x16/line/chevron-up.svg#chevron-up-line-16"></use>
          </svg>
        </div>
      </th>
      <th class="prismea-table--cell -right -width-100"><span class="color-grey--900">178394</span></th>
      <th class="prismea-table--cell -right -width-100"><span class="color-grey--900">178394</span></th>
      <th class="prismea-table--cell -right -width-100"><span class="color-grey--900">178394</span></th>
      <th class="prismea-table--cell -right -width-100"><span class="color-grey--900">178394</span></th>
      <th class="prismea-table--cell -right -width-100"><span class="color-grey--900">178394</span></th>
      <th class="prismea-table--cell -right -width-100"><span class="color-grey--900">178394</span></th>
      <th class="prismea-table--cell -right -width-100"><span class="color-grey--900">178394</span></th>
      <th class="prismea-table--cell -right -width-100"><span class="color-grey--900">178394</span></th>
      <th class="prismea-table--cell -right -width-100"><span class="color-grey--900">178394</span></th>
      <th class="prismea-table--cell -right -width-100"><span class="color-grey--900">178394</span></th>
      <th class="prismea-table--cell -right -width-100"><span class="color-grey--900">178394</span></th>
      <th class="prismea-table--cell -right -width-100"><span class="color-grey--900">178394</span></th>
      <th class="prismea-table--cell -right -width-100"><span class="color-grey--900">178394</span></th>
    </tr>
  </thead>
  <tbody class="prismea-table--body">
    <tr class="prismea-table--line ion--hoverable">
      <td class="prismea-table--cell">
        <div class="analytics-table__title"><span>Category 1</span>
          <svg class="icon-16 icon-rotate-180">
            <use href="/svg/16x16/line/chevron-up.svg#chevron-up-line-16"></use>
          </svg>
        </div>
      </td>
      <td class="prismea-table--cell -right"><span>17200</span></td>
      <td class="prismea-table--cell -right"><span>16374</span></td>
      <td class="prismea-table--cell -right"><span>128398394</span></td>
      <td class="prismea-table--cell -right"><span>273</span></td>
      <td class="prismea-table--cell -right"><span>394404</span></td>
      <td class="prismea-table--cell -right"><span>2838</span></td>
      <td class="prismea-table--cell -right"><span>190</span></td>
      <td class="prismea-table--cell -right"><span>3948484</span></td>
      <td class="prismea-table--cell -right"><span>28383</span></td>
      <td class="prismea-table--cell -right"><span>19233</span></td>
      <td class="prismea-table--cell -right"><span>9448437</span></td>
      <td class="prismea-table--cell -right"><span>292923847482</span></td>
      <td class="prismea-table--cell -right"><span>2737489</span></td>
    </tr>
    <tr class="prismea-table--line ion--hoverable -selected">
      <td class="prismea-table--cell">
        <div class="analytics-table__title"><span>Category 2</span>
          <svg class="icon-16">
            <use href="/svg/16x16/line/chevron-up.svg#chevron-up-line-16"></use>
          </svg>
        </div>
      </td>
      <td class="prismea-table--cell -right"><span>17200</span></td>
      <td class="prismea-table--cell -right"><span>16374</span></td>
      <td class="prismea-table--cell -right"><span>128398394</span></td>
      <td class="prismea-table--cell -right"><span>273</span></td>
      <td class="prismea-table--cell -right"><span>394404</span></td>
      <td class="prismea-table--cell -right"><span>2838</span></td>
      <td class="prismea-table--cell -right"><span>190</span></td>
      <td class="prismea-table--cell -right"><span>3948484</span></td>
      <td class="prismea-table--cell -right"><span>28383</span></td>
      <td class="prismea-table--cell -right"><span>19233</span></td>
      <td class="prismea-table--cell -right"><span>9448437</span></td>
      <td class="prismea-table--cell -right"><span>292923847482</span></td>
      <td class="prismea-table--cell -right"><span>2737489</span></td>
    </tr>
    <tr class="prismea-table--line ion--expanded">
      <td class="prismea-table--cell">
        <div class="prismea-table--expanded-cell"><span>Tag 1</span></div>
      </td>
      <td class="prismea-table--cell -right">
        <div class="prismea-table--expanded-cell"><span>17200</span></div>
      </td>
      <td class="prismea-table--cell -right">
        <div class="prismea-table--expanded-cell"><span>16374</span></div>
      </td>
      <td class="prismea-table--cell -right">
        <div class="prismea-table--expanded-cell"><span>128398394</span></div>
      </td>
      <td class="prismea-table--cell -right">
        <div class="prismea-table--expanded-cell"><span>273</span></div>
      </td>
      <td class="prismea-table--cell -right">
        <div class="prismea-table--expanded-cell"><span>394404</span></div>
      </td>
      <td class="prismea-table--cell -right">
        <div class="prismea-table--expanded-cell"><span>2838</span></div>
      </td>
      <td class="prismea-table--cell -right">
        <div class="prismea-table--expanded-cell"><span>190</span></div>
      </td>
      <td class="prismea-table--cell -right">
        <div class="prismea-table--expanded-cell"><span>3948484</span></div>
      </td>
      <td class="prismea-table--cell -right">
        <div class="prismea-table--expanded-cell"><span>28383</span></div>
      </td>
      <td class="prismea-table--cell -right">
        <div class="prismea-table--expanded-cell"><span>19233</span></div>
      </td>
      <td class="prismea-table--cell -right">
        <div class="prismea-table--expanded-cell"><span>9448437</span></div>
      </td>
      <td class="prismea-table--cell -right">
        <div class="prismea-table--expanded-cell"><span>292923847482</span></div>
      </td>
      <td class="prismea-table--cell -right">
        <div class="prismea-table--expanded-cell"><span>2737489</span></div>
      </td>
    </tr>
    <tr class="prismea-table--line ion--expanded">
      <td class="prismea-table--cell">
        <div class="prismea-table--expanded-cell"><span> Tag 2</span></div>
      </td>
      <td class="prismea-table--cell -right">
        <div class="prismea-table--expanded-cell"><span>17200</span></div>
      </td>
      <td class="prismea-table--cell -right">
        <div class="prismea-table--expanded-cell"><span>16374</span></div>
      </td>
      <td class="prismea-table--cell -right">
        <div class="prismea-table--expanded-cell"><span>128398394</span></div>
      </td>
      <td class="prismea-table--cell -right">
        <div class="prismea-table--expanded-cell"><span>273</span></div>
      </td>
      <td class="prismea-table--cell -right">
        <div class="prismea-table--expanded-cell"><span>394404</span></div>
      </td>
      <td class="prismea-table--cell -right">
        <div class="prismea-table--expanded-cell"><span>2838</span></div>
      </td>
      <td class="prismea-table--cell -right">
        <div class="prismea-table--expanded-cell"><span>190</span></div>
      </td>
      <td class="prismea-table--cell -right">
        <div class="prismea-table--expanded-cell"><span>3948484</span></div>
      </td>
      <td class="prismea-table--cell -right">
        <div class="prismea-table--expanded-cell"><span>28383</span></div>
      </td>
      <td class="prismea-table--cell -right">
        <div class="prismea-table--expanded-cell"><span>19233</span></div>
      </td>
      <td class="prismea-table--cell -right">
        <div class="prismea-table--expanded-cell"><span>9448437</span></div>
      </td>
      <td class="prismea-table--cell -right">
        <div class="prismea-table--expanded-cell"><span>292923847482</span></div>
      </td>
      <td class="prismea-table--cell -right">
        <div class="prismea-table--expanded-cell"><span>2737489</span></div>
      </td>
    </tr>
    <tr class="prismea-table--line ion--expanded">
      <td class="prismea-table--cell">
        <div class="prismea-table--expanded-cell"><span>Tag 3</span></div>
      </td>
      <td class="prismea-table--cell -right">
        <div class="prismea-table--expanded-cell"><span>17200</span></div>
      </td>
      <td class="prismea-table--cell -right">
        <div class="prismea-table--expanded-cell"><span>16374</span></div>
      </td>
      <td class="prismea-table--cell -right">
        <div class="prismea-table--expanded-cell"><span>128398394</span></div>
      </td>
      <td class="prismea-table--cell -right">
        <div class="prismea-table--expanded-cell"><span>273</span></div>
      </td>
      <td class="prismea-table--cell -right">
        <div class="prismea-table--expanded-cell"><span>394404</span></div>
      </td>
      <td class="prismea-table--cell -right">
        <div class="prismea-table--expanded-cell"><span>2838</span></div>
      </td>
      <td class="prismea-table--cell -right">
        <div class="prismea-table--expanded-cell"><span>190</span></div>
      </td>
      <td class="prismea-table--cell -right">
        <div class="prismea-table--expanded-cell"><span>3948484</span></div>
      </td>
      <td class="prismea-table--cell -right">
        <div class="prismea-table--expanded-cell"><span>28383</span></div>
      </td>
      <td class="prismea-table--cell -right">
        <div class="prismea-table--expanded-cell"><span>19233</span></div>
      </td>
      <td class="prismea-table--cell -right">
        <div class="prismea-table--expanded-cell"><span>9448437</span></div>
      </td>
      <td class="prismea-table--cell -right">
        <div class="prismea-table--expanded-cell"><span>292923847482</span></div>
      </td>
      <td class="prismea-table--cell -right">
        <div class="prismea-table--expanded-cell"><span>2737489</span></div>
      </td>
    </tr>
  </tbody>
</table>
<h3>Expanded View</h3>
<table class="analytics-table prismea-table -default  -text-sm ">
  <thead class="prismea-table--head">
    <tr class="prismea-table--line">
      <th class="prismea-table--cell -width-200">
        <div class="analytics-table__title">
          <svg class="icon-32 color-warning--700">
            <use href="/svg/32x32/line/transaction-incoming.svg#transaction-incoming-line-32"></use>
          </svg><span class="color-warning--700">Label</span>
          <svg class="icon-16 icon-rotate-180">
            <use href="/svg/16x16/line/chevron-up.svg#chevron-up-line-16"></use>
          </svg>
        </div>
      </th>
      <th class="prismea-table--cell -right -width-100"><span class="color-grey--900">178394</span></th>
      <th class="prismea-table--cell -right -width-100"><span class="color-grey--900">178394</span></th>
      <th class="prismea-table--cell -right -width-100"><span class="color-grey--900">178394</span></th>
      <th class="prismea-table--cell -right -width-100"><span class="color-grey--900">178394</span></th>
      <th class="prismea-table--cell -right -width-100"><span class="color-grey--900">178394</span></th>
      <th class="prismea-table--cell -right -width-100"><span class="color-grey--900">178394</span></th>
      <th class="prismea-table--cell -right -width-100"><span class="color-grey--900">178394</span></th>
      <th class="prismea-table--cell -right -width-100"><span class="color-grey--900">178394</span></th>
      <th class="prismea-table--cell -right -width-100"><span class="color-grey--900">178394</span></th>
      <th class="prismea-table--cell -right -width-100"><span class="color-grey--900">178394</span></th>
      <th class="prismea-table--cell -right -width-100"><span class="color-grey--900">178394</span></th>
      <th class="prismea-table--cell -right -width-100"><span class="color-grey--900">178394</span></th>
      <th class="prismea-table--cell -right -width-100"><span class="color-grey--900">178394</span></th>
    </tr>
  </thead>
  <tbody class="prismea-table--body">
    <tr class="prismea-table--line ion--hoverable">
      <td class="prismea-table--cell">
        <div class="analytics-table__title"><span>Category 1</span>
          <svg class="icon-16 icon-rotate-180">
            <use href="/svg/16x16/line/chevron-up.svg#chevron-up-line-16"></use>
          </svg>
        </div>
      </td>
      <td class="prismea-table--cell -right"><span>17200</span></td>
      <td class="prismea-table--cell -right"><span>16374</span></td>
      <td class="prismea-table--cell -right"><span>128398394</span></td>
      <td class="prismea-table--cell -right"><span>273</span></td>
      <td class="prismea-table--cell -right"><span>394404</span></td>
      <td class="prismea-table--cell -right"><span>2838</span></td>
      <td class="prismea-table--cell -right"><span>190</span></td>
      <td class="prismea-table--cell -right"><span>3948484</span></td>
      <td class="prismea-table--cell -right"><span>28383</span></td>
      <td class="prismea-table--cell -right"><span>19233</span></td>
      <td class="prismea-table--cell -right"><span>9448437</span></td>
      <td class="prismea-table--cell -right"><span>292923847482</span></td>
      <td class="prismea-table--cell -right"><span>2737489</span></td>
    </tr>
    <tr class="prismea-table--line ion--hoverable -selected">
      <td class="prismea-table--cell">
        <div class="analytics-table__title"><span>Category 2</span>
          <svg class="icon-16">
            <use href="/svg/16x16/line/chevron-up.svg#chevron-up-line-16"></use>
          </svg>
        </div>
      </td>
      <td class="prismea-table--cell -right"><span>17200</span></td>
      <td class="prismea-table--cell -right"><span>16374</span></td>
      <td class="prismea-table--cell -right"><span>128398394</span></td>
      <td class="prismea-table--cell -right"><span>273</span></td>
      <td class="prismea-table--cell -right"><span>394404</span></td>
      <td class="prismea-table--cell -right"><span>2838</span></td>
      <td class="prismea-table--cell -right"><span>190</span></td>
      <td class="prismea-table--cell -right"><span>3948484</span></td>
      <td class="prismea-table--cell -right"><span>28383</span></td>
      <td class="prismea-table--cell -right"><span>19233</span></td>
      <td class="prismea-table--cell -right"><span>9448437</span></td>
      <td class="prismea-table--cell -right"><span>292923847482</span></td>
      <td class="prismea-table--cell -right"><span>2737489</span></td>
    </tr>
    <tr class="prismea-table--line ion--expanded">
      <td class="prismea-table--cell">
        <div class="prismea-table--expanded-cell"><span>Tag 1</span></div>
      </td>
      <td class="prismea-table--cell -right">
        <div class="prismea-table--expanded-cell"><span>17200</span></div>
      </td>
      <td class="prismea-table--cell -right">
        <div class="prismea-table--expanded-cell"><span>16374</span></div>
      </td>
      <td class="prismea-table--cell -right">
        <div class="prismea-table--expanded-cell"><span>128398394</span></div>
      </td>
      <td class="prismea-table--cell -right">
        <div class="prismea-table--expanded-cell"><span>273</span></div>
      </td>
      <td class="prismea-table--cell -right">
        <div class="prismea-table--expanded-cell"><span>394404</span></div>
      </td>
      <td class="prismea-table--cell -right">
        <div class="prismea-table--expanded-cell"><span>2838</span></div>
      </td>
      <td class="prismea-table--cell -right">
        <div class="prismea-table--expanded-cell"><span>190</span></div>
      </td>
      <td class="prismea-table--cell -right">
        <div class="prismea-table--expanded-cell"><span>3948484</span></div>
      </td>
      <td class="prismea-table--cell -right">
        <div class="prismea-table--expanded-cell"><span>28383</span></div>
      </td>
      <td class="prismea-table--cell -right">
        <div class="prismea-table--expanded-cell"><span>19233</span></div>
      </td>
      <td class="prismea-table--cell -right">
        <div class="prismea-table--expanded-cell"><span>9448437</span></div>
      </td>
      <td class="prismea-table--cell -right">
        <div class="prismea-table--expanded-cell"><span>292923847482</span></div>
      </td>
      <td class="prismea-table--cell -right">
        <div class="prismea-table--expanded-cell"><span>2737489</span></div>
      </td>
    </tr>
    <tr class="prismea-table--line ion--expanded">
      <td class="prismea-table--cell">
        <div class="prismea-table--expanded-cell"><span> Tag 2</span></div>
      </td>
      <td class="prismea-table--cell -right">
        <div class="prismea-table--expanded-cell"><span>17200</span></div>
      </td>
      <td class="prismea-table--cell -right">
        <div class="prismea-table--expanded-cell"><span>16374</span></div>
      </td>
      <td class="prismea-table--cell -right">
        <div class="prismea-table--expanded-cell"><span>128398394</span></div>
      </td>
      <td class="prismea-table--cell -right">
        <div class="prismea-table--expanded-cell"><span>273</span></div>
      </td>
      <td class="prismea-table--cell -right">
        <div class="prismea-table--expanded-cell"><span>394404</span></div>
      </td>
      <td class="prismea-table--cell -right">
        <div class="prismea-table--expanded-cell"><span>2838</span></div>
      </td>
      <td class="prismea-table--cell -right">
        <div class="prismea-table--expanded-cell"><span>190</span></div>
      </td>
      <td class="prismea-table--cell -right">
        <div class="prismea-table--expanded-cell"><span>3948484</span></div>
      </td>
      <td class="prismea-table--cell -right">
        <div class="prismea-table--expanded-cell"><span>28383</span></div>
      </td>
      <td class="prismea-table--cell -right">
        <div class="prismea-table--expanded-cell"><span>19233</span></div>
      </td>
      <td class="prismea-table--cell -right">
        <div class="prismea-table--expanded-cell"><span>9448437</span></div>
      </td>
      <td class="prismea-table--cell -right">
        <div class="prismea-table--expanded-cell"><span>292923847482</span></div>
      </td>
      <td class="prismea-table--cell -right">
        <div class="prismea-table--expanded-cell"><span>2737489</span></div>
      </td>
    </tr>
    <tr class="prismea-table--line ion--expanded">
      <td class="prismea-table--cell">
        <div class="prismea-table--expanded-cell"><span>Tag 3</span></div>
      </td>
      <td class="prismea-table--cell -right">
        <div class="prismea-table--expanded-cell"><span>17200</span></div>
      </td>
      <td class="prismea-table--cell -right">
        <div class="prismea-table--expanded-cell"><span>16374</span></div>
      </td>
      <td class="prismea-table--cell -right">
        <div class="prismea-table--expanded-cell"><span>128398394</span></div>
      </td>
      <td class="prismea-table--cell -right">
        <div class="prismea-table--expanded-cell"><span>273</span></div>
      </td>
      <td class="prismea-table--cell -right">
        <div class="prismea-table--expanded-cell"><span>394404</span></div>
      </td>
      <td class="prismea-table--cell -right">
        <div class="prismea-table--expanded-cell"><span>2838</span></div>
      </td>
      <td class="prismea-table--cell -right">
        <div class="prismea-table--expanded-cell"><span>190</span></div>
      </td>
      <td class="prismea-table--cell -right">
        <div class="prismea-table--expanded-cell"><span>3948484</span></div>
      </td>
      <td class="prismea-table--cell -right">
        <div class="prismea-table--expanded-cell"><span>28383</span></div>
      </td>
      <td class="prismea-table--cell -right">
        <div class="prismea-table--expanded-cell"><span>19233</span></div>
      </td>
      <td class="prismea-table--cell -right">
        <div class="prismea-table--expanded-cell"><span>9448437</span></div>
      </td>
      <td class="prismea-table--cell -right">
        <div class="prismea-table--expanded-cell"><span>292923847482</span></div>
      </td>
      <td class="prismea-table--cell -right">
        <div class="prismea-table--expanded-cell"><span>2737489</span></div>
      </td>
    </tr>
  </tbody>
</table>
h3 Single Row
table.analytics-table.prismea-table.-default.bg-color-sapin--50.-text-sm.-collapsed
  thead.prismea-table--head
    tr.prismea-table--line
      th.prismea-table--cell.-width-200
        .analytics-table__title
          svg.icon-32.icon-color-sapin--600
            use(href='/svg/32x32/line/transaction-incoming.svg#transaction-incoming-line-32')
          span.color-sapin--600 Label
          svg.icon-16.icon-rotate-180
            use(href='/svg/16x16/line/chevron-up.svg#chevron-up-line-16')
      th.prismea-table--cell.-right.-width-100
        span.color-grey--900 178394
      th.prismea-table--cell.-right.-width-100
        span.color-grey--900 178394
      th.prismea-table--cell.-right.-width-100
        span.color-grey--900 178394
      th.prismea-table--cell.-right.-width-100
        span.color-grey--900 178394
      th.prismea-table--cell.-right.-width-100
        span.color-grey--900 178394
      th.prismea-table--cell.-right.-width-100
        span.color-grey--900 178394
      th.prismea-table--cell.-right.-width-100
        span.color-grey--900 178394
      th.prismea-table--cell.-right.-width-100
        span.color-grey--900 178394
      th.prismea-table--cell.-right.-width-100
        span.color-grey--900 178394
      th.prismea-table--cell.-right.-width-100
        span.color-grey--900 178394
      th.prismea-table--cell.-right.-width-100
        span.color-grey--900 178394
      th.prismea-table--cell.-right.-width-100
        span.color-grey--900 178394
      th.prismea-table--cell.-right.-width-100
        span.color-grey--900 178394
  tbody.prismea-table--body
    tr.prismea-table--line.ion--hoverable
      td.prismea-table--cell
        .analytics-table__title
          span Category 1
          svg.icon-16.icon-rotate-180
            use(href='/svg/16x16/line/chevron-up.svg#chevron-up-line-16')
      td.prismea-table--cell.-right
        span 17200
      td.prismea-table--cell.-right
        span 16374
      td.prismea-table--cell.-right
        span 128398394
      td.prismea-table--cell.-right
        span 273
      td.prismea-table--cell.-right
        span 394404
      td.prismea-table--cell.-right
        span 2838
      td.prismea-table--cell.-right
        span 190
      td.prismea-table--cell.-right
        span 3948484
      td.prismea-table--cell.-right
        span 28383
      td.prismea-table--cell.-right
        span 19233
      td.prismea-table--cell.-right
        span 9448437
      td.prismea-table--cell.-right
        span 292923847482
      td.prismea-table--cell.-right
        span 2737489
    tr.prismea-table--line.ion--hoverable.-selected
      td.prismea-table--cell
        .analytics-table__title
          span Category 2
          svg.icon-16
            use(href='/svg/16x16/line/chevron-up.svg#chevron-up-line-16')
      td.prismea-table--cell.-right
        span 17200
      td.prismea-table--cell.-right
        span 16374
      td.prismea-table--cell.-right
        span 128398394
      td.prismea-table--cell.-right
        span 273
      td.prismea-table--cell.-right
        span 394404
      td.prismea-table--cell.-right
        span 2838
      td.prismea-table--cell.-right
        span 190
      td.prismea-table--cell.-right
        span 3948484
      td.prismea-table--cell.-right
        span 28383
      td.prismea-table--cell.-right
        span 19233
      td.prismea-table--cell.-right
        span 9448437
      td.prismea-table--cell.-right
        span 292923847482
      td.prismea-table--cell.-right
        span 2737489
    tr.prismea-table--line.ion--expanded
      td.prismea-table--cell
        .prismea-table--expanded-cell
          span Tag 1
      td.prismea-table--cell.-right
        .prismea-table--expanded-cell
          span 17200
      td.prismea-table--cell.-right
        .prismea-table--expanded-cell
          span 16374
      td.prismea-table--cell.-right
        .prismea-table--expanded-cell
          span 128398394
      td.prismea-table--cell.-right
        .prismea-table--expanded-cell
          span 273
      td.prismea-table--cell.-right
        .prismea-table--expanded-cell
          span 394404
      td.prismea-table--cell.-right
        .prismea-table--expanded-cell
          span 2838
      td.prismea-table--cell.-right
        .prismea-table--expanded-cell
          span 190
      td.prismea-table--cell.-right
        .prismea-table--expanded-cell
          span 3948484
      td.prismea-table--cell.-right
        .prismea-table--expanded-cell
          span 28383
      td.prismea-table--cell.-right
        .prismea-table--expanded-cell
          span 19233
      td.prismea-table--cell.-right
        .prismea-table--expanded-cell
          span 9448437
      td.prismea-table--cell.-right
        .prismea-table--expanded-cell
          span 292923847482
      td.prismea-table--cell.-right
        .prismea-table--expanded-cell
          span 2737489
    tr.prismea-table--line.ion--expanded
      td.prismea-table--cell
        .prismea-table--expanded-cell
          span Tag 2
      td.prismea-table--cell.-right
        .prismea-table--expanded-cell
          span 17200
      td.prismea-table--cell.-right
        .prismea-table--expanded-cell
          span 16374
      td.prismea-table--cell.-right
        .prismea-table--expanded-cell
          span 128398394
      td.prismea-table--cell.-right
        .prismea-table--expanded-cell
          span 273
      td.prismea-table--cell.-right
        .prismea-table--expanded-cell
          span 394404
      td.prismea-table--cell.-right
        .prismea-table--expanded-cell
          span 2838
      td.prismea-table--cell.-right
        .prismea-table--expanded-cell
          span 190
      td.prismea-table--cell.-right
        .prismea-table--expanded-cell
          span 3948484
      td.prismea-table--cell.-right
        .prismea-table--expanded-cell
          span 28383
      td.prismea-table--cell.-right
        .prismea-table--expanded-cell
          span 19233
      td.prismea-table--cell.-right
        .prismea-table--expanded-cell
          span 9448437
      td.prismea-table--cell.-right
        .prismea-table--expanded-cell
          span 292923847482
      td.prismea-table--cell.-right
        .prismea-table--expanded-cell
          span 2737489
    tr.prismea-table--line.ion--expanded
      td.prismea-table--cell
        .prismea-table--expanded-cell
          span Tag 3
      td.prismea-table--cell.-right
        .prismea-table--expanded-cell
          span 17200
      td.prismea-table--cell.-right
        .prismea-table--expanded-cell
          span 16374
      td.prismea-table--cell.-right
        .prismea-table--expanded-cell
          span 128398394
      td.prismea-table--cell.-right
        .prismea-table--expanded-cell
          span 273
      td.prismea-table--cell.-right
        .prismea-table--expanded-cell
          span 394404
      td.prismea-table--cell.-right
        .prismea-table--expanded-cell
          span 2838
      td.prismea-table--cell.-right
        .prismea-table--expanded-cell
          span 190
      td.prismea-table--cell.-right
        .prismea-table--expanded-cell
          span 3948484
      td.prismea-table--cell.-right
        .prismea-table--expanded-cell
          span 28383
      td.prismea-table--cell.-right
        .prismea-table--expanded-cell
          span 19233
      td.prismea-table--cell.-right
        .prismea-table--expanded-cell
          span 9448437
      td.prismea-table--cell.-right
        .prismea-table--expanded-cell
          span 292923847482
      td.prismea-table--cell.-right
        .prismea-table--expanded-cell
          span 2737489
table.analytics-table.prismea-table.-default.bg-color-purple--50.-text-sm.-collapsed
  thead.prismea-table--head
    tr.prismea-table--line
      th.prismea-table--cell.-width-200
        .analytics-table__title
          svg.icon-32.icon-color-purple--600
            use(href='/svg/32x32/line/transaction-incoming.svg#transaction-incoming-line-32')
          span.color-purple--600 Label
          svg.icon-16.icon-rotate-180
            use(href='/svg/16x16/line/chevron-up.svg#chevron-up-line-16')
      th.prismea-table--cell.-right.-width-100
        span.color-grey--900 178394
      th.prismea-table--cell.-right.-width-100
        span.color-grey--900 178394
      th.prismea-table--cell.-right.-width-100
        span.color-grey--900 178394
      th.prismea-table--cell.-right.-width-100
        span.color-grey--900 178394
      th.prismea-table--cell.-right.-width-100
        span.color-grey--900 178394
      th.prismea-table--cell.-right.-width-100
        span.color-grey--900 178394
      th.prismea-table--cell.-right.-width-100
        span.color-grey--900 178394
      th.prismea-table--cell.-right.-width-100
        span.color-grey--900 178394
      th.prismea-table--cell.-right.-width-100
        span.color-grey--900 178394
      th.prismea-table--cell.-right.-width-100
        span.color-grey--900 178394
      th.prismea-table--cell.-right.-width-100
        span.color-grey--900 178394
      th.prismea-table--cell.-right.-width-100
        span.color-grey--900 178394
      th.prismea-table--cell.-right.-width-100
        span.color-grey--900 178394
  tbody.prismea-table--body
    tr.prismea-table--line.ion--hoverable
      td.prismea-table--cell
        .analytics-table__title
          span Category 1
          svg.icon-16.icon-rotate-180
            use(href='/svg/16x16/line/chevron-up.svg#chevron-up-line-16')
      td.prismea-table--cell.-right
        span 17200
      td.prismea-table--cell.-right
        span 16374
      td.prismea-table--cell.-right
        span 128398394
      td.prismea-table--cell.-right
        span 273
      td.prismea-table--cell.-right
        span 394404
      td.prismea-table--cell.-right
        span 2838
      td.prismea-table--cell.-right
        span 190
      td.prismea-table--cell.-right
        span 3948484
      td.prismea-table--cell.-right
        span 28383
      td.prismea-table--cell.-right
        span 19233
      td.prismea-table--cell.-right
        span 9448437
      td.prismea-table--cell.-right
        span 292923847482
      td.prismea-table--cell.-right
        span 2737489
    tr.prismea-table--line.ion--hoverable.-selected
      td.prismea-table--cell
        .analytics-table__title
          span Category 2
          svg.icon-16
            use(href='/svg/16x16/line/chevron-up.svg#chevron-up-line-16')
      td.prismea-table--cell.-right
        span 17200
      td.prismea-table--cell.-right
        span 16374
      td.prismea-table--cell.-right
        span 128398394
      td.prismea-table--cell.-right
        span 273
      td.prismea-table--cell.-right
        span 394404
      td.prismea-table--cell.-right
        span 2838
      td.prismea-table--cell.-right
        span 190
      td.prismea-table--cell.-right
        span 3948484
      td.prismea-table--cell.-right
        span 28383
      td.prismea-table--cell.-right
        span 19233
      td.prismea-table--cell.-right
        span 9448437
      td.prismea-table--cell.-right
        span 292923847482
      td.prismea-table--cell.-right
        span 2737489
    tr.prismea-table--line.ion--expanded
      td.prismea-table--cell
        .prismea-table--expanded-cell
          span Tag 1
      td.prismea-table--cell.-right
        .prismea-table--expanded-cell
          span 17200
      td.prismea-table--cell.-right
        .prismea-table--expanded-cell
          span 16374
      td.prismea-table--cell.-right
        .prismea-table--expanded-cell
          span 128398394
      td.prismea-table--cell.-right
        .prismea-table--expanded-cell
          span 273
      td.prismea-table--cell.-right
        .prismea-table--expanded-cell
          span 394404
      td.prismea-table--cell.-right
        .prismea-table--expanded-cell
          span 2838
      td.prismea-table--cell.-right
        .prismea-table--expanded-cell
          span 190
      td.prismea-table--cell.-right
        .prismea-table--expanded-cell
          span 3948484
      td.prismea-table--cell.-right
        .prismea-table--expanded-cell
          span 28383
      td.prismea-table--cell.-right
        .prismea-table--expanded-cell
          span 19233
      td.prismea-table--cell.-right
        .prismea-table--expanded-cell
          span 9448437
      td.prismea-table--cell.-right
        .prismea-table--expanded-cell
          span 292923847482
      td.prismea-table--cell.-right
        .prismea-table--expanded-cell
          span 2737489
    tr.prismea-table--line.ion--expanded
      td.prismea-table--cell
        .prismea-table--expanded-cell
          span Tag 2
      td.prismea-table--cell.-right
        .prismea-table--expanded-cell
          span 17200
      td.prismea-table--cell.-right
        .prismea-table--expanded-cell
          span 16374
      td.prismea-table--cell.-right
        .prismea-table--expanded-cell
          span 128398394
      td.prismea-table--cell.-right
        .prismea-table--expanded-cell
          span 273
      td.prismea-table--cell.-right
        .prismea-table--expanded-cell
          span 394404
      td.prismea-table--cell.-right
        .prismea-table--expanded-cell
          span 2838
      td.prismea-table--cell.-right
        .prismea-table--expanded-cell
          span 190
      td.prismea-table--cell.-right
        .prismea-table--expanded-cell
          span 3948484
      td.prismea-table--cell.-right
        .prismea-table--expanded-cell
          span 28383
      td.prismea-table--cell.-right
        .prismea-table--expanded-cell
          span 19233
      td.prismea-table--cell.-right
        .prismea-table--expanded-cell
          span 9448437
      td.prismea-table--cell.-right
        .prismea-table--expanded-cell
          span 292923847482
      td.prismea-table--cell.-right
        .prismea-table--expanded-cell
          span 2737489
    tr.prismea-table--line.ion--expanded
      td.prismea-table--cell
        .prismea-table--expanded-cell
          span Tag 3
      td.prismea-table--cell.-right
        .prismea-table--expanded-cell
          span 17200
      td.prismea-table--cell.-right
        .prismea-table--expanded-cell
          span 16374
      td.prismea-table--cell.-right
        .prismea-table--expanded-cell
          span 128398394
      td.prismea-table--cell.-right
        .prismea-table--expanded-cell
          span 273
      td.prismea-table--cell.-right
        .prismea-table--expanded-cell
          span 394404
      td.prismea-table--cell.-right
        .prismea-table--expanded-cell
          span 2838
      td.prismea-table--cell.-right
        .prismea-table--expanded-cell
          span 190
      td.prismea-table--cell.-right
        .prismea-table--expanded-cell
          span 3948484
      td.prismea-table--cell.-right
        .prismea-table--expanded-cell
          span 28383
      td.prismea-table--cell.-right
        .prismea-table--expanded-cell
          span 19233
      td.prismea-table--cell.-right
        .prismea-table--expanded-cell
          span 9448437
      td.prismea-table--cell.-right
        .prismea-table--expanded-cell
          span 292923847482
      td.prismea-table--cell.-right
        .prismea-table--expanded-cell
          span 2737489
h3 Collapsed View
table.analytics-table.prismea-table.-default.-text-sm.-collapsed
  thead.prismea-table--head
    tr.prismea-table--line
      th.prismea-table--cell.-width-200
        .analytics-table__title
          svg.icon-32.color-warning--700
            use(href='/svg/32x32/line/transaction-incoming.svg#transaction-incoming-line-32')
          span.color-warning--700 Label
          svg.icon-16.icon-rotate-180
            use(href='/svg/16x16/line/chevron-up.svg#chevron-up-line-16')
      th.prismea-table--cell.-right.-width-100
        span.color-grey--900 178394
      th.prismea-table--cell.-right.-width-100
        span.color-grey--900 178394
      th.prismea-table--cell.-right.-width-100
        span.color-grey--900 178394
      th.prismea-table--cell.-right.-width-100
        span.color-grey--900 178394
      th.prismea-table--cell.-right.-width-100
        span.color-grey--900 178394
      th.prismea-table--cell.-right.-width-100
        span.color-grey--900 178394
      th.prismea-table--cell.-right.-width-100
        span.color-grey--900 178394
      th.prismea-table--cell.-right.-width-100
        span.color-grey--900 178394
      th.prismea-table--cell.-right.-width-100
        span.color-grey--900 178394
      th.prismea-table--cell.-right.-width-100
        span.color-grey--900 178394
      th.prismea-table--cell.-right.-width-100
        span.color-grey--900 178394
      th.prismea-table--cell.-right.-width-100
        span.color-grey--900 178394
      th.prismea-table--cell.-right.-width-100
        span.color-grey--900 178394
  tbody.prismea-table--body
    tr.prismea-table--line.ion--hoverable
      td.prismea-table--cell
        .analytics-table__title
          span Category 1
          svg.icon-16.icon-rotate-180
            use(href='/svg/16x16/line/chevron-up.svg#chevron-up-line-16')
      td.prismea-table--cell.-right
        span 17200
      td.prismea-table--cell.-right
        span 16374
      td.prismea-table--cell.-right
        span 128398394
      td.prismea-table--cell.-right
        span 273
      td.prismea-table--cell.-right
        span 394404
      td.prismea-table--cell.-right
        span 2838
      td.prismea-table--cell.-right
        span 190
      td.prismea-table--cell.-right
        span 3948484
      td.prismea-table--cell.-right
        span 28383
      td.prismea-table--cell.-right
        span 19233
      td.prismea-table--cell.-right
        span 9448437
      td.prismea-table--cell.-right
        span 292923847482
      td.prismea-table--cell.-right
        span 2737489
    tr.prismea-table--line.ion--hoverable.-selected
      td.prismea-table--cell
        .analytics-table__title
          span Category 2
          svg.icon-16
            use(href='/svg/16x16/line/chevron-up.svg#chevron-up-line-16')
      td.prismea-table--cell.-right
        span 17200
      td.prismea-table--cell.-right
        span 16374
      td.prismea-table--cell.-right
        span 128398394
      td.prismea-table--cell.-right
        span 273
      td.prismea-table--cell.-right
        span 394404
      td.prismea-table--cell.-right
        span 2838
      td.prismea-table--cell.-right
        span 190
      td.prismea-table--cell.-right
        span 3948484
      td.prismea-table--cell.-right
        span 28383
      td.prismea-table--cell.-right
        span 19233
      td.prismea-table--cell.-right
        span 9448437
      td.prismea-table--cell.-right
        span 292923847482
      td.prismea-table--cell.-right
        span 2737489
    tr.prismea-table--line.ion--expanded
      td.prismea-table--cell
        .prismea-table--expanded-cell
          span Tag 1
      td.prismea-table--cell.-right
        .prismea-table--expanded-cell
          span 17200
      td.prismea-table--cell.-right
        .prismea-table--expanded-cell
          span 16374
      td.prismea-table--cell.-right
        .prismea-table--expanded-cell
          span 128398394
      td.prismea-table--cell.-right
        .prismea-table--expanded-cell
          span 273
      td.prismea-table--cell.-right
        .prismea-table--expanded-cell
          span 394404
      td.prismea-table--cell.-right
        .prismea-table--expanded-cell
          span 2838
      td.prismea-table--cell.-right
        .prismea-table--expanded-cell
          span 190
      td.prismea-table--cell.-right
        .prismea-table--expanded-cell
          span 3948484
      td.prismea-table--cell.-right
        .prismea-table--expanded-cell
          span 28383
      td.prismea-table--cell.-right
        .prismea-table--expanded-cell
          span 19233
      td.prismea-table--cell.-right
        .prismea-table--expanded-cell
          span 9448437
      td.prismea-table--cell.-right
        .prismea-table--expanded-cell
          span 292923847482
      td.prismea-table--cell.-right
        .prismea-table--expanded-cell
          span 2737489
    tr.prismea-table--line.ion--expanded
      td.prismea-table--cell
        .prismea-table--expanded-cell
          span Tag 2
      td.prismea-table--cell.-right
        .prismea-table--expanded-cell
          span 17200
      td.prismea-table--cell.-right
        .prismea-table--expanded-cell
          span 16374
      td.prismea-table--cell.-right
        .prismea-table--expanded-cell
          span 128398394
      td.prismea-table--cell.-right
        .prismea-table--expanded-cell
          span 273
      td.prismea-table--cell.-right
        .prismea-table--expanded-cell
          span 394404
      td.prismea-table--cell.-right
        .prismea-table--expanded-cell
          span 2838
      td.prismea-table--cell.-right
        .prismea-table--expanded-cell
          span 190
      td.prismea-table--cell.-right
        .prismea-table--expanded-cell
          span 3948484
      td.prismea-table--cell.-right
        .prismea-table--expanded-cell
          span 28383
      td.prismea-table--cell.-right
        .prismea-table--expanded-cell
          span 19233
      td.prismea-table--cell.-right
        .prismea-table--expanded-cell
          span 9448437
      td.prismea-table--cell.-right
        .prismea-table--expanded-cell
          span 292923847482
      td.prismea-table--cell.-right
        .prismea-table--expanded-cell
          span 2737489
    tr.prismea-table--line.ion--expanded
      td.prismea-table--cell
        .prismea-table--expanded-cell
          span Tag 3
      td.prismea-table--cell.-right
        .prismea-table--expanded-cell
          span 17200
      td.prismea-table--cell.-right
        .prismea-table--expanded-cell
          span 16374
      td.prismea-table--cell.-right
        .prismea-table--expanded-cell
          span 128398394
      td.prismea-table--cell.-right
        .prismea-table--expanded-cell
          span 273
      td.prismea-table--cell.-right
        .prismea-table--expanded-cell
          span 394404
      td.prismea-table--cell.-right
        .prismea-table--expanded-cell
          span 2838
      td.prismea-table--cell.-right
        .prismea-table--expanded-cell
          span 190
      td.prismea-table--cell.-right
        .prismea-table--expanded-cell
          span 3948484
      td.prismea-table--cell.-right
        .prismea-table--expanded-cell
          span 28383
      td.prismea-table--cell.-right
        .prismea-table--expanded-cell
          span 19233
      td.prismea-table--cell.-right
        .prismea-table--expanded-cell
          span 9448437
      td.prismea-table--cell.-right
        .prismea-table--expanded-cell
          span 292923847482
      td.prismea-table--cell.-right
        .prismea-table--expanded-cell
          span 2737489
h3 Expanded View
table.analytics-table.prismea-table.-default.-text-sm
  thead.prismea-table--head
    tr.prismea-table--line
      th.prismea-table--cell.-width-200
        .analytics-table__title
          svg.icon-32.color-warning--700
            use(href='/svg/32x32/line/transaction-incoming.svg#transaction-incoming-line-32')
          span.color-warning--700 Label
          svg.icon-16.icon-rotate-180
            use(href='/svg/16x16/line/chevron-up.svg#chevron-up-line-16')
      th.prismea-table--cell.-right.-width-100
        span.color-grey--900 178394
      th.prismea-table--cell.-right.-width-100
        span.color-grey--900 178394
      th.prismea-table--cell.-right.-width-100
        span.color-grey--900 178394
      th.prismea-table--cell.-right.-width-100
        span.color-grey--900 178394
      th.prismea-table--cell.-right.-width-100
        span.color-grey--900 178394
      th.prismea-table--cell.-right.-width-100
        span.color-grey--900 178394
      th.prismea-table--cell.-right.-width-100
        span.color-grey--900 178394
      th.prismea-table--cell.-right.-width-100
        span.color-grey--900 178394
      th.prismea-table--cell.-right.-width-100
        span.color-grey--900 178394
      th.prismea-table--cell.-right.-width-100
        span.color-grey--900 178394
      th.prismea-table--cell.-right.-width-100
        span.color-grey--900 178394
      th.prismea-table--cell.-right.-width-100
        span.color-grey--900 178394
      th.prismea-table--cell.-right.-width-100
        span.color-grey--900 178394
  tbody.prismea-table--body
    tr.prismea-table--line.ion--hoverable
      td.prismea-table--cell
        .analytics-table__title
          span Category 1
          svg.icon-16.icon-rotate-180
            use(href='/svg/16x16/line/chevron-up.svg#chevron-up-line-16')
      td.prismea-table--cell.-right
        span 17200
      td.prismea-table--cell.-right
        span 16374
      td.prismea-table--cell.-right
        span 128398394
      td.prismea-table--cell.-right
        span 273
      td.prismea-table--cell.-right
        span 394404
      td.prismea-table--cell.-right
        span 2838
      td.prismea-table--cell.-right
        span 190
      td.prismea-table--cell.-right
        span 3948484
      td.prismea-table--cell.-right
        span 28383
      td.prismea-table--cell.-right
        span 19233
      td.prismea-table--cell.-right
        span 9448437
      td.prismea-table--cell.-right
        span 292923847482
      td.prismea-table--cell.-right
        span 2737489
    tr.prismea-table--line.ion--hoverable.-selected
      td.prismea-table--cell
        .analytics-table__title
          span Category 2
          svg.icon-16
            use(href='/svg/16x16/line/chevron-up.svg#chevron-up-line-16')
      td.prismea-table--cell.-right
        span 17200
      td.prismea-table--cell.-right
        span 16374
      td.prismea-table--cell.-right
        span 128398394
      td.prismea-table--cell.-right
        span 273
      td.prismea-table--cell.-right
        span 394404
      td.prismea-table--cell.-right
        span 2838
      td.prismea-table--cell.-right
        span 190
      td.prismea-table--cell.-right
        span 3948484
      td.prismea-table--cell.-right
        span 28383
      td.prismea-table--cell.-right
        span 19233
      td.prismea-table--cell.-right
        span 9448437
      td.prismea-table--cell.-right
        span 292923847482
      td.prismea-table--cell.-right
        span 2737489
    tr.prismea-table--line.ion--expanded
      td.prismea-table--cell
        .prismea-table--expanded-cell
          span Tag 1
      td.prismea-table--cell.-right
        .prismea-table--expanded-cell
          span 17200
      td.prismea-table--cell.-right
        .prismea-table--expanded-cell
          span 16374
      td.prismea-table--cell.-right
        .prismea-table--expanded-cell
          span 128398394
      td.prismea-table--cell.-right
        .prismea-table--expanded-cell
          span 273
      td.prismea-table--cell.-right
        .prismea-table--expanded-cell
          span 394404
      td.prismea-table--cell.-right
        .prismea-table--expanded-cell
          span 2838
      td.prismea-table--cell.-right
        .prismea-table--expanded-cell
          span 190
      td.prismea-table--cell.-right
        .prismea-table--expanded-cell
          span 3948484
      td.prismea-table--cell.-right
        .prismea-table--expanded-cell
          span 28383
      td.prismea-table--cell.-right
        .prismea-table--expanded-cell
          span 19233
      td.prismea-table--cell.-right
        .prismea-table--expanded-cell
          span 9448437
      td.prismea-table--cell.-right
        .prismea-table--expanded-cell
          span 292923847482
      td.prismea-table--cell.-right
        .prismea-table--expanded-cell
          span 2737489
    tr.prismea-table--line.ion--expanded
      td.prismea-table--cell
        .prismea-table--expanded-cell
          span Tag 2
      td.prismea-table--cell.-right
        .prismea-table--expanded-cell
          span 17200
      td.prismea-table--cell.-right
        .prismea-table--expanded-cell
          span 16374
      td.prismea-table--cell.-right
        .prismea-table--expanded-cell
          span 128398394
      td.prismea-table--cell.-right
        .prismea-table--expanded-cell
          span 273
      td.prismea-table--cell.-right
        .prismea-table--expanded-cell
          span 394404
      td.prismea-table--cell.-right
        .prismea-table--expanded-cell
          span 2838
      td.prismea-table--cell.-right
        .prismea-table--expanded-cell
          span 190
      td.prismea-table--cell.-right
        .prismea-table--expanded-cell
          span 3948484
      td.prismea-table--cell.-right
        .prismea-table--expanded-cell
          span 28383
      td.prismea-table--cell.-right
        .prismea-table--expanded-cell
          span 19233
      td.prismea-table--cell.-right
        .prismea-table--expanded-cell
          span 9448437
      td.prismea-table--cell.-right
        .prismea-table--expanded-cell
          span 292923847482
      td.prismea-table--cell.-right
        .prismea-table--expanded-cell
          span 2737489
    tr.prismea-table--line.ion--expanded
      td.prismea-table--cell
        .prismea-table--expanded-cell
          span Tag 3
      td.prismea-table--cell.-right
        .prismea-table--expanded-cell
          span 17200
      td.prismea-table--cell.-right
        .prismea-table--expanded-cell
          span 16374
      td.prismea-table--cell.-right
        .prismea-table--expanded-cell
          span 128398394
      td.prismea-table--cell.-right
        .prismea-table--expanded-cell
          span 273
      td.prismea-table--cell.-right
        .prismea-table--expanded-cell
          span 394404
      td.prismea-table--cell.-right
        .prismea-table--expanded-cell
          span 2838
      td.prismea-table--cell.-right
        .prismea-table--expanded-cell
          span 190
      td.prismea-table--cell.-right
        .prismea-table--expanded-cell
          span 3948484
      td.prismea-table--cell.-right
        .prismea-table--expanded-cell
          span 28383
      td.prismea-table--cell.-right
        .prismea-table--expanded-cell
          span 19233
      td.prismea-table--cell.-right
        .prismea-table--expanded-cell
          span 9448437
      td.prismea-table--cell.-right
        .prismea-table--expanded-cell
          span 292923847482
      td.prismea-table--cell.-right
        .prismea-table--expanded-cell
          span 2737489

Renders a vertical navigation.

The menu component is a vertical navigation component that comprises:

  • menu : container
    • menu-item : interactive item of the menu
    • menu__divider : horizontal line to separate menu items
    • menu__spacer : empty space to separate menu items
    • menu__label : informative label to title a list of menu items

Subelements of menu-item :

  • menu-item__content : main content of the item
  • menu-item__icon : icon element, can be used on both sides of the content
  • menu-item__avatar : avatar element, can be used on both sides of the content
  • menu-item__chevron : chevron element, smaller than the classic icon

Modifiers of menu-item :

  • menu-item--rounded : rounded corners
  • menu-item--static : static item, no style applied on hover
  • menu-item--selected : selected state
  • menu-item--disabled : disabled state, no style applied on hover
  • menu-item--color-{colorName} : text color variation
  • menu-item--hover-color-{colorName} : text color variation, applied on hover only
  • menu-item--bg-{colorName} : background color variation
  • menu-item--hover-bg-{colorName} : background color variation, applied on hover only
<div class="flex">
  <div class="menu menu--fixed-width ma-4" style="height: 45rem; background-color: #fff;">
    <div class="menu__label">Menu items</div>
    <!-- Default navigation item-->
    <div class="menu-item"><span class="menu-item__icon">
        <svg class="icon-24">
          <use href="/svg/24x24/line/dashboard.svg#dashboard-line-24"></use>
        </svg></span><span class="menu-item__content">Menu item</span>
    </div>
    <!-- Default navigation item-->
    <div class="menu-item"><span class="menu-item__icon">
        <svg class="icon-24">
          <use href="/svg/24x24/line/dashboard.svg#dashboard-line-24"></use>
        </svg></span><span class="menu-item__content">Menu item</span>
    </div>
    <!-- Default navigation item-->
    <div class="menu-item"><span class="menu-item__icon">
        <svg class="icon-24">
          <use href="/svg/24x24/line/dashboard.svg#dashboard-line-24"></use>
        </svg></span><span class="menu-item__content">Menu item</span>
    </div>
    <div class="menu__divider"></div>
    <div class="menu__label">More items</div>
    <!-- Default navigation item-->
    <div class="menu-item"><span class="menu-item__icon">
        <svg class="icon-24">
          <use href="/svg/24x24/line/dashboard.svg#dashboard-line-24"></use>
        </svg></span><span class="menu-item__content">Menu item</span>
    </div>
    <!-- Default navigation item-->
    <div class="menu-item"><span class="menu-item__icon">
        <svg class="icon-24">
          <use href="/svg/24x24/line/dashboard.svg#dashboard-line-24"></use>
        </svg></span><span class="menu-item__content">Menu item</span>
    </div>
    <div class="menu__spacer"></div>
    <div class="menu__label">Bottom items</div>
    <!-- Default navigation item-->
    <div class="menu-item"><span class="menu-item__icon">
        <svg class="icon-24">
          <use href="/svg/24x24/line/dashboard.svg#dashboard-line-24"></use>
        </svg></span><span class="menu-item__content">Menu item</span>
    </div>
    <!-- Default navigation item-->
    <div class="menu-item"><span class="menu-item__icon">
        <svg class="icon-24">
          <use href="/svg/24x24/line/dashboard.svg#dashboard-line-24"></use>
        </svg></span><span class="menu-item__content">Menu item</span>
    </div>
  </div>
  <div class="menu menu--fixed-width ma-4" style="height: 45rem; background-color: #fff;">
    <div class="ma-2">
      <div class="menu__label">Rounded items</div>
      <!-- Default navigation item-->
      <div class="menu-item menu-item--rounded"><span class="menu-item__icon">
          <svg class="icon-24">
            <use href="/svg/24x24/line/dashboard.svg#dashboard-line-24"></use>
          </svg></span><span class="menu-item__content">Rounded item</span>
      </div>
      <!-- Default navigation item-->
      <div class="menu-item menu-item--rounded menu-item--selected"><span class="menu-item__icon">
          <svg class="icon-24">
            <use href="/svg/24x24/line/dashboard.svg#dashboard-line-24"></use>
          </svg></span><span class="menu-item__content">Rounded item - Selected</span>
      </div>
    </div>
    <div class="menu__divider"></div>
    <div class="menu__label">Other examples</div>
    <!-- Default navigation item-->
    <div class="menu-item"><span class="menu-item__content">Text only</span>
    </div>
    <!-- Default navigation item-->
    <div class="menu-item"><span class="menu-item__icon">
        <svg class="icon-24">
          <use href="/svg/24x24/line/dashboard.svg#dashboard-line-24"></use>
        </svg></span><span class="menu-item__content">Icons (left and right)</span><span class="menu-item__icon">
        <svg class="icon-24">
          <use href="/svg/24x24/line/expand.svg#expand-line-24"></use>
        </svg></span>
    </div>
    <!-- Default navigation item-->
    <div class="menu-item"><span class="menu-item__avatar">Ab</span><span class="menu-item__content">Avatar - No image</span>
    </div>
    <!-- Default navigation item-->
    <div class="menu-item"><span class="menu-item__avatar"><img src="https://images.unsplash.com/photo-1541298645675-6cc8e127934d?ixlib=rb-1.2.1&amp;auto=format&amp;fit=crop&amp;w=400&amp;h=400&amp;q=80"/></span><span class="menu-item__content">Avatar </span>
    </div>
    <!-- Default navigation item-->
    <div class="menu-item"><span class="menu-item__icon">
        <svg class="icon-24">
          <use href="/svg/24x24/line/dashboard.svg#dashboard-line-24"></use>
        </svg></span><span class="menu-item__content">Chevron</span><span class="menu-item__chevron dropdown__chevron">
        <svg class="icon-16">
          <use href="/svg/16x16/line/chevron-down.svg#chevron-down-line-16"></use>
        </svg></span>
    </div>
  </div>
  <div class="menu menu--fixed-width ma-4" style="height: 45rem; background-color: #fff;">
    <div class="menu__label">Color modifiers</div>
    <!-- Default navigation item-->
    <div class="menu-item"><span class="menu-item__icon">
        <svg class="icon-24">
          <use href="/svg/24x24/line/dashboard.svg#dashboard-line-24"></use>
        </svg></span><span class="menu-item__content">Default - Hoverable</span>
    </div>
    <!-- Default navigation item-->
    <div class="menu-item menu-item--static"><span class="menu-item__icon">
        <svg class="icon-24">
          <use href="/svg/24x24/line/dashboard.svg#dashboard-line-24"></use>
        </svg></span><span class="menu-item__content">Static</span>
    </div>
    <!-- Default navigation item-->
    <div class="menu-item menu-item--selected"><span class="menu-item__icon">
        <svg class="icon-24">
          <use href="/svg/24x24/line/dashboard.svg#dashboard-line-24"></use>
        </svg></span><span class="menu-item__content">Selected</span>
    </div>
    <!-- Default navigation item-->
    <div class="menu-item menu-item--disabled"><span class="menu-item__icon">
        <svg class="icon-24">
          <use href="/svg/24x24/line/dashboard.svg#dashboard-line-24"></use>
        </svg></span><span class="menu-item__content">Disabled</span>
    </div>
    <div class="menu__divider"></div>
    <div class="menu__label">Color modifiers</div>
    <!-- Default navigation item-->
    <div class="menu-item menu-item--color-error"><span class="menu-item__icon">
        <svg class="icon-24">
          <use href="/svg/24x24/line/dashboard.svg#dashboard-line-24"></use>
        </svg></span><span class="menu-item__content">Text error</span>
    </div>
    <!-- Default navigation item-->
    <div class="menu-item menu-item--bg-error"><span class="menu-item__icon">
        <svg class="icon-24">
          <use href="/svg/24x24/line/dashboard.svg#dashboard-line-24"></use>
        </svg></span><span class="menu-item__content">Background error</span>
    </div>
    <!-- Default navigation item-->
    <div class="menu-item menu-item--hover-color-error"><span class="menu-item__icon">
        <svg class="icon-24">
          <use href="/svg/24x24/line/dashboard.svg#dashboard-line-24"></use>
        </svg></span><span class="menu-item__content">Text error on hover</span>
    </div>
    <!-- Default navigation item-->
    <div class="menu-item menu-item--hover-bg-error"><span class="menu-item__icon">
        <svg class="icon-24">
          <use href="/svg/24x24/line/dashboard.svg#dashboard-line-24"></use>
        </svg></span><span class="menu-item__content">Background error on hover</span>
    </div>
  </div>
</div>
.flex
  .menu.menu--fixed-width.ma-4(style='height: 45rem; background-color: #fff;')
    .menu__label Menu items
    //  Default navigation item
    .menu-item
      span.menu-item__icon
        svg.icon-24
          use(href='/svg/24x24/line/dashboard.svg#dashboard-line-24')
      span.menu-item__content Menu item
    //  Default navigation item
    .menu-item
      span.menu-item__icon
        svg.icon-24
          use(href='/svg/24x24/line/dashboard.svg#dashboard-line-24')
      span.menu-item__content Menu item
    //  Default navigation item
    .menu-item
      span.menu-item__icon
        svg.icon-24
          use(href='/svg/24x24/line/dashboard.svg#dashboard-line-24')
      span.menu-item__content Menu item
    .menu__divider
    .menu__label More items
    //  Default navigation item
    .menu-item
      span.menu-item__icon
        svg.icon-24
          use(href='/svg/24x24/line/dashboard.svg#dashboard-line-24')
      span.menu-item__content Menu item
    //  Default navigation item
    .menu-item
      span.menu-item__icon
        svg.icon-24
          use(href='/svg/24x24/line/dashboard.svg#dashboard-line-24')
      span.menu-item__content Menu item
    .menu__spacer
    .menu__label Bottom items
    //  Default navigation item
    .menu-item
      span.menu-item__icon
        svg.icon-24
          use(href='/svg/24x24/line/dashboard.svg#dashboard-line-24')
      span.menu-item__content Menu item
    //  Default navigation item
    .menu-item
      span.menu-item__icon
        svg.icon-24
          use(href='/svg/24x24/line/dashboard.svg#dashboard-line-24')
      span.menu-item__content Menu item
  .menu.menu--fixed-width.ma-4(style='height: 45rem; background-color: #fff;')
    .ma-2
      .menu__label Rounded items
      //  Default navigation item
      .menu-item.menu-item--rounded
        span.menu-item__icon
          svg.icon-24
            use(href='/svg/24x24/line/dashboard.svg#dashboard-line-24')
        span.menu-item__content Rounded item
      //  Default navigation item
      .menu-item.menu-item--rounded.menu-item--selected
        span.menu-item__icon
          svg.icon-24
            use(href='/svg/24x24/line/dashboard.svg#dashboard-line-24')
        span.menu-item__content Rounded item - Selected
    .menu__divider
    .menu__label Other examples
    //  Default navigation item
    .menu-item
      span.menu-item__content Text only
    //  Default navigation item
    .menu-item
      span.menu-item__icon
        svg.icon-24
          use(href='/svg/24x24/line/dashboard.svg#dashboard-line-24')
      span.menu-item__content Icons (left and right)
      span.menu-item__icon
        svg.icon-24
          use(href='/svg/24x24/line/expand.svg#expand-line-24')
    //  Default navigation item
    .menu-item
      span.menu-item__avatar Ab
      span.menu-item__content Avatar - No image
    //  Default navigation item
    .menu-item
      span.menu-item__avatar
        img(src='https://images.unsplash.com/photo-1541298645675-6cc8e127934d?ixlib=rb-1.2.1&auto=format&fit=crop&w=400&h=400&q=80')
      span.menu-item__content Avatar 
    //  Default navigation item
    .menu-item
      span.menu-item__icon
        svg.icon-24
          use(href='/svg/24x24/line/dashboard.svg#dashboard-line-24')
      span.menu-item__content Chevron
      span.menu-item__chevron.dropdown__chevron
        svg.icon-16
          use(href='/svg/16x16/line/chevron-down.svg#chevron-down-line-16')
  .menu.menu--fixed-width.ma-4(style='height: 45rem; background-color: #fff;')
    .menu__label Color modifiers
    //  Default navigation item
    .menu-item
      span.menu-item__icon
        svg.icon-24
          use(href='/svg/24x24/line/dashboard.svg#dashboard-line-24')
      span.menu-item__content Default - Hoverable
    //  Default navigation item
    .menu-item.menu-item--static
      span.menu-item__icon
        svg.icon-24
          use(href='/svg/24x24/line/dashboard.svg#dashboard-line-24')
      span.menu-item__content Static
    //  Default navigation item
    .menu-item.menu-item--selected
      span.menu-item__icon
        svg.icon-24
          use(href='/svg/24x24/line/dashboard.svg#dashboard-line-24')
      span.menu-item__content Selected
    //  Default navigation item
    .menu-item.menu-item--disabled
      span.menu-item__icon
        svg.icon-24
          use(href='/svg/24x24/line/dashboard.svg#dashboard-line-24')
      span.menu-item__content Disabled
    .menu__divider
    .menu__label Color modifiers
    //  Default navigation item
    .menu-item.menu-item--color-error
      span.menu-item__icon
        svg.icon-24
          use(href='/svg/24x24/line/dashboard.svg#dashboard-line-24')
      span.menu-item__content Text error
    //  Default navigation item
    .menu-item.menu-item--bg-error
      span.menu-item__icon
        svg.icon-24
          use(href='/svg/24x24/line/dashboard.svg#dashboard-line-24')
      span.menu-item__content Background error
    //  Default navigation item
    .menu-item.menu-item--hover-color-error
      span.menu-item__icon
        svg.icon-24
          use(href='/svg/24x24/line/dashboard.svg#dashboard-line-24')
      span.menu-item__content Text error on hover
    //  Default navigation item
    .menu-item.menu-item--hover-bg-error
      span.menu-item__icon
        svg.icon-24
          use(href='/svg/24x24/line/dashboard.svg#dashboard-line-24')
      span.menu-item__content Background error on hover

Top navigation bar in the webapp 

<div class="navbar"><a class="navbar-logo">
    <svg>
      <use href="/svg/logo-v2.svg#logo-v2"></use>
    </svg></a><span class="navbar-divider"></span>
  <div class="navbar-menu">
    <!-- Default navigation item-->
    <div class="menu-item menu-item--rounded menu-item--selected"><span class="menu-item__icon">
        <svg class="icon-24">
          <use href="/svg/24x24/line/dashboard.svg#dashboard-line-24"></use>
        </svg></span><span class="menu-item__content">Menu item</span>
    </div>
    <!-- Default navigation item-->
    <div class="menu-item menu-item--rounded"><span class="menu-item__icon">
        <svg class="icon-24">
          <use href="/svg/24x24/line/dashboard.svg#dashboard-line-24"></use>
        </svg></span><span class="menu-item__content">Menu item</span>
    </div>
    <div class="dropdown dropdown--center">
      <div class="dropdown__trigger">
    <!-- Default navigation item-->
    <div class="menu-item menu-item--rounded"><span class="menu-item__icon">
        <svg class="icon-24">
          <use href="/svg/24x24/line/dashboard.svg#dashboard-line-24"></use>
        </svg></span><span class="menu-item__content">Menu item</span>
    </div>
      </div>
      <div class="dropdown__popover">
        <div class="dropdown__arrow"></div>
        <div class="dropdown__content">
          <div class="pa-4 prismea-text -text-md -text-nowrap">This is a popover content</div>
        </div>
      </div>
    </div>
  </div><span class="navbar-spacer"></span>
  <div class="navbar-menu">
    <div class="navbar-action">
      <svg class="icon-32">
        <use href="/svg/32x32/line/bell.svg#bell-line-32"></use>
      </svg>
    </div>
    <div class="navbar-action">
      <svg class="icon-32">
        <use href="/svg/32x32/line/help.svg#help-line-32"></use>
      </svg>
    </div>
  </div>
  <div class="dropdown dropdown--right">
    <div class="dropdown__trigger"><a class="navbar-profile">
    <div class="navbar-profile-avatar"><span>KO</span></div>
    <div class="navbar-profile-content"><span class="navbar-profile-text">Company Name</span><span class="navbar-profile-subtext">User name</span></div></a>
    </div>
    <div class="dropdown__popover">
      <div class="dropdown__content">
        <div class="pa-4 prismea-text -text-md -text-nowrap">This is a popover content</div>
      </div>
    </div>
  </div>
</div>
<div class="navbar"><a class="navbar-logo">
    <svg>
      <use href="/svg/logo-v2.svg#logo-v2"></use>
    </svg></a><span class="navbar-divider"></span>
  <div class="navbar-menu">
    <!-- Default navigation item-->
    <div class="menu-item menu-item--rounded menu-item--selected"><span class="menu-item__icon">
        <svg class="icon-24">
          <use href="/svg/24x24/line/dashboard.svg#dashboard-line-24"></use>
        </svg></span><span class="menu-item__content">Menu item</span>
    </div>
    <!-- Default navigation item-->
    <div class="menu-item menu-item--rounded"><span class="menu-item__icon">
        <svg class="icon-24">
          <use href="/svg/24x24/line/dashboard.svg#dashboard-line-24"></use>
        </svg></span><span class="menu-item__content">Menu item</span>
    </div>
    <div class="dropdown dropdown--center">
      <div class="dropdown__trigger">
    <!-- Default navigation item-->
    <div class="menu-item menu-item--rounded"><span class="menu-item__icon">
        <svg class="icon-24">
          <use href="/svg/24x24/line/dashboard.svg#dashboard-line-24"></use>
        </svg></span><span class="menu-item__content">Menu item</span>
    </div>
      </div>
      <div class="dropdown__popover">
        <div class="dropdown__arrow"></div>
        <div class="dropdown__content">
          <div class="pa-4 prismea-text -text-md -text-nowrap">This is a popover content</div>
        </div>
      </div>
    </div>
  </div><span class="navbar-spacer"></span>
  <div class="navbar-menu">
    <div class="navbar-action">
      <svg class="icon-32">
        <use href="/svg/32x32/line/bell.svg#bell-line-32"></use>
      </svg>
    </div>
    <div class="navbar-action">
      <svg class="icon-32">
        <use href="/svg/32x32/line/help.svg#help-line-32"></use>
      </svg>
    </div>
  </div>
  <div class="dropdown dropdown--right">
    <div class="dropdown__trigger"><a class="navbar-profile -link">
    <div class="navbar-profile-avatar"><img src="https://images.unsplash.com/photo-1541298645675-6cc8e127934d?ixlib=rb-1.2.1&amp;auto=format&amp;fit=crop&amp;w=400&amp;h=400&amp;q=80"/></div>
    <div class="navbar-profile-content"><span class="navbar-profile-text">Company Name</span><span class="navbar-profile-subtext">User name</span></div>
    <div class="navbar-profile-arrow"><i class="prismea-icon prismea-glyph-16_arrow-s"></i></div></a>
    </div>
    <div class="dropdown__popover">
      <div class="dropdown__content">
  <div class="menu menu--fixed-width py-2">
    <div class="menu__label">My companies</div>
    <!-- Default navigation item-->
    <div class="menu-item"><span class="menu-item__avatar">Ab</span><span class="menu-item__content">Menu item</span>
    </div>
    <!-- Default navigation item-->
    <div class="menu-item"><span class="menu-item__avatar">Ab</span><span class="menu-item__content">Menu item</span>
    </div>
    <div class="menu__divider"></div>
    <!-- Default navigation item-->
    <div class="menu-item"><span class="menu-item__icon">
        <svg class="icon-24">
          <use href="/svg/24x24/line/dashboard.svg#dashboard-line-24"></use>
        </svg></span><span class="menu-item__content">Menu item</span>
    </div>
  </div>
      </div>
    </div>
  </div>
</div>
<div class="navbar"><a class="navbar-logo">
    <svg>
      <use href="/svg/logo-v2.svg#logo-v2"></use>
    </svg></a><span class="navbar-divider"></span>
  <div class="navbar-menu">
    <!-- Default navigation item-->
    <div class="menu-item menu-item--rounded menu-item--selected"><span class="menu-item__icon">
        <svg class="icon-24">
          <use href="/svg/24x24/line/dashboard.svg#dashboard-line-24"></use>
        </svg></span><span class="menu-item__content">Menu item</span>
    </div>
    <!-- Default navigation item-->
    <div class="menu-item menu-item--rounded"><span class="menu-item__icon">
        <svg class="icon-24">
          <use href="/svg/24x24/line/dashboard.svg#dashboard-line-24"></use>
        </svg></span><span class="menu-item__content">Menu item</span>
    </div>
    <div class="dropdown dropdown--center dropdown--active">
      <div class="dropdown__trigger">
    <!-- Default navigation item-->
    <div class="menu-item menu-item--rounded menu-item--selected"><span class="menu-item__icon">
        <svg class="icon-24">
          <use href="/svg/24x24/line/dashboard.svg#dashboard-line-24"></use>
        </svg></span><span class="menu-item__content">Menu item</span><span class="menu-item__chevron dropdown__chevron">
        <svg class="icon-16">
          <use href="/svg/16x16/line/chevron-down.svg#chevron-down-line-16"></use>
        </svg></span>
    </div>
      </div>
      <div class="dropdown__popover">
        <div class="dropdown__arrow"></div>
        <div class="dropdown__content">
    <div class="menu py-2 prismea-text -text-nowrap">
      <!-- Default navigation item-->
      <div class="menu-item"><span class="menu-item__icon">
          <svg class="icon-24">
            <use href="/svg/24x24/line/wallet.svg#wallet-line-24"></use>
          </svg></span><span class="menu-item__content">Menu item</span>
      </div>
      <!-- Default navigation item-->
      <div class="menu-item"><span class="menu-item__icon">
          <svg class="icon-24">
            <use href="/svg/24x24/line/user-group.svg#user-group-line-24"></use>
          </svg></span><span class="menu-item__content">Menu item</span>
      </div>
      <!-- Default navigation item-->
      <div class="menu-item"><span class="menu-item__icon">
          <svg class="icon-24">
            <use href="/svg/24x24/line/credit-card.svg#credit-card-line-24"></use>
          </svg></span><span class="menu-item__content">Menu item</span>
      </div>
    </div>
        </div>
      </div>
    </div>
  </div><span class="navbar-spacer"></span>
  <div class="navbar-menu">
    <div class="navbar-action">
      <svg class="icon-32">
        <use href="/svg/32x32/line/bell.svg#bell-line-32"></use>
      </svg>
    </div>
    <div class="navbar-action">
      <svg class="icon-32">
        <use href="/svg/32x32/line/help.svg#help-line-32"></use>
      </svg>
    </div>
  </div>
  <div class="dropdown dropdown--right dropdown--active">
    <div class="dropdown__trigger"><a class="navbar-profile -link -active">
    <div class="navbar-profile-avatar"><img src="https://images.unsplash.com/photo-1541298645675-6cc8e127934d?ixlib=rb-1.2.1&amp;auto=format&amp;fit=crop&amp;w=400&amp;h=400&amp;q=80"/></div>
    <div class="navbar-profile-content"><span class="navbar-profile-text">Company Name</span><span class="navbar-profile-subtext">User name</span></div>
    <div class="navbar-profile-arrow"><i class="prismea-icon prismea-glyph-16_arrow-s"></i></div></a>
    </div>
    <div class="dropdown__popover">
      <div class="dropdown__content">
  <div class="menu menu--fixed-width py-2">
    <div class="menu__label">My companies</div>
    <!-- Default navigation item-->
    <div class="menu-item"><span class="menu-item__avatar">Ab</span><span class="menu-item__content">Menu item</span>
    </div>
    <!-- Default navigation item-->
    <div class="menu-item"><span class="menu-item__avatar">Ab</span><span class="menu-item__content">Menu item</span>
    </div>
    <div class="menu__divider"></div>
    <!-- Default navigation item-->
    <div class="menu-item"><span class="menu-item__icon">
        <svg class="icon-24">
          <use href="/svg/24x24/line/dashboard.svg#dashboard-line-24"></use>
        </svg></span><span class="menu-item__content">Menu item</span>
    </div>
  </div>
      </div>
    </div>
  </div>
</div>
.navbar
  a.navbar-logo
    svg
      use(href='/svg/logo-v2.svg#logo-v2')
  span.navbar-divider
  .navbar-menu
    //  Default navigation item
    .menu-item.menu-item--rounded.menu-item--selected
      span.menu-item__icon
        svg.icon-24
          use(href='/svg/24x24/line/dashboard.svg#dashboard-line-24')
      span.menu-item__content Menu item
    //  Default navigation item
    .menu-item.menu-item--rounded
      span.menu-item__icon
        svg.icon-24
          use(href='/svg/24x24/line/dashboard.svg#dashboard-line-24')
      span.menu-item__content Menu item
    .dropdown.dropdown--center
      .dropdown__trigger
        //  Default navigation item
        .menu-item.menu-item--rounded
          span.menu-item__icon
            svg.icon-24
              use(href='/svg/24x24/line/dashboard.svg#dashboard-line-24')
          span.menu-item__content Menu item
      .dropdown__popover
        .dropdown__arrow
        .dropdown__content
          .pa-4.prismea-text.-text-md.-text-nowrap This is a popover content
  span.navbar-spacer
  .navbar-menu
    .navbar-action
      svg.icon-32
        use(href='/svg/32x32/line/bell.svg#bell-line-32')
    .navbar-action
      svg.icon-32
        use(href='/svg/32x32/line/help.svg#help-line-32')
  .dropdown.dropdown--right
    .dropdown__trigger
      a.navbar-profile
        .navbar-profile-avatar
          span KO
        .navbar-profile-content
          span.navbar-profile-text Company Name
          span.navbar-profile-subtext User name
    .dropdown__popover
      .dropdown__content
        .pa-4.prismea-text.-text-md.-text-nowrap This is a popover content
.navbar
  a.navbar-logo
    svg
      use(href='/svg/logo-v2.svg#logo-v2')
  span.navbar-divider
  .navbar-menu
    //  Default navigation item
    .menu-item.menu-item--rounded.menu-item--selected
      span.menu-item__icon
        svg.icon-24
          use(href='/svg/24x24/line/dashboard.svg#dashboard-line-24')
      span.menu-item__content Menu item
    //  Default navigation item
    .menu-item.menu-item--rounded
      span.menu-item__icon
        svg.icon-24
          use(href='/svg/24x24/line/dashboard.svg#dashboard-line-24')
      span.menu-item__content Menu item
    .dropdown.dropdown--center
      .dropdown__trigger
        //  Default navigation item
        .menu-item.menu-item--rounded
          span.menu-item__icon
            svg.icon-24
              use(href='/svg/24x24/line/dashboard.svg#dashboard-line-24')
          span.menu-item__content Menu item
      .dropdown__popover
        .dropdown__arrow
        .dropdown__content
          .pa-4.prismea-text.-text-md.-text-nowrap This is a popover content
  span.navbar-spacer
  .navbar-menu
    .navbar-action
      svg.icon-32
        use(href='/svg/32x32/line/bell.svg#bell-line-32')
    .navbar-action
      svg.icon-32
        use(href='/svg/32x32/line/help.svg#help-line-32')
  .dropdown.dropdown--right
    .dropdown__trigger
      a.navbar-profile.-link
        .navbar-profile-avatar
          img(src='https://images.unsplash.com/photo-1541298645675-6cc8e127934d?ixlib=rb-1.2.1&auto=format&fit=crop&w=400&h=400&q=80')
        .navbar-profile-content
          span.navbar-profile-text Company Name
          span.navbar-profile-subtext User name
        .navbar-profile-arrow
          i.prismea-icon.prismea-glyph-16_arrow-s
    .dropdown__popover
      .dropdown__content
        .menu.menu--fixed-width.py-2
          .menu__label My companies
          //  Default navigation item
          .menu-item
            span.menu-item__avatar Ab
            span.menu-item__content Menu item
          //  Default navigation item
          .menu-item
            span.menu-item__avatar Ab
            span.menu-item__content Menu item
          .menu__divider
          //  Default navigation item
          .menu-item
            span.menu-item__icon
              svg.icon-24
                use(href='/svg/24x24/line/dashboard.svg#dashboard-line-24')
            span.menu-item__content Menu item
.navbar
  a.navbar-logo
    svg
      use(href='/svg/logo-v2.svg#logo-v2')
  span.navbar-divider
  .navbar-menu
    //  Default navigation item
    .menu-item.menu-item--rounded.menu-item--selected
      span.menu-item__icon
        svg.icon-24
          use(href='/svg/24x24/line/dashboard.svg#dashboard-line-24')
      span.menu-item__content Menu item
    //  Default navigation item
    .menu-item.menu-item--rounded
      span.menu-item__icon
        svg.icon-24
          use(href='/svg/24x24/line/dashboard.svg#dashboard-line-24')
      span.menu-item__content Menu item
    .dropdown.dropdown--center.dropdown--active
      .dropdown__trigger
        //  Default navigation item
        .menu-item.menu-item--rounded.menu-item--selected
          span.menu-item__icon
            svg.icon-24
              use(href='/svg/24x24/line/dashboard.svg#dashboard-line-24')
          span.menu-item__content Menu item
          span.menu-item__chevron.dropdown__chevron
            svg.icon-16
              use(href='/svg/16x16/line/chevron-down.svg#chevron-down-line-16')
      .dropdown__popover
        .dropdown__arrow
        .dropdown__content
          .menu.py-2.prismea-text.-text-nowrap
            //  Default navigation item
            .menu-item
              span.menu-item__icon
                svg.icon-24
                  use(href='/svg/24x24/line/wallet.svg#wallet-line-24')
              span.menu-item__content Menu item
            //  Default navigation item
            .menu-item
              span.menu-item__icon
                svg.icon-24
                  use(href='/svg/24x24/line/user-group.svg#user-group-line-24')
              span.menu-item__content Menu item
            //  Default navigation item
            .menu-item
              span.menu-item__icon
                svg.icon-24
                  use(href='/svg/24x24/line/credit-card.svg#credit-card-line-24')
              span.menu-item__content Menu item
  span.navbar-spacer
  .navbar-menu
    .navbar-action
      svg.icon-32
        use(href='/svg/32x32/line/bell.svg#bell-line-32')
    .navbar-action
      svg.icon-32
        use(href='/svg/32x32/line/help.svg#help-line-32')
  .dropdown.dropdown--right.dropdown--active
    .dropdown__trigger
      a.navbar-profile.-link.-active
        .navbar-profile-avatar
          img(src='https://images.unsplash.com/photo-1541298645675-6cc8e127934d?ixlib=rb-1.2.1&auto=format&fit=crop&w=400&h=400&q=80')
        .navbar-profile-content
          span.navbar-profile-text Company Name
          span.navbar-profile-subtext User name
        .navbar-profile-arrow
          i.prismea-icon.prismea-glyph-16_arrow-s
    .dropdown__popover
      .dropdown__content
        .menu.menu--fixed-width.py-2
          .menu__label My companies
          //  Default navigation item
          .menu-item
            span.menu-item__avatar Ab
            span.menu-item__content Menu item
          //  Default navigation item
          .menu-item
            span.menu-item__avatar Ab
            span.menu-item__content Menu item
          .menu__divider
          //  Default navigation item
          .menu-item
            span.menu-item__icon
              svg.icon-24
                use(href='/svg/24x24/line/dashboard.svg#dashboard-line-24')
            span.menu-item__content Menu item