Templates

Templates consist mostly of groups of organisms stitched together to form pages. It’s here where we start to see the design coming together and start seeing things like layout in action.

Atomic Design by Brad Frost

Dashboard

Dashboard classic

<div class="prismea-dashboard">
  <div class="prismea-dashboard--logo"><i class="prismea-glyph-50-logo"></i></div>
  <div class="prismea-dashboard--navigation">
    <nav>
      <ul class="prismea-navigation-spots">
        <li class="prismea-navigation-spots--slot"><a class="prismea-spot" href="#" title="First"><i class="prismea-glyph-24_dashboard"></i></a>
        </li>
        <li class="prismea-navigation-spots--slot"><a class="prismea-spot -selected" href="#" title="Second"><i class="prismea-glyph-24_company"></i></a>
        </li>
        <li class="prismea-navigation-spots--slot"><a class="prismea-spot" href="#" title="Third"><i class="prismea-glyph-24_account"></i></a>
        </li>
        <li class="prismea-navigation-spots--slot"><a class="prismea-spot" href="#" title="Fourth"><i class="prismea-glyph-24_transfer"></i></a>
        </li>
        <li class="prismea-navigation-spots--slot"><a class="prismea-spot" href="#" title="Fifth"><i class="prismea-glyph-24_marketing"></i></a>
        </li>
        <li class="prismea-navigation-spots--slot"><a class="prismea-spot" href="#" title="Sixth"><i class="prismea-glyph-24_admin"></i></a>
        </li>
        <li class="prismea-navigation-spots--slot"><a class="prismea-spot" href="#" title="Seventh"><i class="prismea-glyph-24_tools"></i></a>
        </li>
      </ul>
    </nav>
  </div>
  <div class="prismea-dashboard--header">
    <div class="prismea-dashboard--header--slot -expand">
      <div class="prismea-header">
        <div class="prismea-header--slot -search-bar">
          <div class="prismea-input-group ion--unfocus ion--sm">
            <div class="prismea-input-group--slot -expand ion--slot-left">
              <input class="prismea-input-text -secondary  " type="search" placeholder="Mighty text"/>
            </div>
            <div class="prismea-input-group--slot ion--slot-right">
              <button class="prismea-button -icon "><i class="prismea-glyph-12_search"></i>
              </button>
            </div>
          </div>
        </div>
        <div class="prismea-header--slot">
          <div class="prismea-contextual-profile-menu">
            <div class="prismea-contextual-menu ion--open">
              <div class="prismea-contextual-menu--button">
                <div class="prismea-contextual-profile-menu--card">
                  <div>
                    <div class="prismea-avatar -rounded"><img src="https://images.unsplash.com/photo-1541298645675-6cc8e127934d?ixlib=rb-1.2.1&amp;auto=format&amp;fit=crop&amp;w=400&amp;h=400&amp;q=80"/>
                    </div><span class="prismea-contextual-profile-menu--username">Miles Morales</span>
                    <div class="prismea-contextual-profile-menu--caret"><i class="prismea-glyph-12_caret-down"></i></div>
                  </div>
                </div>
              </div>
              <ul class="prismea-contextual-menu--menu">
                <li>
                  <button class="prismea-contextual-menu--item">First</button>
                </li>
                <li>
                  <button class="prismea-contextual-menu--item">Second</button>
                </li>
                <li>
                  <button class="prismea-contextual-menu--item">Third</button>
                </li>
              </ul>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="prismea-dashboard--body">
    <div class="prismea-body-container">
      <div class="prismea-body-container--content">
        <div class="prismea-vertical-spacing-5">
          <div class="prismea-vertical-spacing-5--slot"><a class="prismea-link -secondary" href="#">‹ Previous</a>
          </div>
          <div class="prismea-vertical-spacing-5--slot">
            <div class="prismea-vertical-spacing-30">
              <div class="prismea-vertical-spacing-30--slot">
                <div class="prismea-vertical-spacing-20">
                  <div class="prismea-vertical-spacing-20--slot">
                            <h1 class="prismea-title-1">Title</h1>
                  </div>
                  <div class="prismea-vertical-spacing-20--slot">
                            <nav>
                              <ul class="prismea-tabs">
                                <li class="prismea-tabs--slot"><a class="prismea-tab" href="#">Some tab</a>
                                </li>
                                <li class="prismea-tabs--slot"><a class="prismea-tab -selected" href="#">Some tab</a>
                                </li>
                              </ul>
                            </nav>
                  </div>
                </div>
              </div>
              <div class="prismea-vertical-spacing-30--slot">
                <div class="prismea-horizontal-spacing-30 -middle">
                  <div class="prismea-horizontal-spacing-30--slot -expand">
                            <div class="prismea-select">
                              <div class="prismea-select--field">
                                <div class="prismea-select--input">
                                  <div class="prismea-select--label"><span>Selected option</span></div>
                                  <div class="prismea-select--caret"><i class="prismea-glyph-12_caret-down"></i></div>
                                </div>
                                <ul class="prismea-select--options">
                                  <li class="prismea-select--option">-- Select an option --</li>
                                  <li class="prismea-select--option -selected">Selected Option</li>
                                  <li class="prismea-select--option -disabled">Disabled Option</li>
                                  <li class="prismea-select--option">Third</li>
                                </ul>
                              </div>
                            </div>
                  </div>
                  <div class="prismea-horizontal-spacing-30--slot">
                            <p class="prismea-text">Text: <span class="prismea-numeral prismea-color -color-positive">+10 000 000€</span>
                            </p>
                  </div>
                </div>
              </div>
              <div class="prismea-vertical-spacing-30--slot">
                        <table class="prismea-table -striped -equivalent -text-sm">
                          <thead class="prismea-table--head">
                            <tr class="prismea-table--line">
                              <th class="prismea-table--cell -width-400">Column A</th>
                              <th class="prismea-table--cell -center">Column B</th>
                              <th class="prismea-table--cell -center">Column C</th>
                              <th class="prismea-table--cell -center">Column D</th>
                              <th class="prismea-table--cell -center">Column E</th>
                              <th class="prismea-table--cell -center"></th>
                            </tr>
                          </thead>
                          <tbody class="prismea-table--body">
                            <tr class="ion--hoverable prismea-table--line prismea-table--line .">
                              <td class="prismea-table--cell"><a class="prismea-link -hoverable" href="#">Line A1</a>
                              </td>
                              <td class="prismea-table--cell -center"><span class="prismea-numeral">Line B1 numeral</span></td>
                              <td class="prismea-table--cell -center">
                                        <button class="prismea-switch -on " role="switch" aria-checked="true" aria-label="Switch"><i class="prismea-switch--button"></i>
                                        </button>
                              </td>
                              <td class="prismea-table--cell -center"><span class="prismea-numeral prismea-color -color-positive">Line D1</span></td>
                              <td class="prismea-table--cell -center">
                                        <div class="prismea-contextual-menu ion--close">
                                          <div class="prismea-contextual-menu--button">
                                                    <button class="prismea-contextual-button"><i class="prismea-contextual-button--icon prismea-glyph-16_document"></i></button>
                                          </div>
                                          <ul class="prismea-contextual-menu--menu">
                                            <li>
                                              <button class="prismea-contextual-menu--item">First</button>
                                            </li>
                                            <li>
                                              <button class="prismea-contextual-menu--item">Second</button>
                                            </li>
                                            <li>
                                              <button class="prismea-contextual-menu--item">Third</button>
                                            </li>
                                          </ul>
                                        </div>
                              </td>
                              <td class="prismea-table--cell -center -action--cell">
                                <div>
                                          <button class="prismea-icon-button"><i class="prismea-icon-button--icon prismea-glyph-24_download"></i></button>
                                          <button class="prismea-icon-button"><i class="prismea-icon-button--icon prismea-glyph-24_update"></i></button>
                                          <button class="prismea-icon-button"><i class="prismea-icon-button--icon prismea-glyph-24_tools"></i></button>
                                </div>
                              </td>
                            </tr>
                            <tr class="prismea-table--line ion--hoverable">
                              <td class="prismea-table--cell">Line A2</td>
                              <td class="prismea-table--cell -center"><span class="prismea-numeral">Line B2 numeral</span></td>
                              <td class="prismea-table--cell -center">
                                        <button class="prismea-switch -off -pending " role="switch" aria-checked="false" aria-label="Switch" title="Pending …"><i class="prismea-switch--button"></i>
                                        </button>
                              </td>
                              <td class="prismea-table--cell -center"><span class="prismea-numeral prismea-color -color-negative">Line D2</span></td>
                              <td class="prismea-table--cell -center">
                                        <div class="prismea-contextual-menu ion--close">
                                          <div class="prismea-contextual-menu--button">
                                                    <button class="prismea-contextual-button -faded"><i class="prismea-contextual-button--icon prismea-glyph-16_document"></i></button>
                                          </div>
                                          <ul class="prismea-contextual-menu--menu">
                                            <li>
                                              <button class="prismea-contextual-menu--item">First</button>
                                            </li>
                                            <li>
                                              <button class="prismea-contextual-menu--item">Second</button>
                                            </li>
                                            <li>
                                              <button class="prismea-contextual-menu--item">Third</button>
                                            </li>
                                          </ul>
                                        </div>
                              </td>
                              <td class="prismea-table--cell -center -action--cell">
                                <div>
                                          <button class="prismea-icon-button"><i class="prismea-icon-button--icon prismea-glyph-24_download"></i></button>
                                          <button class="prismea-icon-button"><i class="prismea-icon-button--icon prismea-glyph-24_update"></i></button>
                                          <button class="prismea-icon-button"><i class="prismea-icon-button--icon prismea-glyph-24_tools"></i></button>
                                </div>
                              </td>
                            </tr>
                            <tr class="prismea-table--line ion--hoverable -ion--staggered-4">
                              <td class="prismea-table--cell">Line A3</td>
                              <td class="prismea-table--cell -center"><span class="prismea-numeral">Line B3 numeral</span></td>
                              <td class="prismea-table--cell -center">
                                        <button class="prismea-switch -off " role="switch" aria-checked="false" aria-label="Switch"><i class="prismea-switch--button"></i>
                                        </button>
                              </td>
                              <td class="prismea-table--cell -center"><span class="prismea-numeral prismea-color -color-neutral">Line D3</span></td>
                              <td class="prismea-table--cell -center">
                                        <div class="prismea-contextual-menu ion--close">
                                          <div class="prismea-contextual-menu--button">
                                                    <button class="prismea-contextual-button -invisible"><i class="prismea-contextual-button--icon prismea-glyph-16_document"></i></button>
                                          </div>
                                          <ul class="prismea-contextual-menu--menu">
                                            <li>
                                              <button class="prismea-contextual-menu--item">First</button>
                                            </li>
                                            <li>
                                              <button class="prismea-contextual-menu--item">Second</button>
                                            </li>
                                            <li>
                                              <button class="prismea-contextual-menu--item">Third</button>
                                            </li>
                                          </ul>
                                        </div>
                              </td>
                              <td class="prismea-table--cell -center -action--cell">
                                <div>
                                          <button class="prismea-icon-button -invisible -selected"><i class="prismea-icon-button--icon prismea-glyph-24_download"></i></button>
                                          <button class="prismea-icon-button -invisible"><i class="prismea-icon-button--icon prismea-glyph-24_update"></i></button>
                                          <button class="prismea-icon-button -invisible"><i class="prismea-icon-button--icon prismea-glyph-24_tools"></i></button>
                                </div>
                              </td>
                            </tr>
                          </tbody>
                        </table>
              </div>
              <div class="prismea-vertical-spacing-30--slot">
                        <div class="prismea-pagination">
                          <button class="prismea-pagination--button" disabled="disabled"><i class="prismea-glyph-12_arrow-left"></i></button>
                          <div class="prismea-pagination--page">Page 1/42</div>
                          <button class="prismea-pagination--button"><i class="prismea-glyph-12_arrow-right"></i></button>
                        </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
.prismea-dashboard
  .prismea-dashboard--logo
    i.prismea-glyph-50-logo
  .prismea-dashboard--navigation
    nav
      ul.prismea-navigation-spots
        li.prismea-navigation-spots--slot
          a.prismea-spot(href='#', title='First')
            i.prismea-glyph-24_dashboard
        li.prismea-navigation-spots--slot
          a.prismea-spot.-selected(href='#', title='Second')
            i.prismea-glyph-24_company
        li.prismea-navigation-spots--slot
          a.prismea-spot(href='#', title='Third')
            i.prismea-glyph-24_account
        li.prismea-navigation-spots--slot
          a.prismea-spot(href='#', title='Fourth')
            i.prismea-glyph-24_transfer
        li.prismea-navigation-spots--slot
          a.prismea-spot(href='#', title='Fifth')
            i.prismea-glyph-24_marketing
        li.prismea-navigation-spots--slot
          a.prismea-spot(href='#', title='Sixth')
            i.prismea-glyph-24_admin
        li.prismea-navigation-spots--slot
          a.prismea-spot(href='#', title='Seventh')
            i.prismea-glyph-24_tools
  .prismea-dashboard--header
    .prismea-dashboard--header--slot.-expand
      .prismea-header
        .prismea-header--slot.-search-bar
          .prismea-input-group.ion--unfocus.ion--sm
            .prismea-input-group--slot.-expand.ion--slot-left
              input.prismea-input-text.-secondary(type='search', placeholder='Mighty text')
            .prismea-input-group--slot.ion--slot-right
              button.prismea-button.-icon
                i.prismea-glyph-12_search
        .prismea-header--slot
          .prismea-contextual-profile-menu
            .prismea-contextual-menu.ion--open
              .prismea-contextual-menu--button
                .prismea-contextual-profile-menu--card
                  div
                    .prismea-avatar.-rounded
                      img(src='https://images.unsplash.com/photo-1541298645675-6cc8e127934d?ixlib=rb-1.2.1&auto=format&fit=crop&w=400&h=400&q=80')
                    span.prismea-contextual-profile-menu--username Miles Morales
                    .prismea-contextual-profile-menu--caret
                      i.prismea-glyph-12_caret-down
              ul.prismea-contextual-menu--menu
                li
                  button.prismea-contextual-menu--item First
                li
                  button.prismea-contextual-menu--item Second
                li
                  button.prismea-contextual-menu--item Third
  .prismea-dashboard--body
    .prismea-body-container
      .prismea-body-container--content
        .prismea-vertical-spacing-5
          .prismea-vertical-spacing-5--slot
            a.prismea-link.-secondary(href='#') ‹ Previous
          .prismea-vertical-spacing-5--slot
            .prismea-vertical-spacing-30
              .prismea-vertical-spacing-30--slot
                .prismea-vertical-spacing-20
                  .prismea-vertical-spacing-20--slot
                    h1.prismea-title-1 Title
                  .prismea-vertical-spacing-20--slot
                    nav
                      ul.prismea-tabs
                        li.prismea-tabs--slot
                          a.prismea-tab(href='#') Some tab
                        li.prismea-tabs--slot
                          a.prismea-tab.-selected(href='#') Some tab
              .prismea-vertical-spacing-30--slot
                .prismea-horizontal-spacing-30.-middle
                  .prismea-horizontal-spacing-30--slot.-expand
                    .prismea-select
                      .prismea-select--field
                        .prismea-select--input
                          .prismea-select--label
                            span Selected option
                          .prismea-select--caret
                            i.prismea-glyph-12_caret-down
                        ul.prismea-select--options
                          li.prismea-select--option -- Select an option --
                          li.prismea-select--option.-selected Selected Option
                          li.prismea-select--option.-disabled Disabled Option
                          li.prismea-select--option Third
                  .prismea-horizontal-spacing-30--slot
                    p.prismea-text
                      | Text: 
                      span.prismea-numeral.prismea-color.-color-positive +10 000 000€
              .prismea-vertical-spacing-30--slot
                table.prismea-table.-striped.-equivalent.-text-sm
                  thead.prismea-table--head
                    tr.prismea-table--line
                      th.prismea-table--cell.-width-400 Column A
                      th.prismea-table--cell.-center Column B
                      th.prismea-table--cell.-center Column C
                      th.prismea-table--cell.-center Column D
                      th.prismea-table--cell.-center Column E
                      th.prismea-table--cell.-center
                  tbody.prismea-table--body
                    tr.ion--hoverable.prismea-table--line.prismea-table--line..
                      td.prismea-table--cell
                        a.prismea-link.-hoverable(href='#') Line A1
                      td.prismea-table--cell.-center
                        span.prismea-numeral Line B1 numeral
                      td.prismea-table--cell.-center
                        button.prismea-switch.-on(role='switch', aria-checked='true', aria-label='Switch')
                          i.prismea-switch--button
                      td.prismea-table--cell.-center
                        span.prismea-numeral.prismea-color.-color-positive Line D1
                      td.prismea-table--cell.-center
                        .prismea-contextual-menu.ion--close
                          .prismea-contextual-menu--button
                            button.prismea-contextual-button
                              i.prismea-contextual-button--icon.prismea-glyph-16_document
                          ul.prismea-contextual-menu--menu
                            li
                              button.prismea-contextual-menu--item First
                            li
                              button.prismea-contextual-menu--item Second
                            li
                              button.prismea-contextual-menu--item Third
                      td.prismea-table--cell.-center.-action--cell
                        div
                          button.prismea-icon-button
                            i.prismea-icon-button--icon.prismea-glyph-24_download
                          button.prismea-icon-button
                            i.prismea-icon-button--icon.prismea-glyph-24_update
                          button.prismea-icon-button
                            i.prismea-icon-button--icon.prismea-glyph-24_tools
                    tr.prismea-table--line.ion--hoverable
                      td.prismea-table--cell Line A2
                      td.prismea-table--cell.-center
                        span.prismea-numeral Line B2 numeral
                      td.prismea-table--cell.-center
                        button.prismea-switch.-off.-pending(role='switch', aria-checked='false', aria-label='Switch', title='Pending …')
                          i.prismea-switch--button
                      td.prismea-table--cell.-center
                        span.prismea-numeral.prismea-color.-color-negative Line D2
                      td.prismea-table--cell.-center
                        .prismea-contextual-menu.ion--close
                          .prismea-contextual-menu--button
                            button.prismea-contextual-button.-faded
                              i.prismea-contextual-button--icon.prismea-glyph-16_document
                          ul.prismea-contextual-menu--menu
                            li
                              button.prismea-contextual-menu--item First
                            li
                              button.prismea-contextual-menu--item Second
                            li
                              button.prismea-contextual-menu--item Third
                      td.prismea-table--cell.-center.-action--cell
                        div
                          button.prismea-icon-button
                            i.prismea-icon-button--icon.prismea-glyph-24_download
                          button.prismea-icon-button
                            i.prismea-icon-button--icon.prismea-glyph-24_update
                          button.prismea-icon-button
                            i.prismea-icon-button--icon.prismea-glyph-24_tools
                    tr.prismea-table--line.ion--hoverable.-ion--staggered-4
                      td.prismea-table--cell Line A3
                      td.prismea-table--cell.-center
                        span.prismea-numeral Line B3 numeral
                      td.prismea-table--cell.-center
                        button.prismea-switch.-off(role='switch', aria-checked='false', aria-label='Switch')
                          i.prismea-switch--button
                      td.prismea-table--cell.-center
                        span.prismea-numeral.prismea-color.-color-neutral Line D3
                      td.prismea-table--cell.-center
                        .prismea-contextual-menu.ion--close
                          .prismea-contextual-menu--button
                            button.prismea-contextual-button.-invisible
                              i.prismea-contextual-button--icon.prismea-glyph-16_document
                          ul.prismea-contextual-menu--menu
                            li
                              button.prismea-contextual-menu--item First
                            li
                              button.prismea-contextual-menu--item Second
                            li
                              button.prismea-contextual-menu--item Third
                      td.prismea-table--cell.-center.-action--cell
                        div
                          button.prismea-icon-button.-invisible.-selected
                            i.prismea-icon-button--icon.prismea-glyph-24_download
                          button.prismea-icon-button.-invisible
                            i.prismea-icon-button--icon.prismea-glyph-24_update
                          button.prismea-icon-button.-invisible
                            i.prismea-icon-button--icon.prismea-glyph-24_tools
              .prismea-vertical-spacing-30--slot
                .prismea-pagination
                  button.prismea-pagination--button(disabled)
                    i.prismea-glyph-12_arrow-left
                  .prismea-pagination--page Page 1/42
                  button.prismea-pagination--button
                    i.prismea-glyph-12_arrow-right

Dashboard with panel

<div class="prismea-dashboard">
  <div class="prismea-dashboard--logo"><i class="prismea-glyph-50-logo"></i></div>
  <div class="prismea-dashboard--navigation">
    <nav>
      <ul class="prismea-navigation-spots">
        <li class="prismea-navigation-spots--slot"><a class="prismea-spot" href="#" title="First"><i class="prismea-glyph-24_dashboard"></i></a>
        </li>
        <li class="prismea-navigation-spots--slot"><a class="prismea-spot -selected" href="#" title="Second"><i class="prismea-glyph-24_company"></i></a>
        </li>
        <li class="prismea-navigation-spots--slot"><a class="prismea-spot" href="#" title="Third"><i class="prismea-glyph-24_account"></i></a>
        </li>
        <li class="prismea-navigation-spots--slot"><a class="prismea-spot" href="#" title="Fourth"><i class="prismea-glyph-24_transfer"></i></a>
        </li>
        <li class="prismea-navigation-spots--slot"><a class="prismea-spot" href="#" title="Fifth"><i class="prismea-glyph-24_marketing"></i></a>
        </li>
        <li class="prismea-navigation-spots--slot"><a class="prismea-spot" href="#" title="Sixth"><i class="prismea-glyph-24_admin"></i></a>
        </li>
        <li class="prismea-navigation-spots--slot"><a class="prismea-spot" href="#" title="Seventh"><i class="prismea-glyph-24_tools"></i></a>
        </li>
      </ul>
    </nav>
  </div>
  <div class="prismea-dashboard--header">
    <div class="prismea-dashboard--header--slot -expand">
      <div class="prismea-header">
        <div class="prismea-header--slot -search-bar">
          <div class="prismea-input-group ion--unfocus ion--sm">
            <div class="prismea-input-group--slot -expand ion--slot-left">
              <input class="prismea-input-text -secondary  " type="search" placeholder="Mighty text"/>
            </div>
            <div class="prismea-input-group--slot ion--slot-right">
              <button class="prismea-button -icon "><i class="prismea-glyph-12_search"></i>
              </button>
            </div>
          </div>
        </div>
        <div class="prismea-header--slot">
          <div class="prismea-contextual-profile-menu">
            <div class="prismea-contextual-menu ion--open">
              <div class="prismea-contextual-menu--button">
                <div class="prismea-contextual-profile-menu--card">
                  <div>
                    <div class="prismea-avatar -rounded"><img src="https://images.unsplash.com/photo-1541298645675-6cc8e127934d?ixlib=rb-1.2.1&amp;auto=format&amp;fit=crop&amp;w=400&amp;h=400&amp;q=80"/>
                    </div><span class="prismea-contextual-profile-menu--username">Miles Morales</span>
                    <div class="prismea-contextual-profile-menu--caret"><i class="prismea-glyph-12_caret-down"></i></div>
                  </div>
                </div>
              </div>
              <ul class="prismea-contextual-menu--menu">
                <li>
                  <button class="prismea-contextual-menu--item">First</button>
                </li>
                <li>
                  <button class="prismea-contextual-menu--item">Second</button>
                </li>
                <li>
                  <button class="prismea-contextual-menu--item">Third</button>
                </li>
              </ul>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="prismea-dashboard--body">
    <div class="prismea-body-container">
      <div class="prismea-body-container--content">
        <div class="prismea-vertical-spacing-5">
          <div class="prismea-vertical-spacing-5--slot"><a class="prismea-link -secondary" href="#">‹ Previous</a>
          </div>
          <div class="prismea-vertical-spacing-5--slot">
            <div class="prismea-vertical-spacing-30">
              <div class="prismea-vertical-spacing-30--slot">
                <div class="prismea-vertical-spacing-20">
                  <div class="prismea-vertical-spacing-20--slot">
                            <h1 class="prismea-title-1">Title</h1>
                  </div>
                  <div class="prismea-vertical-spacing-20--slot">
                            <nav>
                              <ul class="prismea-tabs">
                                <li class="prismea-tabs--slot"><a class="prismea-tab" href="#">Some tab</a>
                                </li>
                                <li class="prismea-tabs--slot"><a class="prismea-tab -selected" href="#">Some tab</a>
                                </li>
                              </ul>
                            </nav>
                  </div>
                </div>
              </div>
              <div class="prismea-vertical-spacing-30--slot">
                <div class="prismea-horizontal-spacing-30 -middle">
                  <div class="prismea-horizontal-spacing-30--slot -expand">
                            <div class="prismea-select">
                              <div class="prismea-select--field">
                                <div class="prismea-select--input">
                                  <div class="prismea-select--label"><span>Selected option</span></div>
                                  <div class="prismea-select--caret"><i class="prismea-glyph-12_caret-down"></i></div>
                                </div>
                                <ul class="prismea-select--options">
                                  <li class="prismea-select--option">-- Select an option --</li>
                                  <li class="prismea-select--option -selected">Selected Option</li>
                                  <li class="prismea-select--option -disabled">Disabled Option</li>
                                  <li class="prismea-select--option">Third</li>
                                </ul>
                              </div>
                            </div>
                  </div>
                  <div class="prismea-horizontal-spacing-30--slot">
                            <p class="prismea-text">Text: <span class="prismea-numeral prismea-color -color-positive">+10 000 000€</span>
                            </p>
                  </div>
                </div>
              </div>
              <div class="prismea-vertical-spacing-30--slot">
                        <table class="prismea-table -striped -equivalent -text-sm">
                          <thead class="prismea-table--head">
                            <tr class="prismea-table--line">
                              <th class="prismea-table--cell -width-400">Column A</th>
                              <th class="prismea-table--cell -center">Column B</th>
                              <th class="prismea-table--cell -center">Column C</th>
                              <th class="prismea-table--cell -center">Column D</th>
                              <th class="prismea-table--cell -center">Column E</th>
                              <th class="prismea-table--cell -center"></th>
                            </tr>
                          </thead>
                          <tbody class="prismea-table--body">
                            <tr class="ion--hoverable prismea-table--line prismea-table--line .">
                              <td class="prismea-table--cell"><a class="prismea-link -hoverable" href="#">Line A1</a>
                              </td>
                              <td class="prismea-table--cell -center"><span class="prismea-numeral">Line B1 numeral</span></td>
                              <td class="prismea-table--cell -center">
                                        <button class="prismea-switch -on " role="switch" aria-checked="true" aria-label="Switch"><i class="prismea-switch--button"></i>
                                        </button>
                              </td>
                              <td class="prismea-table--cell -center"><span class="prismea-numeral prismea-color -color-positive">Line D1</span></td>
                              <td class="prismea-table--cell -center">
                                        <div class="prismea-contextual-menu ion--close">
                                          <div class="prismea-contextual-menu--button">
                                                    <button class="prismea-contextual-button"><i class="prismea-contextual-button--icon prismea-glyph-16_document"></i></button>
                                          </div>
                                          <ul class="prismea-contextual-menu--menu">
                                            <li>
                                              <button class="prismea-contextual-menu--item">First</button>
                                            </li>
                                            <li>
                                              <button class="prismea-contextual-menu--item">Second</button>
                                            </li>
                                            <li>
                                              <button class="prismea-contextual-menu--item">Third</button>
                                            </li>
                                          </ul>
                                        </div>
                              </td>
                              <td class="prismea-table--cell -center -action--cell">
                                <div>
                                          <button class="prismea-icon-button"><i class="prismea-icon-button--icon prismea-glyph-24_download"></i></button>
                                          <button class="prismea-icon-button"><i class="prismea-icon-button--icon prismea-glyph-24_update"></i></button>
                                          <button class="prismea-icon-button"><i class="prismea-icon-button--icon prismea-glyph-24_tools"></i></button>
                                </div>
                              </td>
                            </tr>
                            <tr class="prismea-table--line ion--hoverable">
                              <td class="prismea-table--cell">Line A2</td>
                              <td class="prismea-table--cell -center"><span class="prismea-numeral">Line B2 numeral</span></td>
                              <td class="prismea-table--cell -center">
                                        <button class="prismea-switch -off -pending " role="switch" aria-checked="false" aria-label="Switch" title="Pending …"><i class="prismea-switch--button"></i>
                                        </button>
                              </td>
                              <td class="prismea-table--cell -center"><span class="prismea-numeral prismea-color -color-negative">Line D2</span></td>
                              <td class="prismea-table--cell -center">
                                        <div class="prismea-contextual-menu ion--close">
                                          <div class="prismea-contextual-menu--button">
                                                    <button class="prismea-contextual-button -faded"><i class="prismea-contextual-button--icon prismea-glyph-16_document"></i></button>
                                          </div>
                                          <ul class="prismea-contextual-menu--menu">
                                            <li>
                                              <button class="prismea-contextual-menu--item">First</button>
                                            </li>
                                            <li>
                                              <button class="prismea-contextual-menu--item">Second</button>
                                            </li>
                                            <li>
                                              <button class="prismea-contextual-menu--item">Third</button>
                                            </li>
                                          </ul>
                                        </div>
                              </td>
                              <td class="prismea-table--cell -center -action--cell">
                                <div>
                                          <button class="prismea-icon-button"><i class="prismea-icon-button--icon prismea-glyph-24_download"></i></button>
                                          <button class="prismea-icon-button"><i class="prismea-icon-button--icon prismea-glyph-24_update"></i></button>
                                          <button class="prismea-icon-button"><i class="prismea-icon-button--icon prismea-glyph-24_tools"></i></button>
                                </div>
                              </td>
                            </tr>
                            <tr class="prismea-table--line ion--hoverable -ion--staggered-4">
                              <td class="prismea-table--cell">Line A3</td>
                              <td class="prismea-table--cell -center"><span class="prismea-numeral">Line B3 numeral</span></td>
                              <td class="prismea-table--cell -center">
                                        <button class="prismea-switch -off " role="switch" aria-checked="false" aria-label="Switch"><i class="prismea-switch--button"></i>
                                        </button>
                              </td>
                              <td class="prismea-table--cell -center"><span class="prismea-numeral prismea-color -color-neutral">Line D3</span></td>
                              <td class="prismea-table--cell -center">
                                        <div class="prismea-contextual-menu ion--close">
                                          <div class="prismea-contextual-menu--button">
                                                    <button class="prismea-contextual-button -invisible"><i class="prismea-contextual-button--icon prismea-glyph-16_document"></i></button>
                                          </div>
                                          <ul class="prismea-contextual-menu--menu">
                                            <li>
                                              <button class="prismea-contextual-menu--item">First</button>
                                            </li>
                                            <li>
                                              <button class="prismea-contextual-menu--item">Second</button>
                                            </li>
                                            <li>
                                              <button class="prismea-contextual-menu--item">Third</button>
                                            </li>
                                          </ul>
                                        </div>
                              </td>
                              <td class="prismea-table--cell -center -action--cell">
                                <div>
                                          <button class="prismea-icon-button -invisible -selected"><i class="prismea-icon-button--icon prismea-glyph-24_download"></i></button>
                                          <button class="prismea-icon-button -invisible"><i class="prismea-icon-button--icon prismea-glyph-24_update"></i></button>
                                          <button class="prismea-icon-button -invisible"><i class="prismea-icon-button--icon prismea-glyph-24_tools"></i></button>
                                </div>
                              </td>
                            </tr>
                          </tbody>
                        </table>
              </div>
              <div class="prismea-vertical-spacing-30--slot">
                        <div class="prismea-pagination">
                          <button class="prismea-pagination--button" disabled="disabled"><i class="prismea-glyph-12_arrow-left"></i></button>
                          <div class="prismea-pagination--page">Page 1/42</div>
                          <button class="prismea-pagination--button"><i class="prismea-glyph-12_arrow-right"></i></button>
                        </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="prismea-body-container--panel">
        <div class="prismea-vertical-spacing-15">
          <div class="prismea-vertical-spacing-15--slot">
                <div class="prismea-card">
                  <div class="prismea-card--title">Card
                  </div>
                  <div class="prismea-card--slot">
                    <div class="prismea-vertical-spacing-15">
                      <div class="prismea-vertical-spacing-15--slot">
                                <p class="prismea-text -text-sm -text-multiline">
                                  A text under
                                  two lines
                                </p>
                      </div>
                      <div class="prismea-vertical-spacing-15--slot">
                            <hr class="prismea-line"/>
                      </div>
                      <div class="prismea-vertical-spacing-15--slot">
                        <ul class="prismea-vertical-spacing-15">
                          <li class="prismea-vertical-spacing-15--slot">
                                <div class="prismea-tuple -text-sm" style="margin-bottom: 10px;">
                                  <div class="prismea-tuple--slot">Left</div>
                                  <div class="prismea-tuple--slot">Right</div>
                                </div>
                          </li>
                          <li class="prismea-vertical-spacing-15--slot">
                                <div class="prismea-tuple -text-sm" style="margin-bottom: 10px;">
                                  <div class="prismea-tuple--slot">Left</div>
                                  <div class="prismea-tuple--slot"><span class="prismea-numeral">+33 8 36 65 65 65</span>
                                  </div>
                                </div>
                          </li>
                          <li class="prismea-vertical-spacing-15--slot">
                                <div class="prismea-tuple -text-sm" style="margin-bottom: 10px;">
                                  <div class="prismea-tuple--slot">Left</div>
                                  <div class="prismea-tuple--slot">Right</div>
                                </div>
                          </li>
                        </ul>
                      </div>
                    </div>
                  </div>
                </div>
          </div>
          <div class="prismea-vertical-spacing-15--slot">
                <div class="prismea-card">
                  <div class="prismea-card--title">Card
                  </div>
                  <div class="prismea-card--slot">
                    <div class="prismea-vertical-spacing-15">
                      <div class="prismea-vertical-spacing-15--slot">
                                <p class="prismea-text -text-sm -text-multiline">
                                  A text under
                                  two lines
                                </p>
                      </div>
                      <div class="prismea-vertical-spacing-15--slot">
                            <hr class="prismea-line"/>
                      </div>
                      <div class="prismea-vertical-spacing-15--slot">
                        <ul class="prismea-vertical-spacing-15">
                          <li class="prismea-vertical-spacing-15--slot">
                                <div class="prismea-tuple -text-sm" style="margin-bottom: 10px;">
                                  <div class="prismea-tuple--slot">Left</div>
                                  <div class="prismea-tuple--slot">Right</div>
                                </div>
                          </li>
                          <li class="prismea-vertical-spacing-15--slot">
                                <div class="prismea-tuple -text-sm" style="margin-bottom: 10px;">
                                  <div class="prismea-tuple--slot">Left</div>
                                  <div class="prismea-tuple--slot"><span class="prismea-numeral">+33 8 36 65 65 65</span>
                                  </div>
                                </div>
                          </li>
                          <li class="prismea-vertical-spacing-15--slot">
                                <div class="prismea-tuple -text-sm" style="margin-bottom: 10px;">
                                  <div class="prismea-tuple--slot">Left</div>
                                  <div class="prismea-tuple--slot">Right</div>
                                </div>
                          </li>
                        </ul>
                      </div>
                    </div>
                  </div>
                </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
.prismea-dashboard
  .prismea-dashboard--logo
    i.prismea-glyph-50-logo
  .prismea-dashboard--navigation
    nav
      ul.prismea-navigation-spots
        li.prismea-navigation-spots--slot
          a.prismea-spot(href='#', title='First')
            i.prismea-glyph-24_dashboard
        li.prismea-navigation-spots--slot
          a.prismea-spot.-selected(href='#', title='Second')
            i.prismea-glyph-24_company
        li.prismea-navigation-spots--slot
          a.prismea-spot(href='#', title='Third')
            i.prismea-glyph-24_account
        li.prismea-navigation-spots--slot
          a.prismea-spot(href='#', title='Fourth')
            i.prismea-glyph-24_transfer
        li.prismea-navigation-spots--slot
          a.prismea-spot(href='#', title='Fifth')
            i.prismea-glyph-24_marketing
        li.prismea-navigation-spots--slot
          a.prismea-spot(href='#', title='Sixth')
            i.prismea-glyph-24_admin
        li.prismea-navigation-spots--slot
          a.prismea-spot(href='#', title='Seventh')
            i.prismea-glyph-24_tools
  .prismea-dashboard--header
    .prismea-dashboard--header--slot.-expand
      .prismea-header
        .prismea-header--slot.-search-bar
          .prismea-input-group.ion--unfocus.ion--sm
            .prismea-input-group--slot.-expand.ion--slot-left
              input.prismea-input-text.-secondary(type='search', placeholder='Mighty text')
            .prismea-input-group--slot.ion--slot-right
              button.prismea-button.-icon
                i.prismea-glyph-12_search
        .prismea-header--slot
          .prismea-contextual-profile-menu
            .prismea-contextual-menu.ion--open
              .prismea-contextual-menu--button
                .prismea-contextual-profile-menu--card
                  div
                    .prismea-avatar.-rounded
                      img(src='https://images.unsplash.com/photo-1541298645675-6cc8e127934d?ixlib=rb-1.2.1&auto=format&fit=crop&w=400&h=400&q=80')
                    span.prismea-contextual-profile-menu--username Miles Morales
                    .prismea-contextual-profile-menu--caret
                      i.prismea-glyph-12_caret-down
              ul.prismea-contextual-menu--menu
                li
                  button.prismea-contextual-menu--item First
                li
                  button.prismea-contextual-menu--item Second
                li
                  button.prismea-contextual-menu--item Third
  .prismea-dashboard--body
    .prismea-body-container
      .prismea-body-container--content
        .prismea-vertical-spacing-5
          .prismea-vertical-spacing-5--slot
            a.prismea-link.-secondary(href='#') ‹ Previous
          .prismea-vertical-spacing-5--slot
            .prismea-vertical-spacing-30
              .prismea-vertical-spacing-30--slot
                .prismea-vertical-spacing-20
                  .prismea-vertical-spacing-20--slot
                    h1.prismea-title-1 Title
                  .prismea-vertical-spacing-20--slot
                    nav
                      ul.prismea-tabs
                        li.prismea-tabs--slot
                          a.prismea-tab(href='#') Some tab
                        li.prismea-tabs--slot
                          a.prismea-tab.-selected(href='#') Some tab
              .prismea-vertical-spacing-30--slot
                .prismea-horizontal-spacing-30.-middle
                  .prismea-horizontal-spacing-30--slot.-expand
                    .prismea-select
                      .prismea-select--field
                        .prismea-select--input
                          .prismea-select--label
                            span Selected option
                          .prismea-select--caret
                            i.prismea-glyph-12_caret-down
                        ul.prismea-select--options
                          li.prismea-select--option -- Select an option --
                          li.prismea-select--option.-selected Selected Option
                          li.prismea-select--option.-disabled Disabled Option
                          li.prismea-select--option Third
                  .prismea-horizontal-spacing-30--slot
                    p.prismea-text
                      | Text: 
                      span.prismea-numeral.prismea-color.-color-positive +10 000 000€
              .prismea-vertical-spacing-30--slot
                table.prismea-table.-striped.-equivalent.-text-sm
                  thead.prismea-table--head
                    tr.prismea-table--line
                      th.prismea-table--cell.-width-400 Column A
                      th.prismea-table--cell.-center Column B
                      th.prismea-table--cell.-center Column C
                      th.prismea-table--cell.-center Column D
                      th.prismea-table--cell.-center Column E
                      th.prismea-table--cell.-center
                  tbody.prismea-table--body
                    tr.ion--hoverable.prismea-table--line.prismea-table--line..
                      td.prismea-table--cell
                        a.prismea-link.-hoverable(href='#') Line A1
                      td.prismea-table--cell.-center
                        span.prismea-numeral Line B1 numeral
                      td.prismea-table--cell.-center
                        button.prismea-switch.-on(role='switch', aria-checked='true', aria-label='Switch')
                          i.prismea-switch--button
                      td.prismea-table--cell.-center
                        span.prismea-numeral.prismea-color.-color-positive Line D1
                      td.prismea-table--cell.-center
                        .prismea-contextual-menu.ion--close
                          .prismea-contextual-menu--button
                            button.prismea-contextual-button
                              i.prismea-contextual-button--icon.prismea-glyph-16_document
                          ul.prismea-contextual-menu--menu
                            li
                              button.prismea-contextual-menu--item First
                            li
                              button.prismea-contextual-menu--item Second
                            li
                              button.prismea-contextual-menu--item Third
                      td.prismea-table--cell.-center.-action--cell
                        div
                          button.prismea-icon-button
                            i.prismea-icon-button--icon.prismea-glyph-24_download
                          button.prismea-icon-button
                            i.prismea-icon-button--icon.prismea-glyph-24_update
                          button.prismea-icon-button
                            i.prismea-icon-button--icon.prismea-glyph-24_tools
                    tr.prismea-table--line.ion--hoverable
                      td.prismea-table--cell Line A2
                      td.prismea-table--cell.-center
                        span.prismea-numeral Line B2 numeral
                      td.prismea-table--cell.-center
                        button.prismea-switch.-off.-pending(role='switch', aria-checked='false', aria-label='Switch', title='Pending …')
                          i.prismea-switch--button
                      td.prismea-table--cell.-center
                        span.prismea-numeral.prismea-color.-color-negative Line D2
                      td.prismea-table--cell.-center
                        .prismea-contextual-menu.ion--close
                          .prismea-contextual-menu--button
                            button.prismea-contextual-button.-faded
                              i.prismea-contextual-button--icon.prismea-glyph-16_document
                          ul.prismea-contextual-menu--menu
                            li
                              button.prismea-contextual-menu--item First
                            li
                              button.prismea-contextual-menu--item Second
                            li
                              button.prismea-contextual-menu--item Third
                      td.prismea-table--cell.-center.-action--cell
                        div
                          button.prismea-icon-button
                            i.prismea-icon-button--icon.prismea-glyph-24_download
                          button.prismea-icon-button
                            i.prismea-icon-button--icon.prismea-glyph-24_update
                          button.prismea-icon-button
                            i.prismea-icon-button--icon.prismea-glyph-24_tools
                    tr.prismea-table--line.ion--hoverable.-ion--staggered-4
                      td.prismea-table--cell Line A3
                      td.prismea-table--cell.-center
                        span.prismea-numeral Line B3 numeral
                      td.prismea-table--cell.-center
                        button.prismea-switch.-off(role='switch', aria-checked='false', aria-label='Switch')
                          i.prismea-switch--button
                      td.prismea-table--cell.-center
                        span.prismea-numeral.prismea-color.-color-neutral Line D3
                      td.prismea-table--cell.-center
                        .prismea-contextual-menu.ion--close
                          .prismea-contextual-menu--button
                            button.prismea-contextual-button.-invisible
                              i.prismea-contextual-button--icon.prismea-glyph-16_document
                          ul.prismea-contextual-menu--menu
                            li
                              button.prismea-contextual-menu--item First
                            li
                              button.prismea-contextual-menu--item Second
                            li
                              button.prismea-contextual-menu--item Third
                      td.prismea-table--cell.-center.-action--cell
                        div
                          button.prismea-icon-button.-invisible.-selected
                            i.prismea-icon-button--icon.prismea-glyph-24_download
                          button.prismea-icon-button.-invisible
                            i.prismea-icon-button--icon.prismea-glyph-24_update
                          button.prismea-icon-button.-invisible
                            i.prismea-icon-button--icon.prismea-glyph-24_tools
              .prismea-vertical-spacing-30--slot
                .prismea-pagination
                  button.prismea-pagination--button(disabled)
                    i.prismea-glyph-12_arrow-left
                  .prismea-pagination--page Page 1/42
                  button.prismea-pagination--button
                    i.prismea-glyph-12_arrow-right
      .prismea-body-container--panel
        .prismea-vertical-spacing-15
          .prismea-vertical-spacing-15--slot
            .prismea-card
              .prismea-card--title.
                Card
                
              .prismea-card--slot
                .prismea-vertical-spacing-15
                  .prismea-vertical-spacing-15--slot
                    p.prismea-text.-text-sm.-text-multiline.
                      
                      A text under two lines
                      
                  .prismea-vertical-spacing-15--slot
                    hr.prismea-line
                  .prismea-vertical-spacing-15--slot
                    ul.prismea-vertical-spacing-15
                      li.prismea-vertical-spacing-15--slot
                        .prismea-tuple.-text-sm(style='margin-bottom: 10px;')
                          .prismea-tuple--slot Left
                          .prismea-tuple--slot Right
                      li.prismea-vertical-spacing-15--slot
                        .prismea-tuple.-text-sm(style='margin-bottom: 10px;')
                          .prismea-tuple--slot Left
                          .prismea-tuple--slot
                            span.prismea-numeral +33 8 36 65 65 65
                      li.prismea-vertical-spacing-15--slot
                        .prismea-tuple.-text-sm(style='margin-bottom: 10px;')
                          .prismea-tuple--slot Left
                          .prismea-tuple--slot Right
          .prismea-vertical-spacing-15--slot
            .prismea-card
              .prismea-card--title.
                Card
                
              .prismea-card--slot
                .prismea-vertical-spacing-15
                  .prismea-vertical-spacing-15--slot
                    p.prismea-text.-text-sm.-text-multiline.
                      
                      A text under two lines
                      
                  .prismea-vertical-spacing-15--slot
                    hr.prismea-line
                  .prismea-vertical-spacing-15--slot
                    ul.prismea-vertical-spacing-15
                      li.prismea-vertical-spacing-15--slot
                        .prismea-tuple.-text-sm(style='margin-bottom: 10px;')
                          .prismea-tuple--slot Left
                          .prismea-tuple--slot Right
                      li.prismea-vertical-spacing-15--slot
                        .prismea-tuple.-text-sm(style='margin-bottom: 10px;')
                          .prismea-tuple--slot Left
                          .prismea-tuple--slot
                            span.prismea-numeral +33 8 36 65 65 65
                      li.prismea-vertical-spacing-15--slot
                        .prismea-tuple.-text-sm(style='margin-bottom: 10px;')
                          .prismea-tuple--slot Left
                          .prismea-tuple--slot Right

Dashboard with filter and panel

<div class="prismea-dashboard">
  <div class="prismea-dashboard--logo"><i class="prismea-glyph-50-logo"></i></div>
  <div class="prismea-dashboard--navigation">
    <nav>
      <ul class="prismea-navigation-spots">
        <li class="prismea-navigation-spots--slot"><a class="prismea-spot" href="#" title="First"><i class="prismea-glyph-24_dashboard"></i></a>
        </li>
        <li class="prismea-navigation-spots--slot"><a class="prismea-spot -selected" href="#" title="Second"><i class="prismea-glyph-24_company"></i></a>
        </li>
        <li class="prismea-navigation-spots--slot"><a class="prismea-spot" href="#" title="Third"><i class="prismea-glyph-24_account"></i></a>
        </li>
        <li class="prismea-navigation-spots--slot"><a class="prismea-spot" href="#" title="Fourth"><i class="prismea-glyph-24_transfer"></i></a>
        </li>
        <li class="prismea-navigation-spots--slot"><a class="prismea-spot" href="#" title="Fifth"><i class="prismea-glyph-24_marketing"></i></a>
        </li>
        <li class="prismea-navigation-spots--slot"><a class="prismea-spot" href="#" title="Sixth"><i class="prismea-glyph-24_admin"></i></a>
        </li>
        <li class="prismea-navigation-spots--slot"><a class="prismea-spot" href="#" title="Seventh"><i class="prismea-glyph-24_tools"></i></a>
        </li>
      </ul>
    </nav>
  </div>
  <div class="prismea-dashboard--header">
    <div class="prismea-dashboard--header--slot -expand">
      <div class="prismea-header">
        <div class="prismea-header--slot -search-bar">
          <div class="prismea-input-group ion--unfocus ion--sm">
            <div class="prismea-input-group--slot -expand ion--slot-left">
              <input class="prismea-input-text -secondary  " type="search" placeholder="Mighty text"/>
            </div>
            <div class="prismea-input-group--slot ion--slot-right">
              <button class="prismea-button -icon "><i class="prismea-glyph-12_search"></i>
              </button>
            </div>
          </div>
        </div>
        <div class="prismea-header--slot">
          <div class="prismea-contextual-profile-menu">
            <div class="prismea-contextual-menu ion--open">
              <div class="prismea-contextual-menu--button">
                <div class="prismea-contextual-profile-menu--card">
                  <div>
                    <div class="prismea-avatar -rounded"><img src="https://images.unsplash.com/photo-1541298645675-6cc8e127934d?ixlib=rb-1.2.1&amp;auto=format&amp;fit=crop&amp;w=400&amp;h=400&amp;q=80"/>
                    </div><span class="prismea-contextual-profile-menu--username">Miles Morales</span>
                    <div class="prismea-contextual-profile-menu--caret"><i class="prismea-glyph-12_caret-down"></i></div>
                  </div>
                </div>
              </div>
              <ul class="prismea-contextual-menu--menu">
                <li>
                  <button class="prismea-contextual-menu--item">First</button>
                </li>
                <li>
                  <button class="prismea-contextual-menu--item">Second</button>
                </li>
                <li>
                  <button class="prismea-contextual-menu--item">Third</button>
                </li>
              </ul>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="prismea-dashboard--body">
    <div class="prismea-body-container">
      <div class="prismea-body-container--content">
        <div class="prismea-vertical-spacing-5">
          <div class="prismea-vertical-spacing-5--slot"><a class="prismea-link -secondary" href="#">‹ Previous</a>
          </div>
          <div class="prismea-vertical-spacing-5--slot">
            <div class="prismea-vertical-spacing-30">
              <div class="prismea-vertical-spacing-30--slot">
                <div class="prismea-vertical-spacing-20">
                  <div class="prismea-vertical-spacing-20--slot">
                            <h1 class="prismea-title-1">Title</h1>
                  </div>
                  <div class="prismea-vertical-spacing-20--slot">
                            <nav>
                              <ul class="prismea-tabs">
                                <li class="prismea-tabs--slot"><a class="prismea-tab" href="#">Some tab</a>
                                </li>
                                <li class="prismea-tabs--slot"><a class="prismea-tab -selected" href="#">Some tab</a>
                                </li>
                              </ul>
                            </nav>
                  </div>
                </div>
              </div>
              <div class="prismea-vertical-spacing-30--slot">
                        <div class="prismea-filtered-area">
                          <div class="prismea-filtered-area--filter">
                            <div class="prismea-vertical-spacing-30">
                              <div class="prismea-vertical-spacing-30--slot">
                                <div class="prismea-vertical-spacing-10">
                                  <div class="prismea-vertical-spacing-10--slot">
                                            <h1 class="prismea-title-3">Filters</h1>
                                  </div>
                                  <div class="prismea-vertical-spacing-10--slot">
                                            <div class="prismea-field">
                                              <div class="prismea-field--slot">
                                                        <label class="prismea-label">Label</label>
                                              </div>
                                              <div class="prismea-field--slot">
                                                        <input class="prismea-input-text  " type="text" placeholder="Mighty text"/>
                                              </div>
                                            </div>
                                  </div>
                                  <div class="prismea-vertical-spacing-10--slot">
                                            <div class="prismea-field">
                                              <div class="prismea-field--slot">
                                                        <label class="prismea-label">Label</label>
                                              </div>
                                              <div class="prismea-field--slot">
                                                        <input class="prismea-input-text  " type="text" placeholder="Mighty text"/>
                                              </div>
                                            </div>
                                  </div>
                                  <div class="prismea-vertical-spacing-10--slot">
                                            <div class="prismea-field">
                                              <div class="prismea-field--slot">
                                                        <label class="prismea-label">Label</label>
                                              </div>
                                              <div class="prismea-field--slot">
                                                        <div class="prismea-select">
                                                          <div class="prismea-select--field">
                                                            <div class="prismea-select--input">
                                                              <div class="prismea-select--label"><span>Selected option</span></div>
                                                              <div class="prismea-select--caret"><i class="prismea-glyph-12_caret-down"></i></div>
                                                            </div>
                                                            <ul class="prismea-select--options">
                                                              <li class="prismea-select--option">-- Select an option --</li>
                                                              <li class="prismea-select--option -selected">Selected Option</li>
                                                              <li class="prismea-select--option -disabled">Disabled Option</li>
                                                              <li class="prismea-select--option">Third</li>
                                                            </ul>
                                                          </div>
                                                        </div>
                                              </div>
                                            </div>
                                  </div>
                                </div>
                              </div>
                              <div class="prismea-vertical-spacing-30--slot">
                                        <button class="prismea-button -block ">Button
                                        </button>
                              </div>
                            </div>
                          </div>
                          <div class="prismea-filtered-area--line"></div>
                          <div class="prismea-filtered-area--content">
                            <div class="prismea-vertical-spacing-30">
                              <div class="prismea-vertical-spacing-30--slot">
                                        <table class="prismea-table-log -text-sm">
                                          <tbody>
                                            <tr class="prismea-table-log--line ion--hoverable">
                                              <td class="prismea-table-log--line--slot -width-50">
                                                        <div class="prismea-badge -block -positive">POST
                                                        </div>
                                                        <div class="prismea-badge -block">404
                                                        </div>
                                              </td>
                                              <td class="prismea-table-log--line--slot -expand">
                                                        <div class="prismea-log-line">
                                                          <div class="prismea-log-line--uri">/api/v1/path/to/a/specific/resource</div>
                                                          <div class="prismea-log-line--date">21 / 12 / 2019 - 09:38 (654ms)
                                                          </div>
                                                        </div>
                                              </td>
                                              <td class="prismea-table-log--line--slot -width-25 -right"><i class="prismea-icon -x1 prismea-glyph-16_warning -color-warning"></i>
                                              </td>
                                            </tr>
                                            <tr class="prismea-table-log--line ion--hoverable">
                                              <td class="prismea-table-log--line--slot -width-50">
                                                        <div class="prismea-badge -block -classic">GET
                                                        </div>
                                                        <div class="prismea-badge -block">500
                                                        </div>
                                              </td>
                                              <td class="prismea-table-log--line--slot -expand">
                                                        <div class="prismea-log-line">
                                                          <div class="prismea-log-line--uri">/api/v1/path/to/a/specific/resource</div>
                                                          <div class="prismea-log-line--date">21 / 12 / 2019 - 09:38 (654ms)
                                                          </div>
                                                        </div>
                                              </td>
                                              <td class="prismea-table-log--line--slot -width-25 -right"><i class="prismea-icon -x1 prismea-glyph-16_error -color-negative"></i>
                                              </td>
                                            </tr>
                                            <tr class="prismea-table-log--line ion--hoverable">
                                              <td class="prismea-table-log--line--slot -width-50">
                                                        <div class="prismea-badge -block -neutral">PUT
                                                        </div>
                                                        <div class="prismea-badge -block">200
                                                        </div>
                                              </td>
                                              <td class="prismea-table-log--line--slot -expand">
                                                        <div class="prismea-log-line">
                                                          <div class="prismea-log-line--uri">/api/v1/path/to/a/specific/resource</div>
                                                          <div class="prismea-log-line--date">21 / 12 / 2019 - 09:38 (654ms)
                                                          </div>
                                                        </div>
                                              </td>
                                              <td class="prismea-table-log--line--slot -width-25 -right"></td>
                                            </tr>
                                            <tr class="prismea-table-log--line ion--hoverable">
                                              <td class="prismea-table-log--line--slot -width-50">
                                                        <div class="prismea-badge -block -special">PATCH
                                                        </div>
                                                        <div class="prismea-badge -block">200
                                                        </div>
                                              </td>
                                              <td class="prismea-table-log--line--slot -expand">
                                                        <div class="prismea-log-line">
                                                          <div class="prismea-log-line--uri">/api/v1/path/to/a/specific/resource</div>
                                                          <div class="prismea-log-line--date">21 / 12 / 2019 - 09:38 (654ms)
                                                          </div>
                                                        </div>
                                              </td>
                                              <td class="prismea-table-log--line--slot -width-25 -right"></td>
                                            </tr>
                                            <tr class="prismea-table-log--line ion--hoverable">
                                              <td class="prismea-table-log--line--slot -width-50">
                                                        <div class="prismea-badge -block -negative">DELETE
                                                        </div>
                                                        <div class="prismea-badge -block">200
                                                        </div>
                                              </td>
                                              <td class="prismea-table-log--line--slot -expand">
                                                        <div class="prismea-log-line">
                                                          <div class="prismea-log-line--uri">/api/v1/path/to/a/specific/resource</div>
                                                          <div class="prismea-log-line--date">21 / 12 / 2019 - 09:38 (654ms) <span class="prismea-log-line--date--icon"><i class="prismea-icon prismea-glyph-12_pending"></i></span>
                                                          </div>
                                                        </div>
                                              </td>
                                              <td class="prismea-table-log--line--slot -width-25 -right"></td>
                                            </tr>
                                            <tr class="prismea-table-log--line ion--hoverable">
                                              <td class="prismea-table-log--line--slot -width-50">
                                                        <div class="prismea-badge -block -classic-light">OPTIONS
                                                        </div>
                                                        <div class="prismea-badge -block">200
                                                        </div>
                                              </td>
                                              <td class="prismea-table-log--line--slot -expand">
                                                        <div class="prismea-log-line">
                                                          <div class="prismea-log-line--uri">/api/v1/path/to/a/specific/resource</div>
                                                          <div class="prismea-log-line--date">21 / 12 / 2019 - 09:38 (654ms)
                                                          </div>
                                                        </div>
                                              </td>
                                              <td class="prismea-table-log--line--slot -width-25 -right"></td>
                                            </tr>
                                          </tbody>
                                        </table>
                              </div>
                              <div class="prismea-vertical-spacing-30--slot">
                                        <div class="prismea-pagination">
                                          <button class="prismea-pagination--button" disabled="disabled"><i class="prismea-glyph-12_arrow-left"></i></button>
                                          <div class="prismea-pagination--page">Page 1/42</div>
                                          <button class="prismea-pagination--button"><i class="prismea-glyph-12_arrow-right"></i></button>
                                        </div>
                              </div>
                            </div>
                          </div>
                        </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="prismea-body-container--panel">
        <div class="prismea-vertical-spacing-15">
          <div class="prismea-vertical-spacing-15--slot">
                <div class="prismea-card">
                  <div class="prismea-card--title">Card
                  </div>
                  <div class="prismea-card--slot">
                    <div class="prismea-vertical-spacing-15">
                      <div class="prismea-vertical-spacing-15--slot">
                            <p class="prismea-text -text-sm -text-multiline">
                              A text under
                              two lines
                            </p>
                      </div>
                      <div class="prismea-vertical-spacing-15--slot">
                            <hr class="prismea-line"/>
                      </div>
                      <div class="prismea-vertical-spacing-15--slot">
                        <ul class="prismea-vertical-spacing-15">
                          <li class="prismea-vertical-spacing-15--slot">
                                <div class="prismea-tuple -text-sm" style="margin-bottom: 10px;">
                                  <div class="prismea-tuple--slot">Left</div>
                                  <div class="prismea-tuple--slot">Right</div>
                                </div>
                          </li>
                          <li class="prismea-vertical-spacing-15--slot">
                                <div class="prismea-tuple -text-sm" style="margin-bottom: 10px;">
                                  <div class="prismea-tuple--slot">Left</div>
                                  <div class="prismea-tuple--slot"><span class="prismea-numeral">+33 8 36 65 65 65</span>
                                  </div>
                                </div>
                          </li>
                          <li class="prismea-vertical-spacing-15--slot">
                                <div class="prismea-tuple -text-sm" style="margin-bottom: 10px;">
                                  <div class="prismea-tuple--slot">Left</div>
                                  <div class="prismea-tuple--slot">Right</div>
                                </div>
                          </li>
                        </ul>
                      </div>
                    </div>
                  </div>
                </div>
          </div>
          <div class="prismea-vertical-spacing-15--slot">
                <div class="prismea-card">
                  <div class="prismea-card--title">Card
                  </div>
                  <div class="prismea-card--slot">
                    <div class="prismea-vertical-spacing-15">
                      <div class="prismea-vertical-spacing-15--slot">
                            <p class="prismea-text -text-sm -text-multiline">
                              A text under
                              two lines
                            </p>
                      </div>
                      <div class="prismea-vertical-spacing-15--slot">
                            <hr class="prismea-line"/>
                      </div>
                      <div class="prismea-vertical-spacing-15--slot">
                        <ul class="prismea-vertical-spacing-15">
                          <li class="prismea-vertical-spacing-15--slot">
                                <div class="prismea-tuple -text-sm" style="margin-bottom: 10px;">
                                  <div class="prismea-tuple--slot">Left</div>
                                  <div class="prismea-tuple--slot">Right</div>
                                </div>
                          </li>
                          <li class="prismea-vertical-spacing-15--slot">
                                <div class="prismea-tuple -text-sm" style="margin-bottom: 10px;">
                                  <div class="prismea-tuple--slot">Left</div>
                                  <div class="prismea-tuple--slot"><span class="prismea-numeral">+33 8 36 65 65 65</span>
                                  </div>
                                </div>
                          </li>
                          <li class="prismea-vertical-spacing-15--slot">
                                <div class="prismea-tuple -text-sm" style="margin-bottom: 10px;">
                                  <div class="prismea-tuple--slot">Left</div>
                                  <div class="prismea-tuple--slot">Right</div>
                                </div>
                          </li>
                        </ul>
                      </div>
                    </div>
                  </div>
                </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
.prismea-dashboard
  .prismea-dashboard--logo
    i.prismea-glyph-50-logo
  .prismea-dashboard--navigation
    nav
      ul.prismea-navigation-spots
        li.prismea-navigation-spots--slot
          a.prismea-spot(href='#', title='First')
            i.prismea-glyph-24_dashboard
        li.prismea-navigation-spots--slot
          a.prismea-spot.-selected(href='#', title='Second')
            i.prismea-glyph-24_company
        li.prismea-navigation-spots--slot
          a.prismea-spot(href='#', title='Third')
            i.prismea-glyph-24_account
        li.prismea-navigation-spots--slot
          a.prismea-spot(href='#', title='Fourth')
            i.prismea-glyph-24_transfer
        li.prismea-navigation-spots--slot
          a.prismea-spot(href='#', title='Fifth')
            i.prismea-glyph-24_marketing
        li.prismea-navigation-spots--slot
          a.prismea-spot(href='#', title='Sixth')
            i.prismea-glyph-24_admin
        li.prismea-navigation-spots--slot
          a.prismea-spot(href='#', title='Seventh')
            i.prismea-glyph-24_tools
  .prismea-dashboard--header
    .prismea-dashboard--header--slot.-expand
      .prismea-header
        .prismea-header--slot.-search-bar
          .prismea-input-group.ion--unfocus.ion--sm
            .prismea-input-group--slot.-expand.ion--slot-left
              input.prismea-input-text.-secondary(type='search', placeholder='Mighty text')
            .prismea-input-group--slot.ion--slot-right
              button.prismea-button.-icon
                i.prismea-glyph-12_search
        .prismea-header--slot
          .prismea-contextual-profile-menu
            .prismea-contextual-menu.ion--open
              .prismea-contextual-menu--button
                .prismea-contextual-profile-menu--card
                  div
                    .prismea-avatar.-rounded
                      img(src='https://images.unsplash.com/photo-1541298645675-6cc8e127934d?ixlib=rb-1.2.1&auto=format&fit=crop&w=400&h=400&q=80')
                    span.prismea-contextual-profile-menu--username Miles Morales
                    .prismea-contextual-profile-menu--caret
                      i.prismea-glyph-12_caret-down
              ul.prismea-contextual-menu--menu
                li
                  button.prismea-contextual-menu--item First
                li
                  button.prismea-contextual-menu--item Second
                li
                  button.prismea-contextual-menu--item Third
  .prismea-dashboard--body
    .prismea-body-container
      .prismea-body-container--content
        .prismea-vertical-spacing-5
          .prismea-vertical-spacing-5--slot
            a.prismea-link.-secondary(href='#') ‹ Previous
          .prismea-vertical-spacing-5--slot
            .prismea-vertical-spacing-30
              .prismea-vertical-spacing-30--slot
                .prismea-vertical-spacing-20
                  .prismea-vertical-spacing-20--slot
                    h1.prismea-title-1 Title
                  .prismea-vertical-spacing-20--slot
                    nav
                      ul.prismea-tabs
                        li.prismea-tabs--slot
                          a.prismea-tab(href='#') Some tab
                        li.prismea-tabs--slot
                          a.prismea-tab.-selected(href='#') Some tab
              .prismea-vertical-spacing-30--slot
                .prismea-filtered-area
                  .prismea-filtered-area--filter
                    .prismea-vertical-spacing-30
                      .prismea-vertical-spacing-30--slot
                        .prismea-vertical-spacing-10
                          .prismea-vertical-spacing-10--slot
                            h1.prismea-title-3 Filters
                          .prismea-vertical-spacing-10--slot
                            .prismea-field
                              .prismea-field--slot
                                label.prismea-label Label
                              .prismea-field--slot
                                input.prismea-input-text(type='text', placeholder='Mighty text')
                          .prismea-vertical-spacing-10--slot
                            .prismea-field
                              .prismea-field--slot
                                label.prismea-label Label
                              .prismea-field--slot
                                input.prismea-input-text(type='text', placeholder='Mighty text')
                          .prismea-vertical-spacing-10--slot
                            .prismea-field
                              .prismea-field--slot
                                label.prismea-label Label
                              .prismea-field--slot
                                .prismea-select
                                  .prismea-select--field
                                    .prismea-select--input
                                      .prismea-select--label
                                        span Selected option
                                      .prismea-select--caret
                                        i.prismea-glyph-12_caret-down
                                    ul.prismea-select--options
                                      li.prismea-select--option -- Select an option --
                                      li.prismea-select--option.-selected Selected Option
                                      li.prismea-select--option.-disabled Disabled Option
                                      li.prismea-select--option Third
                      .prismea-vertical-spacing-30--slot
                        button.prismea-button.-block.
                          Button
                          
                  .prismea-filtered-area--line
                  .prismea-filtered-area--content
                    .prismea-vertical-spacing-30
                      .prismea-vertical-spacing-30--slot
                        table.prismea-table-log.-text-sm
                          tbody
                            tr.prismea-table-log--line.ion--hoverable
                              td.prismea-table-log--line--slot.-width-50
                                .prismea-badge.-block.-positive.
                                  POST
                                  
                                .prismea-badge.-block.
                                  404
                                  
                              td.prismea-table-log--line--slot.-expand
                                .prismea-log-line
                                  .prismea-log-line--uri /api/v1/path/to/a/specific/resource
                                  .prismea-log-line--date.
                                    21 / 12 / 2019 - 09:38 (654ms)
                                    
                              td.prismea-table-log--line--slot.-width-25.-right
                                i.prismea-icon.-x1.prismea-glyph-16_warning.-color-warning
                            tr.prismea-table-log--line.ion--hoverable
                              td.prismea-table-log--line--slot.-width-50
                                .prismea-badge.-block.-classic.
                                  GET
                                  
                                .prismea-badge.-block.
                                  500
                                  
                              td.prismea-table-log--line--slot.-expand
                                .prismea-log-line
                                  .prismea-log-line--uri /api/v1/path/to/a/specific/resource
                                  .prismea-log-line--date.
                                    21 / 12 / 2019 - 09:38 (654ms)
                                    
                              td.prismea-table-log--line--slot.-width-25.-right
                                i.prismea-icon.-x1.prismea-glyph-16_error.-color-negative
                            tr.prismea-table-log--line.ion--hoverable
                              td.prismea-table-log--line--slot.-width-50
                                .prismea-badge.-block.-neutral.
                                  PUT
                                  
                                .prismea-badge.-block.
                                  200
                                  
                              td.prismea-table-log--line--slot.-expand
                                .prismea-log-line
                                  .prismea-log-line--uri /api/v1/path/to/a/specific/resource
                                  .prismea-log-line--date.
                                    21 / 12 / 2019 - 09:38 (654ms)
                                    
                              td.prismea-table-log--line--slot.-width-25.-right
                            tr.prismea-table-log--line.ion--hoverable
                              td.prismea-table-log--line--slot.-width-50
                                .prismea-badge.-block.-special.
                                  PATCH
                                  
                                .prismea-badge.-block.
                                  200
                                  
                              td.prismea-table-log--line--slot.-expand
                                .prismea-log-line
                                  .prismea-log-line--uri /api/v1/path/to/a/specific/resource
                                  .prismea-log-line--date.
                                    21 / 12 / 2019 - 09:38 (654ms)
                                    
                              td.prismea-table-log--line--slot.-width-25.-right
                            tr.prismea-table-log--line.ion--hoverable
                              td.prismea-table-log--line--slot.-width-50
                                .prismea-badge.-block.-negative.
                                  DELETE
                                  
                                .prismea-badge.-block.
                                  200
                                  
                              td.prismea-table-log--line--slot.-expand
                                .prismea-log-line
                                  .prismea-log-line--uri /api/v1/path/to/a/specific/resource
                                  .prismea-log-line--date
                                    | 21 / 12 / 2019 - 09:38 (654ms) 
                                    span.prismea-log-line--date--icon
                                      i.prismea-icon.prismea-glyph-12_pending
                              td.prismea-table-log--line--slot.-width-25.-right
                            tr.prismea-table-log--line.ion--hoverable
                              td.prismea-table-log--line--slot.-width-50
                                .prismea-badge.-block.-classic-light.
                                  OPTIONS
                                  
                                .prismea-badge.-block.
                                  200
                                  
                              td.prismea-table-log--line--slot.-expand
                                .prismea-log-line
                                  .prismea-log-line--uri /api/v1/path/to/a/specific/resource
                                  .prismea-log-line--date.
                                    21 / 12 / 2019 - 09:38 (654ms)
                                    
                              td.prismea-table-log--line--slot.-width-25.-right
                      .prismea-vertical-spacing-30--slot
                        .prismea-pagination
                          button.prismea-pagination--button(disabled)
                            i.prismea-glyph-12_arrow-left
                          .prismea-pagination--page Page 1/42
                          button.prismea-pagination--button
                            i.prismea-glyph-12_arrow-right
      .prismea-body-container--panel
        .prismea-vertical-spacing-15
          .prismea-vertical-spacing-15--slot
            .prismea-card
              .prismea-card--title.
                Card
                
              .prismea-card--slot
                .prismea-vertical-spacing-15
                  .prismea-vertical-spacing-15--slot
                    p.prismea-text.-text-sm.-text-multiline.
                      
                      A text under two lines
                      
                  .prismea-vertical-spacing-15--slot
                    hr.prismea-line
                  .prismea-vertical-spacing-15--slot
                    ul.prismea-vertical-spacing-15
                      li.prismea-vertical-spacing-15--slot
                        .prismea-tuple.-text-sm(style='margin-bottom: 10px;')
                          .prismea-tuple--slot Left
                          .prismea-tuple--slot Right
                      li.prismea-vertical-spacing-15--slot
                        .prismea-tuple.-text-sm(style='margin-bottom: 10px;')
                          .prismea-tuple--slot Left
                          .prismea-tuple--slot
                            span.prismea-numeral +33 8 36 65 65 65
                      li.prismea-vertical-spacing-15--slot
                        .prismea-tuple.-text-sm(style='margin-bottom: 10px;')
                          .prismea-tuple--slot Left
                          .prismea-tuple--slot Right
          .prismea-vertical-spacing-15--slot
            .prismea-card
              .prismea-card--title.
                Card
                
              .prismea-card--slot
                .prismea-vertical-spacing-15
                  .prismea-vertical-spacing-15--slot
                    p.prismea-text.-text-sm.-text-multiline.
                      
                      A text under two lines
                      
                  .prismea-vertical-spacing-15--slot
                    hr.prismea-line
                  .prismea-vertical-spacing-15--slot
                    ul.prismea-vertical-spacing-15
                      li.prismea-vertical-spacing-15--slot
                        .prismea-tuple.-text-sm(style='margin-bottom: 10px;')
                          .prismea-tuple--slot Left
                          .prismea-tuple--slot Right
                      li.prismea-vertical-spacing-15--slot
                        .prismea-tuple.-text-sm(style='margin-bottom: 10px;')
                          .prismea-tuple--slot Left
                          .prismea-tuple--slot
                            span.prismea-numeral +33 8 36 65 65 65
                      li.prismea-vertical-spacing-15--slot
                        .prismea-tuple.-text-sm(style='margin-bottom: 10px;')
                          .prismea-tuple--slot Left
                          .prismea-tuple--slot Right

Modal layout

<div class="prismea-modal-layout -fixed">
  <div class="prismea-modal-layout--box">
    <div class="prismea-modal">
      <div class="prismea-modal--header">
        <div class="prismea-modal--header--slot">
          <h1 class="prismea-title-2">Modal title</h1>
        </div>
        <div class="prismea-modal--header--slot -close"><i class="prismea-glyph-12_cross"></i></div>
      </div>
      <hr class="prismea-line"/>
      <div class="prismea-modal--body">
        <div class="prismea-vertical-spacing-30">
          <div class="prismea-vertical-spacing-30--slot">
            <p class="prismea-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Nam ornare nunc dui, facilisis pretium nisl mattis ac. Integer vel ipsum lectus.
Pellentesque orci est, elementum eget sem sit amet, accumsan interdum orci.
Sed egestas mauris sit amet magna mollis, vitae vehicula nunc sollicitudin.
Suspendisse congue erat arcu. Fusce sed massa sit amet purus suscipit euismod eget et lectus.
Nunc in maximus tellus.

            </p>
          </div>
          <div class="prismea-vertical-spacing-30--slot">
            <div class="prismea-field">
              <div class="prismea-field--slot">
                <label class="prismea-label">Label</label>
              </div>
              <div class="prismea-field--slot">
                <input class="prismea-input-text  " type="text" placeholder="Mighty text"/>
              </div>
            </div>
          </div>
          <div class="prismea-vertical-spacing-30--slot">
            <div class="prismea-field">
              <div class="prismea-field--slot">
                <label class="prismea-label">Label</label>
              </div>
              <div class="prismea-field--slot">
                <textarea class="prismea-textarea" placeholder="Textarea" rows="4"></textarea>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="prismea-modal--footer">
        <div class="prismea-modal--footer--slot">
          <button class="prismea-button -link ">Button
          </button>
        </div>
        <div class="prismea-modal--footer--slot">
          <button class="prismea-button">Button
          </button>
        </div>
      </div>
    </div>
  </div>
</div>
.prismea-modal-layout.-fixed
  .prismea-modal-layout--box
    .prismea-modal
      .prismea-modal--header
        .prismea-modal--header--slot
          h1.prismea-title-2 Modal title
        .prismea-modal--header--slot.-close
          i.prismea-glyph-12_cross
      hr.prismea-line
      .prismea-modal--body
        .prismea-vertical-spacing-30
          .prismea-vertical-spacing-30--slot
            p.prismea-text.
              Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam ornare nunc dui, facilisis pretium nisl mattis ac. Integer vel ipsum lectus. Pellentesque orci est, elementum eget sem sit amet, accumsan interdum orci. Sed egestas mauris sit amet magna mollis, vitae vehicula nunc sollicitudin. Suspendisse congue erat arcu. Fusce sed massa sit amet purus suscipit euismod eget et lectus. Nunc in maximus tellus.
              
          .prismea-vertical-spacing-30--slot
            .prismea-field
              .prismea-field--slot
                label.prismea-label Label
              .prismea-field--slot
                input.prismea-input-text(type='text', placeholder='Mighty text')
          .prismea-vertical-spacing-30--slot
            .prismea-field
              .prismea-field--slot
                label.prismea-label Label
              .prismea-field--slot
                textarea.prismea-textarea(placeholder='Textarea', rows='4')
      .prismea-modal--footer
        .prismea-modal--footer--slot
          button.prismea-button.-link.
            Button
            
        .prismea-modal--footer--slot
          button.prismea-button.
            Button
            

Modal layout wide

<div class="prismea-modal-layout -fixed">
  <div class="prismea-modal-layout--wide--box">
    <div class="prismea-modal">
      <div class="prismea-modal--header">
        <div class="prismea-modal--header--slot">
          <h1 class="prismea-title-2">Modal title</h1>
        </div>
        <div class="prismea-modal--header--slot -close"><i class="prismea-glyph-12_cross"></i></div>
      </div>
      <hr class="prismea-line"/>
      <div class="prismea-modal--body">
        <div class="prismea-vertical-spacing-30">
          <div class="prismea-vertical-spacing-30--slot">
            <p class="prismea-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Nam ornare nunc dui, facilisis pretium nisl mattis ac. Integer vel ipsum lectus.
Pellentesque orci est, elementum eget sem sit amet, accumsan interdum orci.
Sed egestas mauris sit amet magna mollis, vitae vehicula nunc sollicitudin.
Suspendisse congue erat arcu. Fusce sed massa sit amet purus suscipit euismod eget et lectus.
Nunc in maximus tellus.

            </p>
          </div>
          <div class="prismea-vertical-spacing-30--slot">
            <div class="prismea-field">
              <div class="prismea-field--slot">
                <label class="prismea-label">Label</label>
              </div>
              <div class="prismea-field--slot">
                <input class="prismea-input-text  " type="text" placeholder="Mighty text"/>
              </div>
            </div>
          </div>
          <div class="prismea-vertical-spacing-30--slot">
            <div class="prismea-field">
              <div class="prismea-field--slot">
                <label class="prismea-label">Label</label>
              </div>
              <div class="prismea-field--slot">
                <textarea class="prismea-textarea" placeholder="Textarea" rows="4"></textarea>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="prismea-modal--footer">
        <div class="prismea-modal--footer--slot">
          <button class="prismea-button -link ">Button
          </button>
        </div>
        <div class="prismea-modal--footer--slot">
          <button class="prismea-button">Button
          </button>
        </div>
      </div>
    </div>
  </div>
</div>
.prismea-modal-layout.-fixed
  .prismea-modal-layout--wide--box
    .prismea-modal
      .prismea-modal--header
        .prismea-modal--header--slot
          h1.prismea-title-2 Modal title
        .prismea-modal--header--slot.-close
          i.prismea-glyph-12_cross
      hr.prismea-line
      .prismea-modal--body
        .prismea-vertical-spacing-30
          .prismea-vertical-spacing-30--slot
            p.prismea-text.
              Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam ornare nunc dui, facilisis pretium nisl mattis ac. Integer vel ipsum lectus. Pellentesque orci est, elementum eget sem sit amet, accumsan interdum orci. Sed egestas mauris sit amet magna mollis, vitae vehicula nunc sollicitudin. Suspendisse congue erat arcu. Fusce sed massa sit amet purus suscipit euismod eget et lectus. Nunc in maximus tellus.
              
          .prismea-vertical-spacing-30--slot
            .prismea-field
              .prismea-field--slot
                label.prismea-label Label
              .prismea-field--slot
                input.prismea-input-text(type='text', placeholder='Mighty text')
          .prismea-vertical-spacing-30--slot
            .prismea-field
              .prismea-field--slot
                label.prismea-label Label
              .prismea-field--slot
                textarea.prismea-textarea(placeholder='Textarea', rows='4')
      .prismea-modal--footer
        .prismea-modal--footer--slot
          button.prismea-button.-link.
            Button
            
        .prismea-modal--footer--slot
          button.prismea-button.
            Button
            

Notification area

<div class="prismea-notification-area">
  <div class="prismea-toasts">
    <div class="prismea-toasts--slot">
      <div class="prismea-toast -error">
        <div class="prismea-toast--header">
          <div class="prismea-toast--header--title">First</div>
          <div class="prismea-toast--header--close"><i class="prismea-glyph-12_cross"></i></div>
        </div>
        <div class="prismea-toast--content">A content inside the toast.</div>
      </div>
    </div>
    <div class="prismea-toasts--slot">
      <div class="prismea-toast -error">
        <div class="prismea-toast--header">
          <div class="prismea-toast--header--title">Second</div>
          <div class="prismea-toast--header--close"><i class="prismea-glyph-12_cross"></i></div>
        </div>
        <div class="prismea-toast--content">A content inside the toast.</div>
      </div>
    </div>
    <div class="prismea-toasts--slot">
      <div class="prismea-toast -error">
        <div class="prismea-toast--header">
          <div class="prismea-toast--header--title">Third</div>
          <div class="prismea-toast--header--close"><i class="prismea-glyph-12_cross"></i></div>
        </div>
        <div class="prismea-toast--content">A content inside the toast.</div>
      </div>
    </div>
  </div>
</div>
.prismea-notification-area
  .prismea-toasts
    .prismea-toasts--slot
      .prismea-toast.-error
        .prismea-toast--header
          .prismea-toast--header--title First
          .prismea-toast--header--close
            i.prismea-glyph-12_cross
        .prismea-toast--content A content inside the toast.
    .prismea-toasts--slot
      .prismea-toast.-error
        .prismea-toast--header
          .prismea-toast--header--title Second
          .prismea-toast--header--close
            i.prismea-glyph-12_cross
        .prismea-toast--content A content inside the toast.
    .prismea-toasts--slot
      .prismea-toast.-error
        .prismea-toast--header
          .prismea-toast--header--title Third
          .prismea-toast--header--close
            i.prismea-glyph-12_cross
        .prismea-toast--content A content inside the toast.