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

Auth layout

<div class="prismea-auth-layout -absolute">
  <div class="prismea-auth-layout--welcome">
    <div class="prismea-vertical-spacing-15">
      <div class="prismea-vertical-spacing-15--slot">
        <p class="prismea-text -text-xl">Welcome Kristin.</p>
      </div>
      <div class="prismea-vertical-spacing-15--slot">
        <svg class="prismea-loader" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 23 30">
          <path fill="none" stroke="#000" stroke-width="2.5" d="M10.1 23.8c6.2.1 11.6-5.1 11.6-11.3s-5-11.2-11.2-11.2H1.3V30"></path>
          <path fill="none" stroke="#000" stroke-width="2.5" d="M8.9 30V16.3h1.3c2.1 0 3.9-1.6 3.9-3.7s-1.7-3.8-3.8-3.8H2.5"></path>
        </svg>
      </div>
    </div>
  </div>
  <div class="prismea-auth-layout--box">
    <div class="prismea-auth--box">
      <div class="prismea-vertical-spacing-20">
        <div class="prismea-vertical-spacing-30--slot -center"><i class="prismea-icon prismea-glyph-100-logo-plus"></i>
        </div>
        <div class="prismea-vertical-spacing-30--slot -center">
          <h1 class="prismea-title-2">Bienvenue chez Prismea</h1>
        </div>
        <div class="prismea-vertical-spacing-10--slot">
          <div class="prismea-toast -warn">
            <div class="prismea-toast--header"><i class="prismea-toast--header--icon prismea-glyph-12_info"></i>
              <div class="prismea-toast--header--title">Warning</div>
              <div class="prismea-toast--header--close"><i class="prismea-glyph-12_cross"></i></div>
            </div>
            <div class="prismea-toast--content">This application is still under development</div>
          </div>
        </div>
        <div class="prismea-vertical-spacing-20--slot">
          <div class="prismea-toast -error">
            <div class="prismea-toast--header"><i class="prismea-toast--header--icon prismea-glyph-12_info"></i>
              <div class="prismea-toast--header--title">Error</div>
              <div class="prismea-toast--header--close"><i class="prismea-glyph-12_cross"></i></div>
            </div>
            <div class="prismea-toast--content">There was a fatal error</div>
          </div>
        </div>
        <div class="prismea-vertical-spacing-5--slot">
          <div class="prismea-input   ">
            <div class="prismea-input--container"><span class="prismea-input--placeholder">Username</span>
              <input type="text" value=""/><i class="prismea-input--icon-suffix prismea-glyph-16_period"></i>
            </div>
            <div class="prismea-input--error"><span>Something bad happened</span></div>
          </div>
        </div>
        <div class="prismea-vertical-spacing-5--slot">
          <div class="prismea-input   ">
            <div class="prismea-input--container -typed"><span class="prismea-input--placeholder">Password</span>
              <input type="password" value="Typed input"/>
              <div class="prismea-input--actions">
                <div class="prismea-input--actions-item"><i class="prismea-glyph-12_see"></i>
                </div>
              </div>
            </div>
            <div class="prismea-input--error"><span>Something bad happened</span></div>
          </div>
        </div>
        <div class="prismea-vertical-spacing-10--slot">
          <button class="prismea-button -primary -block">Login
          </button>
        </div>
      </div>
    </div>
    <div class="prismea-auth--picture">
      <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 1920 1080" preserveAspectRatio="xMinYMin slice">
        <path fill="#EFFFFD" d="M746.563 581.782c-37.828-37.829-98.726-38.527-137.405-2.095-1.206 1.136-1.208 3.044-.037 4.216l135.321 135.32c1.171 1.172 3.079 1.17 4.215-.036 36.432-38.68 35.734-99.577-2.094-137.405zM150.19 557.095c-19.775-19.775-51.41-20.462-72.009-2.062-1.236 1.104-1.231 3.012-.06 4.183l69.947 69.947c1.172 1.172 3.079 1.176 4.183-.06 18.401-20.599 17.713-52.233-2.061-72.008zM641.781 785.563c37.829 37.828 98.726 38.526 137.406 2.095 1.206-1.136 1.208-3.045.036-4.216l-135.32-135.321c-1.172-1.171-3.08-1.169-4.216.037-36.432 38.68-35.734 99.577 2.094 137.405zM52.084 607c1.5 26.584 22.792 47.877 49.376 49.376 1.654.093 3-1.259 3-2.916V607c0-1.657-1.343-3-3-3H55c-1.657 0-3.009 1.346-2.916 3z"></path>
        <path stroke="#fff" stroke-linecap="round" stroke-width="5" d="M967 777c55.78-55.781 55.78-146.219 0-202-55.781-55.781-146.219-55.781-202 0M161.719 640.999c23.041 23.041 23.041 60.398 0 83.439M190.189 409.001c33.661 19.434 45.194 62.476 25.76 96.137M89.476 1004c0-34.472-27.945-62.417-62.416-62.417M142.976 1004c0-14.774-11.976-26.75-26.75-26.75-14.773 0-26.75 11.976-26.75 26.75M142.976 1004c0-49.949 40.492-90.44 90.441-90.44"></path>
        <circle cx="262.077" cy="912.923" r="15.923" fill="#EFFFFD" transform="rotate(-180 262.077 912.923)"></circle>
        <circle cx="236.532" cy="667.735" r="23.538" fill="#EFFFFD" transform="rotate(-23.31 236.532 667.735)"></circle>
        <path fill="#EFFFFD" fill-rule="evenodd" d="M312.5 818c37.832 0 68.5-30.668 68.5-68.5S350.332 681 312.5 681 244 711.668 244 749.5s30.668 68.5 68.5 68.5zm0-38.249c16.707 0 30.251-13.544 30.251-30.251s-13.544-30.251-30.251-30.251-30.251 13.544-30.251 30.251 13.544 30.251 30.251 30.251z" clip-rule="evenodd"></path>
        <path stroke="#fff" stroke-linecap="round" stroke-width="5" d="M305.941 754.907L320 743.137M318.856 756.051l-11.77-14.059M408 350.915l14.059-11.77M420.915 352.059L409.144 338M561.735 321.894l18.336.02M570.893 331.071l.02-18.336M135.735 130.894l18.336.02M144.893 140.071l.02-18.336M438.735 617.894l18.336.02M447.893 627.071l.02-18.336M781.018 512.874l11.77 14.059M779.874 525.789l14.058-11.77"></path>
        <path fill="#EFFFFD" fill-rule="evenodd" d="M785.5 51.05c18.624 0 33.903-14.32 35.426-32.551.138-1.651 1.468-2.999 3.125-2.999H863c1.657 0 3.006 1.349 2.945 3.004C864.365 61.571 828.953 96 785.5 96c-43.453 0-78.865-34.429-80.445-77.496-.061-1.655 1.288-3.004 2.945-3.004h38.949c1.657 0 2.987 1.348 3.125 2.999 1.523 18.23 16.802 32.552 35.426 32.552z" clip-rule="evenodd"></path>
        <path stroke="#fff" stroke-linecap="round" stroke-width="5" d="M81.669 499.911L80.18 490.022M28.147 478.894L35.967 472.66M52.093 496.573L55.748 487.265"></path>
        <circle cx="68.965" cy="449.535" r="17.5" fill="#EFFFFD" transform="rotate(36.438 68.965 449.535)"></circle>
        <circle cx="413.527" cy="39.527" r="23" fill="#EFFFFD" transform="rotate(45 413.527 39.527)"></circle>
        <path stroke="#fff" stroke-linecap="round" stroke-width="5" d="M348 102.522L383.355 67.167M742.535 894.781L770.819 866.497"></path>
        <rect width="50" height="50" x="765" y="837.355" fill="#EFFFFD" rx="10" transform="rotate(-45 765 837.355)"></rect>
        <path stroke="#fff" stroke-linecap="round" stroke-width="5" d="M771.232 903.746L778.997 874.768M733.768 866.997L762.746 859.232M329.921 377.229L329.921 337.229"></path>
        <rect width="35.662" height="35.662" x="329.217" y="323.434" fill="#EFFFFD" rx="10" transform="rotate(-135 329.217 323.434)"></rect>
        <path stroke="#fff" stroke-linecap="round" stroke-width="5" d="M354.313 325.121l19.833-19.832c3.905-3.906 3.905-10.237 0-14.143l-19.833-19.832"></path>
        <circle cx="466.5" cy="85.5" r="35.5" fill="#EFFFFD"></circle>
        <circle cx="117.347" cy="375.401" r="55.684" fill="#EFFFFD" transform="rotate(135 117.347 375.401)"></circle>
        <circle cx="132.241" cy="474.241" r="33.405" fill="#EFFFFD" transform="rotate(135 132.241 474.241)"></circle>
        <path stroke="#fff" stroke-linecap="round" stroke-width="5" d="M611 802c0-57.99-47.01-105-105-105s-105 47.01-105 105"></path>
        <rect width="40" height="190.476" x="381" y="818" fill="#EFFFFD" rx="3"></rect>
        <rect width="40" height="257.778" x="451" y="750" fill="#EFFFFD" rx="3"></rect>
        <rect width="40" height="221.587" x="521" y="786" fill="#EFFFFD" rx="3"></rect>
        <rect width="40" height="177.143" x="591" y="831" fill="#EFFFFD" rx="3"></rect>
        <rect width="40" height="213" x="236" y="227.999" fill="#EFFFFD" rx="3" transform="rotate(-180 236 227.999)"></rect>
        <rect width="40" height="87" x="166" y="103" fill="#EFFFFD" rx="3" transform="rotate(-180 166 103)"></rect>
        <rect width="40" height="50" x="306" y="65.999" fill="#EFFFFD" rx="3" transform="rotate(-180 306 65.999)"></rect>
        <rect width="40" height="212" x="96" y="228" fill="#EFFFFD" rx="3" transform="rotate(-180 96 228)"></rect>
        <path stroke="#fff" stroke-linecap="round" stroke-width="5" d="M214 245c-38.108 38.108-99.892 38.108-138 0M178.5 321.421c14.955-12.635 26.151-29.581 31.671-48.921"></path>
        <rect width="25" height="137" x="715" y="357" fill="#EFFFFD" rx="3" transform="rotate(-90 715 357)"></rect>
        <rect width="25" height="25" x="680" y="357" fill="#EFFFFD" rx="12.5" transform="rotate(-90 680 357)"></rect>
        <rect width="25" height="137" x="715" y="408" fill="#EFFFFD" rx="3" transform="rotate(-90 715 408)"></rect>
        <rect width="25" height="25" x="680" y="408" fill="#EFFFFD" rx="12.5" transform="rotate(-90 680 408)"></rect>
        <rect width="25" height="137" x="715" y="459" fill="#EFFFFD" rx="3" transform="rotate(-90 715 459)"></rect>
        <rect width="25" height="25" x="680" y="459" fill="#EFFFFD" rx="12.5" transform="rotate(-90 680 459)"></rect>
        <circle cx="700" cy="520" r="15" fill="#EFFFFD"></circle>
        <path fill="#EFFFFD" d="M647.402 11.5c1.155-2 4.041-2 5.196 0L698.497 91c1.155 2-.288 4.5-2.598 4.5h-91.798c-2.31 0-3.753-2.5-2.598-4.5l45.899-79.5zM48.866 860.5c-.536.928-.536 2.072 0 3l35.268 61.086c.536.928 1.526 1.5 2.598 1.5h70.536c1.072 0 2.062-.572 2.598-1.5l35.268-61.086c.536-.928.536-2.072 0-3l-35.268-61.086c-.536-.928-1.526-1.5-2.598-1.5H86.732c-1.072 0-2.062.572-2.598 1.5L48.866 860.5zM74.866 747.5c-.536.928-.536 2.072 0 3l17.768 30.775c.536.928 1.526 1.5 2.598 1.5h35.536c1.072 0 2.062-.572 2.598-1.5l17.768-30.775c.536-.928.536-2.072 0-3l-17.768-30.775c-.536-.928-1.526-1.5-2.598-1.5H95.232c-1.072 0-2.062.572-2.598 1.5L74.866 747.5z"></path>
        <path stroke="#fff" stroke-linecap="round" stroke-width="5" d="M62.684 753c-32.41 19.333-43.012 61.279-23.68 93.689"></path>
        <path fill="#EFFFFD" d="M644.5 255.866c.928-.536 2.072-.536 3 0l26.445 15.268c.928.536 1.5 1.526 1.5 2.598v30.536c0 1.072-.572 2.062-1.5 2.598L647.5 322.134c-.928.536-2.072.536-3 0l-26.445-15.268c-.928-.536-1.5-1.526-1.5-2.598v-30.536c0-1.072.572-2.062 1.5-2.598l26.445-15.268zM702.24 127.521c.536-.928 1.527-1.5 2.598-1.5h15.893c1.072 0 2.062.572 2.598 1.5l7.946 13.763c.536.928.536 2.072 0 3l-7.946 13.763c-.536.928-1.526 1.5-2.598 1.5h-15.893c-1.071 0-2.062-.572-2.598-1.5l-7.946-13.763c-.536-.928-.536-2.072 0-3l7.946-13.763zM328 912.866c.928-.536 2.072-.536 3 0l25.146 14.518c.928.536 1.5 1.526 1.5 2.598v29.036c0 1.072-.572 2.062-1.5 2.598L331 976.134c-.928.536-2.072.536-3 0l-25.146-14.518c-.928-.536-1.5-1.526-1.5-2.598v-29.036c0-1.072.572-2.062 1.5-2.598L328 912.866z"></path>
        <path stroke="#fff" stroke-linecap="round" stroke-width="5" d="M467 323c0 36.451-29.549 66-66 66M492.331 38C523.444 6.889 573.887 6.889 605 38M653 176.001c70.692 0 128 57.308 128 128M803.51 123c49.987 49.987 49.987 131.032 0 181.019M803.178 122.929c-7.141 26.647-34.531 42.461-61.178 35.32M670.135 508.032c-63.035-36.394-84.632-116.996-48.239-180.031M902 841c-36.451 0-66-29.549-66-66"></path>
        <path fill="#EFFFFD" d="M464.402 218.5c1.155-2 4.042-2 5.196 0l45.9 79.5c1.154 2-.289 4.5-2.598 4.5h-91.799c-2.31 0-3.753-2.5-2.598-4.5l45.899-79.5zM534.598 399.5c-1.155 2-4.041 2-5.196 0L506.019 359c-1.154-2 .289-4.5 2.598-4.5h46.766c2.309 0 3.752 2.5 2.598 4.5l-23.383 40.5zM833.402 670.5c1.155-2 4.042-2 5.196 0l45.9 79.5c1.154 2-.289 4.5-2.598 4.5h-91.799c-2.31 0-3.753-2.5-2.598-4.5l45.899-79.5zM209.902 959.5c1.155-2 4.041-2 5.196 0l23.816 41.25c1.154 2-.289 4.5-2.598 4.5h-47.632c-2.309 0-3.752-2.5-2.598-4.5l23.816-41.25z"></path>
        <path stroke="#fff" stroke-linecap="round" stroke-width="5" d="M226 944c16.569 0 30 13.431 30 30M531.5 520.5L531.5 420.5M567.5 173L577.5 173M625 115.5L625 125.5M596.251 123.204L601.25 131.864M575.204 144.25L583.864 149.25M794.323 662.142L816.109 640.355M795.326 617.565L817.112 639.352"></path>
        <circle cx="623" cy="176" r="15" fill="#EFFFFD"></circle>
        <circle cx="237" cy="289" r="15" fill="#EFFFFD"></circle>
        <path stroke="#fff" stroke-linecap="round" stroke-width="5" d="M606 197.187l-59.582 63.188c-4.822 5.115-13.277 3.788-16.302-2.557l-54.289-113.883c-3.621-7.595-14.433-7.595-18.054 0l-54.289 113.883c-3.025 6.345-11.48 7.672-16.302 2.557l-52.306-55.472c-3.948-4.186-10.604-4.186-14.552 0L258 271"></path>
        <circle cx="466.5" cy="466.5" r="24.5" fill="#EFFFFD"></circle>
        <circle cx="396.5" cy="647.5" r="24.5" fill="#EFFFFD"></circle>
        <path stroke="#fff" stroke-linecap="round" stroke-width="5" d="M448 647.5c0 28.443-23.057 51.5-51.5 51.5"></path>
        <circle cx="536.5" cy="657.5" r="24.5" fill="#EFFFFD"></circle>
        <circle cx="606.5" cy="526.5" r="24.5" fill="#EFFFFD"></circle>
        <path stroke="#fff" stroke-linecap="round" stroke-width="5" d="M408.5 613.5l42-115M478 500.5l41 125M588.5 557L555 628.5"></path>
        <circle r="24.5" fill="#EFFFFD" transform="matrix(-1 0 0 1 818.5 920.5)"></circle>
        <circle r="24.5" fill="#EFFFFD" transform="matrix(-1 0 0 1 748.5 985.5)"></circle>
        <circle r="24.5" fill="#EFFFFD" transform="matrix(-1 0 0 1 678.5 854.5)"></circle>
        <path stroke="#fff" stroke-linecap="round" stroke-width="5" d="M861 955l-16.5-14.5M793.5 943.5l-19 18M696.5 885l33.5 71.5M228.5 422L243.5 422M286 364.5L286 379.5M257.25 372.204L264.75 385.195M236.204 393.25L249.194 400.75"></path>
        <rect width="149" height="93" x="197" y="523" fill="#EFFFFD" rx="10"></rect>
        <path fill="#EFFFFD" d="M254.36 594.272c2.309 0 3.753 2.5 2.598 4.5l-19.075 33.039c-1.155 2-4.042 2-5.196 0l-19.076-33.039c-1.155-2 .289-4.5 2.598-4.5h38.151z"></path>
        <rect width="149" height="93" x="266" y="406" fill="#EFFFFD" rx="10"></rect>
        <path fill="#EFFFFD" d="M395.36 477.272c2.309 0 3.753 2.5 2.598 4.5l-19.075 33.039c-1.155 2-4.042 2-5.196 0l-19.076-33.039c-1.155-2 .289-4.5 2.598-4.5h38.151z"></path>
        <path fill="#EFFFFD" fill-rule="evenodd" d="M293 118c-5.523 0-10 4.477-10 10v35c0 5.523 4.477 10 10 10h18.753c.811 0 1.589.329 2.154.912l11.803 12.177c1.179 1.216 3.13 1.216 4.308 0l11.804-12.177c.565-.583 1.342-.912 2.154-.912H361c5.523 0 10-4.477 10-10v-35c0-5.523-4.477-10-10-10h-68z" clip-rule="evenodd"></path>
        <path stroke="#fff" stroke-linecap="round" stroke-width="5" d="M216.467 699.75c-16.022 32.311-26.383 105.557 60.346 140.053C311.923 853.767 321.5 867 327.5 896M338 847.492L345.071 840.421M863 660.071L870.071 653M297.638 994.384L302.638 985.724M652.5 933.5L662.5 933.5M374.5 567.5L384.5 567.5M308.5 643.5L308.5 653.5M787.5 483.5L787.5 493.5"></path>
      </svg>
    </div>
  </div>
</div>
.prismea-auth-layout.-absolute
  .prismea-auth-layout--welcome
    .prismea-vertical-spacing-15
      .prismea-vertical-spacing-15--slot
        p.prismea-text.-text-xl Welcome Kristin.
      .prismea-vertical-spacing-15--slot
        svg.prismea-loader(xmlns='http://www.w3.org/2000/svg', viewBox='0 0 23 30')
          path(fill='none', stroke='#000', stroke-width='2.5', d='M10.1 23.8c6.2.1 11.6-5.1 11.6-11.3s-5-11.2-11.2-11.2H1.3V30')
          path(fill='none', stroke='#000', stroke-width='2.5', d='M8.9 30V16.3h1.3c2.1 0 3.9-1.6 3.9-3.7s-1.7-3.8-3.8-3.8H2.5')
  .prismea-auth-layout--box
    .prismea-auth--box
      .prismea-vertical-spacing-20
        .prismea-vertical-spacing-30--slot.-center
          i.prismea-icon.prismea-glyph-100-logo-plus
        .prismea-vertical-spacing-30--slot.-center
          h1.prismea-title-2 Bienvenue chez Prismea
        .prismea-vertical-spacing-10--slot
          .prismea-toast.-warn
            .prismea-toast--header
              i.prismea-toast--header--icon.prismea-glyph-12_info
              .prismea-toast--header--title Warning
              .prismea-toast--header--close
                i.prismea-glyph-12_cross
            .prismea-toast--content This application is still under development
        .prismea-vertical-spacing-20--slot
          .prismea-toast.-error
            .prismea-toast--header
              i.prismea-toast--header--icon.prismea-glyph-12_info
              .prismea-toast--header--title Error
              .prismea-toast--header--close
                i.prismea-glyph-12_cross
            .prismea-toast--content There was a fatal error
        .prismea-vertical-spacing-5--slot
          .prismea-input
            .prismea-input--container
              span.prismea-input--placeholder Username
              input(type='text')
              i.prismea-input--icon-suffix.prismea-glyph-16_period
            .prismea-input--error
              span Something bad happened
        .prismea-vertical-spacing-5--slot
          .prismea-input
            .prismea-input--container.-typed
              span.prismea-input--placeholder Password
              input(type='password', value='Typed input')
              .prismea-input--actions
                .prismea-input--actions-item
                  i.prismea-glyph-12_see
            .prismea-input--error
              span Something bad happened
        .prismea-vertical-spacing-10--slot
          button.prismea-button.-primary.-block.
            Login
            
    .prismea-auth--picture
      svg(xmlns='http://www.w3.org/2000/svg', fill='none', viewBox='0 0 1920 1080', preserveAspectRatio='xMinYMin slice')
        path(fill='#EFFFFD', d='M746.563 581.782c-37.828-37.829-98.726-38.527-137.405-2.095-1.206 1.136-1.208 3.044-.037 4.216l135.321 135.32c1.171 1.172 3.079 1.17 4.215-.036 36.432-38.68 35.734-99.577-2.094-137.405zM150.19 557.095c-19.775-19.775-51.41-20.462-72.009-2.062-1.236 1.104-1.231 3.012-.06 4.183l69.947 69.947c1.172 1.172 3.079 1.176 4.183-.06 18.401-20.599 17.713-52.233-2.061-72.008zM641.781 785.563c37.829 37.828 98.726 38.526 137.406 2.095 1.206-1.136 1.208-3.045.036-4.216l-135.32-135.321c-1.172-1.171-3.08-1.169-4.216.037-36.432 38.68-35.734 99.577 2.094 137.405zM52.084 607c1.5 26.584 22.792 47.877 49.376 49.376 1.654.093 3-1.259 3-2.916V607c0-1.657-1.343-3-3-3H55c-1.657 0-3.009 1.346-2.916 3z')
        path(stroke='#fff', stroke-linecap='round', stroke-width='5', d='M967 777c55.78-55.781 55.78-146.219 0-202-55.781-55.781-146.219-55.781-202 0M161.719 640.999c23.041 23.041 23.041 60.398 0 83.439M190.189 409.001c33.661 19.434 45.194 62.476 25.76 96.137M89.476 1004c0-34.472-27.945-62.417-62.416-62.417M142.976 1004c0-14.774-11.976-26.75-26.75-26.75-14.773 0-26.75 11.976-26.75 26.75M142.976 1004c0-49.949 40.492-90.44 90.441-90.44')
        circle(cx='262.077', cy='912.923', r='15.923', fill='#EFFFFD', transform='rotate(-180 262.077 912.923)')
        circle(cx='236.532', cy='667.735', r='23.538', fill='#EFFFFD', transform='rotate(-23.31 236.532 667.735)')
        path(fill='#EFFFFD', fill-rule='evenodd', d='M312.5 818c37.832 0 68.5-30.668 68.5-68.5S350.332 681 312.5 681 244 711.668 244 749.5s30.668 68.5 68.5 68.5zm0-38.249c16.707 0 30.251-13.544 30.251-30.251s-13.544-30.251-30.251-30.251-30.251 13.544-30.251 30.251 13.544 30.251 30.251 30.251z', clip-rule='evenodd')
        path(stroke='#fff', stroke-linecap='round', stroke-width='5', d='M305.941 754.907L320 743.137M318.856 756.051l-11.77-14.059M408 350.915l14.059-11.77M420.915 352.059L409.144 338M561.735 321.894l18.336.02M570.893 331.071l.02-18.336M135.735 130.894l18.336.02M144.893 140.071l.02-18.336M438.735 617.894l18.336.02M447.893 627.071l.02-18.336M781.018 512.874l11.77 14.059M779.874 525.789l14.058-11.77')
        path(fill='#EFFFFD', fill-rule='evenodd', d='M785.5 51.05c18.624 0 33.903-14.32 35.426-32.551.138-1.651 1.468-2.999 3.125-2.999H863c1.657 0 3.006 1.349 2.945 3.004C864.365 61.571 828.953 96 785.5 96c-43.453 0-78.865-34.429-80.445-77.496-.061-1.655 1.288-3.004 2.945-3.004h38.949c1.657 0 2.987 1.348 3.125 2.999 1.523 18.23 16.802 32.552 35.426 32.552z', clip-rule='evenodd')
        path(stroke='#fff', stroke-linecap='round', stroke-width='5', d='M81.669 499.911L80.18 490.022M28.147 478.894L35.967 472.66M52.093 496.573L55.748 487.265')
        circle(cx='68.965', cy='449.535', r='17.5', fill='#EFFFFD', transform='rotate(36.438 68.965 449.535)')
        circle(cx='413.527', cy='39.527', r='23', fill='#EFFFFD', transform='rotate(45 413.527 39.527)')
        path(stroke='#fff', stroke-linecap='round', stroke-width='5', d='M348 102.522L383.355 67.167M742.535 894.781L770.819 866.497')
        rect(width='50', height='50', x='765', y='837.355', fill='#EFFFFD', rx='10', transform='rotate(-45 765 837.355)')
        path(stroke='#fff', stroke-linecap='round', stroke-width='5', d='M771.232 903.746L778.997 874.768M733.768 866.997L762.746 859.232M329.921 377.229L329.921 337.229')
        rect(width='35.662', height='35.662', x='329.217', y='323.434', fill='#EFFFFD', rx='10', transform='rotate(-135 329.217 323.434)')
        path(stroke='#fff', stroke-linecap='round', stroke-width='5', d='M354.313 325.121l19.833-19.832c3.905-3.906 3.905-10.237 0-14.143l-19.833-19.832')
        circle(cx='466.5', cy='85.5', r='35.5', fill='#EFFFFD')
        circle(cx='117.347', cy='375.401', r='55.684', fill='#EFFFFD', transform='rotate(135 117.347 375.401)')
        circle(cx='132.241', cy='474.241', r='33.405', fill='#EFFFFD', transform='rotate(135 132.241 474.241)')
        path(stroke='#fff', stroke-linecap='round', stroke-width='5', d='M611 802c0-57.99-47.01-105-105-105s-105 47.01-105 105')
        rect(width='40', height='190.476', x='381', y='818', fill='#EFFFFD', rx='3')
        rect(width='40', height='257.778', x='451', y='750', fill='#EFFFFD', rx='3')
        rect(width='40', height='221.587', x='521', y='786', fill='#EFFFFD', rx='3')
        rect(width='40', height='177.143', x='591', y='831', fill='#EFFFFD', rx='3')
        rect(width='40', height='213', x='236', y='227.999', fill='#EFFFFD', rx='3', transform='rotate(-180 236 227.999)')
        rect(width='40', height='87', x='166', y='103', fill='#EFFFFD', rx='3', transform='rotate(-180 166 103)')
        rect(width='40', height='50', x='306', y='65.999', fill='#EFFFFD', rx='3', transform='rotate(-180 306 65.999)')
        rect(width='40', height='212', x='96', y='228', fill='#EFFFFD', rx='3', transform='rotate(-180 96 228)')
        path(stroke='#fff', stroke-linecap='round', stroke-width='5', d='M214 245c-38.108 38.108-99.892 38.108-138 0M178.5 321.421c14.955-12.635 26.151-29.581 31.671-48.921')
        rect(width='25', height='137', x='715', y='357', fill='#EFFFFD', rx='3', transform='rotate(-90 715 357)')
        rect(width='25', height='25', x='680', y='357', fill='#EFFFFD', rx='12.5', transform='rotate(-90 680 357)')
        rect(width='25', height='137', x='715', y='408', fill='#EFFFFD', rx='3', transform='rotate(-90 715 408)')
        rect(width='25', height='25', x='680', y='408', fill='#EFFFFD', rx='12.5', transform='rotate(-90 680 408)')
        rect(width='25', height='137', x='715', y='459', fill='#EFFFFD', rx='3', transform='rotate(-90 715 459)')
        rect(width='25', height='25', x='680', y='459', fill='#EFFFFD', rx='12.5', transform='rotate(-90 680 459)')
        circle(cx='700', cy='520', r='15', fill='#EFFFFD')
        path(fill='#EFFFFD', d='M647.402 11.5c1.155-2 4.041-2 5.196 0L698.497 91c1.155 2-.288 4.5-2.598 4.5h-91.798c-2.31 0-3.753-2.5-2.598-4.5l45.899-79.5zM48.866 860.5c-.536.928-.536 2.072 0 3l35.268 61.086c.536.928 1.526 1.5 2.598 1.5h70.536c1.072 0 2.062-.572 2.598-1.5l35.268-61.086c.536-.928.536-2.072 0-3l-35.268-61.086c-.536-.928-1.526-1.5-2.598-1.5H86.732c-1.072 0-2.062.572-2.598 1.5L48.866 860.5zM74.866 747.5c-.536.928-.536 2.072 0 3l17.768 30.775c.536.928 1.526 1.5 2.598 1.5h35.536c1.072 0 2.062-.572 2.598-1.5l17.768-30.775c.536-.928.536-2.072 0-3l-17.768-30.775c-.536-.928-1.526-1.5-2.598-1.5H95.232c-1.072 0-2.062.572-2.598 1.5L74.866 747.5z')
        path(stroke='#fff', stroke-linecap='round', stroke-width='5', d='M62.684 753c-32.41 19.333-43.012 61.279-23.68 93.689')
        path(fill='#EFFFFD', d='M644.5 255.866c.928-.536 2.072-.536 3 0l26.445 15.268c.928.536 1.5 1.526 1.5 2.598v30.536c0 1.072-.572 2.062-1.5 2.598L647.5 322.134c-.928.536-2.072.536-3 0l-26.445-15.268c-.928-.536-1.5-1.526-1.5-2.598v-30.536c0-1.072.572-2.062 1.5-2.598l26.445-15.268zM702.24 127.521c.536-.928 1.527-1.5 2.598-1.5h15.893c1.072 0 2.062.572 2.598 1.5l7.946 13.763c.536.928.536 2.072 0 3l-7.946 13.763c-.536.928-1.526 1.5-2.598 1.5h-15.893c-1.071 0-2.062-.572-2.598-1.5l-7.946-13.763c-.536-.928-.536-2.072 0-3l7.946-13.763zM328 912.866c.928-.536 2.072-.536 3 0l25.146 14.518c.928.536 1.5 1.526 1.5 2.598v29.036c0 1.072-.572 2.062-1.5 2.598L331 976.134c-.928.536-2.072.536-3 0l-25.146-14.518c-.928-.536-1.5-1.526-1.5-2.598v-29.036c0-1.072.572-2.062 1.5-2.598L328 912.866z')
        path(stroke='#fff', stroke-linecap='round', stroke-width='5', d='M467 323c0 36.451-29.549 66-66 66M492.331 38C523.444 6.889 573.887 6.889 605 38M653 176.001c70.692 0 128 57.308 128 128M803.51 123c49.987 49.987 49.987 131.032 0 181.019M803.178 122.929c-7.141 26.647-34.531 42.461-61.178 35.32M670.135 508.032c-63.035-36.394-84.632-116.996-48.239-180.031M902 841c-36.451 0-66-29.549-66-66')
        path(fill='#EFFFFD', d='M464.402 218.5c1.155-2 4.042-2 5.196 0l45.9 79.5c1.154 2-.289 4.5-2.598 4.5h-91.799c-2.31 0-3.753-2.5-2.598-4.5l45.899-79.5zM534.598 399.5c-1.155 2-4.041 2-5.196 0L506.019 359c-1.154-2 .289-4.5 2.598-4.5h46.766c2.309 0 3.752 2.5 2.598 4.5l-23.383 40.5zM833.402 670.5c1.155-2 4.042-2 5.196 0l45.9 79.5c1.154 2-.289 4.5-2.598 4.5h-91.799c-2.31 0-3.753-2.5-2.598-4.5l45.899-79.5zM209.902 959.5c1.155-2 4.041-2 5.196 0l23.816 41.25c1.154 2-.289 4.5-2.598 4.5h-47.632c-2.309 0-3.752-2.5-2.598-4.5l23.816-41.25z')
        path(stroke='#fff', stroke-linecap='round', stroke-width='5', d='M226 944c16.569 0 30 13.431 30 30M531.5 520.5L531.5 420.5M567.5 173L577.5 173M625 115.5L625 125.5M596.251 123.204L601.25 131.864M575.204 144.25L583.864 149.25M794.323 662.142L816.109 640.355M795.326 617.565L817.112 639.352')
        circle(cx='623', cy='176', r='15', fill='#EFFFFD')
        circle(cx='237', cy='289', r='15', fill='#EFFFFD')
        path(stroke='#fff', stroke-linecap='round', stroke-width='5', d='M606 197.187l-59.582 63.188c-4.822 5.115-13.277 3.788-16.302-2.557l-54.289-113.883c-3.621-7.595-14.433-7.595-18.054 0l-54.289 113.883c-3.025 6.345-11.48 7.672-16.302 2.557l-52.306-55.472c-3.948-4.186-10.604-4.186-14.552 0L258 271')
        circle(cx='466.5', cy='466.5', r='24.5', fill='#EFFFFD')
        circle(cx='396.5', cy='647.5', r='24.5', fill='#EFFFFD')
        path(stroke='#fff', stroke-linecap='round', stroke-width='5', d='M448 647.5c0 28.443-23.057 51.5-51.5 51.5')
        circle(cx='536.5', cy='657.5', r='24.5', fill='#EFFFFD')
        circle(cx='606.5', cy='526.5', r='24.5', fill='#EFFFFD')
        path(stroke='#fff', stroke-linecap='round', stroke-width='5', d='M408.5 613.5l42-115M478 500.5l41 125M588.5 557L555 628.5')
        circle(r='24.5', fill='#EFFFFD', transform='matrix(-1 0 0 1 818.5 920.5)')
        circle(r='24.5', fill='#EFFFFD', transform='matrix(-1 0 0 1 748.5 985.5)')
        circle(r='24.5', fill='#EFFFFD', transform='matrix(-1 0 0 1 678.5 854.5)')
        path(stroke='#fff', stroke-linecap='round', stroke-width='5', d='M861 955l-16.5-14.5M793.5 943.5l-19 18M696.5 885l33.5 71.5M228.5 422L243.5 422M286 364.5L286 379.5M257.25 372.204L264.75 385.195M236.204 393.25L249.194 400.75')
        rect(width='149', height='93', x='197', y='523', fill='#EFFFFD', rx='10')
        path(fill='#EFFFFD', d='M254.36 594.272c2.309 0 3.753 2.5 2.598 4.5l-19.075 33.039c-1.155 2-4.042 2-5.196 0l-19.076-33.039c-1.155-2 .289-4.5 2.598-4.5h38.151z')
        rect(width='149', height='93', x='266', y='406', fill='#EFFFFD', rx='10')
        path(fill='#EFFFFD', d='M395.36 477.272c2.309 0 3.753 2.5 2.598 4.5l-19.075 33.039c-1.155 2-4.042 2-5.196 0l-19.076-33.039c-1.155-2 .289-4.5 2.598-4.5h38.151z')
        path(fill='#EFFFFD', fill-rule='evenodd', d='M293 118c-5.523 0-10 4.477-10 10v35c0 5.523 4.477 10 10 10h18.753c.811 0 1.589.329 2.154.912l11.803 12.177c1.179 1.216 3.13 1.216 4.308 0l11.804-12.177c.565-.583 1.342-.912 2.154-.912H361c5.523 0 10-4.477 10-10v-35c0-5.523-4.477-10-10-10h-68z', clip-rule='evenodd')
        path(stroke='#fff', stroke-linecap='round', stroke-width='5', d='M216.467 699.75c-16.022 32.311-26.383 105.557 60.346 140.053C311.923 853.767 321.5 867 327.5 896M338 847.492L345.071 840.421M863 660.071L870.071 653M297.638 994.384L302.638 985.724M652.5 933.5L662.5 933.5M374.5 567.5L384.5 567.5M308.5 643.5L308.5 653.5M787.5 483.5L787.5 493.5')

Web app

Webapp classic

<div class="prismea-webapp">
  <div class="prismea-webapp-dashboard">
    <div class="prismea-webapp-sidebar-main">
      <div class="prismea-webapp--header">
        <div class="prismea-navigation-title">
          <div class="prismea-navigation-title-logo"><i class="prismea-glyph-50-logo prismea-icon"></i></div>
          <div class="prismea-navigation-title-content">
            <div class="prismea-navigation-title-content--text">James Gordon</div>
            <div class="prismea-navigation-title-content--subtext">CyberLife Co.</div>
          </div>
        </div>
      </div>
      <hr class="prismea-line -light"/>
      <div class="prismea-webapp--navigation">
        <div class="prismea-vertical-spacing-10">
          <div class="prismea-vertical-spacing-10--slot">
            <div class="prismea-list-item ion--hoverable -primary">
              <div class="prismea-horizontal-spacing-10 -middle">
                <div class="prismea-horizontal-spacing-10--slot"><i class="prismea-icon prismea-glyph-24_dashboard"></i></div>
                <div class="prismea-horizontal-spacing-10--slot prismea-vertical-spacing-5 -flex"><span class="prismea-menu-label">Menu item</span><span class="prismea-menu-label -min prismea-color -color-primary prismea-numeral">+ 49 304,50 €</span>
                </div>
              </div>
            </div>
          </div>
          <div class="prismea-vertical-spacing-10--slot">
            <div class="prismea-list-item -selected ion--hoverable -primary">
              <div class="prismea-horizontal-spacing-10 -middle">
                <div class="prismea-horizontal-spacing-10--slot"><i class="prismea-icon prismea-glyph-24_dashboard"></i></div>
                <div class="prismea-horizontal-spacing-10--slot prismea-vertical-spacing-5 -flex"><span class="prismea-menu-label">Menu item</span>
                </div>
              </div>
            </div>
          </div>
          <div class="prismea-vertical-spacing-10--slot">
            <div class="prismea-list-item ion--hoverable -primary">
              <div class="prismea-horizontal-spacing-10 -middle">
                <div class="prismea-horizontal-spacing-10--slot"><i class="prismea-icon prismea-glyph-24_dashboard"></i></div>
                <div class="prismea-horizontal-spacing-10--slot prismea-vertical-spacing-5 -flex"><span class="prismea-menu-label">Menu item</span>
                </div>
              </div>
            </div>
          </div>
          <div class="prismea-vertical-spacing-10--slot">
            <div class="prismea-list-item ion--hoverable -primary">
              <div class="prismea-horizontal-spacing-10 -middle">
                <div class="prismea-horizontal-spacing-10--slot"><i class="prismea-icon prismea-glyph-24_dashboard"></i></div>
                <div class="prismea-horizontal-spacing-10--slot prismea-vertical-spacing-5 -flex"><span class="prismea-menu-label">Menu item</span>
                </div>
              </div>
            </div>
          </div>
          <div class="prismea-vertical-spacing-10--slot">
            <div class="prismea-list-item -disabled ion--hoverable -primary">
              <div class="prismea-horizontal-spacing-10 -middle">
                <div class="prismea-horizontal-spacing-10--slot"><i class="prismea-icon prismea-glyph-24_dashboard"></i></div>
                <div class="prismea-horizontal-spacing-10--slot prismea-vertical-spacing-5 -flex"><span class="prismea-menu-label">Menu item</span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <hr class="prismea-line -light"/>
      <div class="prismea-webapp--footer">
        <div class="prismea-vertical-spacing-10">
          <div class="prismea-vertical-spacing-10--slot">
            <div class="prismea-list-item ion--hoverable -primary">
              <div class="prismea-horizontal-spacing-10 -middle">
                <div class="prismea-horizontal-spacing-10--slot"><i class="prismea-icon prismea-glyph-24_dashboard"></i></div>
                <div class="prismea-horizontal-spacing-10--slot prismea-vertical-spacing-5 -flex"><span class="prismea-menu-label">Menu item</span>
                </div>
              </div>
            </div>
          </div>
          <div class="prismea-vertical-spacing-10--slot">
            <div class="prismea-list-item ion--hoverable -primary">
              <div class="prismea-horizontal-spacing-10 -middle">
                <div class="prismea-horizontal-spacing-10--slot"><i class="prismea-icon prismea-glyph-24_dashboard"></i></div>
                <div class="prismea-horizontal-spacing-10--slot prismea-vertical-spacing-5 -flex"><span class="prismea-menu-label">Menu item</span>
                </div>
              </div>
            </div>
          </div>
          <div class="prismea-vertical-spacing-10--slot">
            <div class="prismea-list-item ion--hoverable -primary">
              <div class="prismea-horizontal-spacing-10 -middle">
                <div class="prismea-horizontal-spacing-10--slot"><i class="prismea-icon prismea-glyph-24_dashboard"></i></div>
                <div class="prismea-horizontal-spacing-10--slot prismea-vertical-spacing-5 -flex"><span class="prismea-menu-label">Menu item</span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="prismea-webapp--body">
      <div class="prismea-webapp-body-container">
        <div class="prismea-webapp-body-container--content">
          <div class="prismea-vertical-spacing-5">
            <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">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>
                  <!-- todo: prismea-webapp-table avec les icones-->
                </div>
                <div class="prismea-vertical-spacing-30--slot">
                            <div class="pagination">
                              <div class="results-count">182 résultats trouvés</div>
                              <div class="navigation">
                                <button class="-button">1</button>
                                <button class="-button"><span style="font-size: 0.7rem;">◀</span></button>
                                <button class="-button -far">2</button>
                                <button class="-button">3</button>
                                <button class="-button -active">4</button>
                                <button class="-button">5</button>
                                <button class="-button -far">6</button>
                                <button class="-button"><span style="font-size: 0.7rem;">▶</span></button>
                                <button class="-button">11</button>
                              </div>
                              <div class="items-per-page">
                                <div class="text">Résultats par page</div>
                                <div class="options">
                                  <button class="-button -active">15</button>
                                  <button class="-button">30</button>
                                  <button class="-button">100</button>
                                </div>
                              </div>
                            </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
.prismea-webapp
  .prismea-webapp-dashboard
    .prismea-webapp-sidebar-main
      .prismea-webapp--header
        .prismea-navigation-title
          .prismea-navigation-title-logo
            i.prismea-glyph-50-logo.prismea-icon
          .prismea-navigation-title-content
            .prismea-navigation-title-content--text James Gordon
            .prismea-navigation-title-content--subtext CyberLife Co.
      hr.prismea-line.-light
      .prismea-webapp--navigation
        .prismea-vertical-spacing-10
          .prismea-vertical-spacing-10--slot
            .prismea-list-item.ion--hoverable.-primary
              .prismea-horizontal-spacing-10.-middle
                .prismea-horizontal-spacing-10--slot
                  i.prismea-icon.prismea-glyph-24_dashboard
                .prismea-horizontal-spacing-10--slot.prismea-vertical-spacing-5.-flex
                  span.prismea-menu-label Menu item
                  span.prismea-menu-label.-min.prismea-color.-color-primary.prismea-numeral + 49 304,50 €
          .prismea-vertical-spacing-10--slot
            .prismea-list-item.-selected.ion--hoverable.-primary
              .prismea-horizontal-spacing-10.-middle
                .prismea-horizontal-spacing-10--slot
                  i.prismea-icon.prismea-glyph-24_dashboard
                .prismea-horizontal-spacing-10--slot.prismea-vertical-spacing-5.-flex
                  span.prismea-menu-label Menu item
          .prismea-vertical-spacing-10--slot
            .prismea-list-item.ion--hoverable.-primary
              .prismea-horizontal-spacing-10.-middle
                .prismea-horizontal-spacing-10--slot
                  i.prismea-icon.prismea-glyph-24_dashboard
                .prismea-horizontal-spacing-10--slot.prismea-vertical-spacing-5.-flex
                  span.prismea-menu-label Menu item
          .prismea-vertical-spacing-10--slot
            .prismea-list-item.ion--hoverable.-primary
              .prismea-horizontal-spacing-10.-middle
                .prismea-horizontal-spacing-10--slot
                  i.prismea-icon.prismea-glyph-24_dashboard
                .prismea-horizontal-spacing-10--slot.prismea-vertical-spacing-5.-flex
                  span.prismea-menu-label Menu item
          .prismea-vertical-spacing-10--slot
            .prismea-list-item.-disabled.ion--hoverable.-primary
              .prismea-horizontal-spacing-10.-middle
                .prismea-horizontal-spacing-10--slot
                  i.prismea-icon.prismea-glyph-24_dashboard
                .prismea-horizontal-spacing-10--slot.prismea-vertical-spacing-5.-flex
                  span.prismea-menu-label Menu item
      hr.prismea-line.-light
      .prismea-webapp--footer
        .prismea-vertical-spacing-10
          .prismea-vertical-spacing-10--slot
            .prismea-list-item.ion--hoverable.-primary
              .prismea-horizontal-spacing-10.-middle
                .prismea-horizontal-spacing-10--slot
                  i.prismea-icon.prismea-glyph-24_dashboard
                .prismea-horizontal-spacing-10--slot.prismea-vertical-spacing-5.-flex
                  span.prismea-menu-label Menu item
          .prismea-vertical-spacing-10--slot
            .prismea-list-item.ion--hoverable.-primary
              .prismea-horizontal-spacing-10.-middle
                .prismea-horizontal-spacing-10--slot
                  i.prismea-icon.prismea-glyph-24_dashboard
                .prismea-horizontal-spacing-10--slot.prismea-vertical-spacing-5.-flex
                  span.prismea-menu-label Menu item
          .prismea-vertical-spacing-10--slot
            .prismea-list-item.ion--hoverable.-primary
              .prismea-horizontal-spacing-10.-middle
                .prismea-horizontal-spacing-10--slot
                  i.prismea-icon.prismea-glyph-24_dashboard
                .prismea-horizontal-spacing-10--slot.prismea-vertical-spacing-5.-flex
                  span.prismea-menu-label Menu item
    .prismea-webapp--body
      .prismea-webapp-body-container
        .prismea-webapp-body-container--content
          .prismea-vertical-spacing-5
            .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 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
                  //  todo: prismea-webapp-table avec les icones
                .prismea-vertical-spacing-30--slot
                  .pagination
                    .results-count 182 résultats trouvés
                    .navigation
                      button.-button 1
                      button.-button
                        span(style='font-size: 0.7rem;') ◀
                      button.-button.-far 2
                      button.-button 3
                      button.-button.-active 4
                      button.-button 5
                      button.-button.-far 6
                      button.-button
                        span(style='font-size: 0.7rem;') ▶
                      button.-button 11
                    .items-per-page
                      .text Résultats par page
                      .options
                        button.-button.-active 15
                        button.-button 30
                        button.-button 100

Webapp with sidebar

<div class="prismea-webapp">
  <div class="prismea-webapp-dashboard">
    <div class="prismea-webapp-sidebar-main">
      <div class="prismea-webapp--header">
        <div class="prismea-navigation-title">
          <div class="prismea-navigation-title-logo"><i class="prismea-glyph-50-logo prismea-icon"></i></div>
          <div class="prismea-navigation-title-content">
            <div class="prismea-navigation-title-content--text">James Gordon</div>
            <div class="prismea-navigation-title-content--subtext">CyberLife Co.</div>
          </div>
        </div>
      </div>
      <hr class="prismea-line -light"/>
      <div class="prismea-webapp--navigation">
        <div class="prismea-vertical-spacing-10">
          <div class="prismea-vertical-spacing-10--slot">
            <div class="prismea-list-item ion--hoverable -primary">
              <div class="prismea-horizontal-spacing-10 -middle">
                <div class="prismea-horizontal-spacing-10--slot"><i class="prismea-icon prismea-glyph-24_dashboard"></i></div>
                <div class="prismea-horizontal-spacing-10--slot prismea-vertical-spacing-5 -flex"><span class="prismea-menu-label">Menu item</span><span class="prismea-menu-label -min prismea-color -color-primary prismea-numeral">+ 49 304,50 €</span>
                </div>
              </div>
            </div>
          </div>
          <div class="prismea-vertical-spacing-10--slot">
            <div class="prismea-list-item -selected ion--hoverable -primary">
              <div class="prismea-horizontal-spacing-10 -middle">
                <div class="prismea-horizontal-spacing-10--slot"><i class="prismea-icon prismea-glyph-24_dashboard"></i></div>
                <div class="prismea-horizontal-spacing-10--slot prismea-vertical-spacing-5 -flex"><span class="prismea-menu-label">Menu item</span>
                </div>
              </div>
            </div>
          </div>
          <div class="prismea-vertical-spacing-10--slot">
            <div class="prismea-list-item ion--hoverable -primary">
              <div class="prismea-horizontal-spacing-10 -middle">
                <div class="prismea-horizontal-spacing-10--slot"><i class="prismea-icon prismea-glyph-24_dashboard"></i></div>
                <div class="prismea-horizontal-spacing-10--slot prismea-vertical-spacing-5 -flex"><span class="prismea-menu-label">Menu item</span>
                </div>
              </div>
            </div>
          </div>
          <div class="prismea-vertical-spacing-10--slot">
            <div class="prismea-list-item ion--hoverable -primary">
              <div class="prismea-horizontal-spacing-10 -middle">
                <div class="prismea-horizontal-spacing-10--slot"><i class="prismea-icon prismea-glyph-24_dashboard"></i></div>
                <div class="prismea-horizontal-spacing-10--slot prismea-vertical-spacing-5 -flex"><span class="prismea-menu-label">Menu item</span>
                </div>
              </div>
            </div>
          </div>
          <div class="prismea-vertical-spacing-10--slot">
            <div class="prismea-list-item -disabled ion--hoverable -primary">
              <div class="prismea-horizontal-spacing-10 -middle">
                <div class="prismea-horizontal-spacing-10--slot"><i class="prismea-icon prismea-glyph-24_dashboard"></i></div>
                <div class="prismea-horizontal-spacing-10--slot prismea-vertical-spacing-5 -flex"><span class="prismea-menu-label">Menu item</span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <hr class="prismea-line -light"/>
      <div class="prismea-webapp--footer">
        <div class="prismea-vertical-spacing-10">
          <div class="prismea-vertical-spacing-10--slot">
            <div class="prismea-list-item ion--hoverable -primary">
              <div class="prismea-horizontal-spacing-10 -middle">
                <div class="prismea-horizontal-spacing-10--slot"><i class="prismea-icon prismea-glyph-24_dashboard"></i></div>
                <div class="prismea-horizontal-spacing-10--slot prismea-vertical-spacing-5 -flex"><span class="prismea-menu-label">Menu item</span>
                </div>
              </div>
            </div>
          </div>
          <div class="prismea-vertical-spacing-10--slot">
            <div class="prismea-list-item ion--hoverable -primary">
              <div class="prismea-horizontal-spacing-10 -middle">
                <div class="prismea-horizontal-spacing-10--slot"><i class="prismea-icon prismea-glyph-24_dashboard"></i></div>
                <div class="prismea-horizontal-spacing-10--slot prismea-vertical-spacing-5 -flex"><span class="prismea-menu-label">Menu item</span>
                </div>
              </div>
            </div>
          </div>
          <div class="prismea-vertical-spacing-10--slot">
            <div class="prismea-list-item ion--hoverable -primary">
              <div class="prismea-horizontal-spacing-10 -middle">
                <div class="prismea-horizontal-spacing-10--slot"><i class="prismea-icon prismea-glyph-24_dashboard"></i></div>
                <div class="prismea-horizontal-spacing-10--slot prismea-vertical-spacing-5 -flex"><span class="prismea-menu-label">Menu item</span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="prismea-webapp--body">
            <div class="prismea-webapp-sidebar-details" style="TRANSFORM: translate3d(0,0,0); opacity: 1; pointer-events: all;">
              <div class="prismea-vertical-spacing-30--slot">
                      <div class="prismea-close">
                        <div class="prismea-vertical-spacing-20--slot">
                          <div class="prismea-horizontal-spacing-10 -middle">
                            <div class="prismea-horizontal-spacing-5--slot"><i class="prismea-icon prismea-glyph-16_close"></i></div>
                            <div class="prismea-horizontal-spacing-5--slot">
                              <p class="prismea-text -text-sm">Close</p>
                            </div>
                          </div>
                        </div>
                      </div>
              </div>
              <div class="prismea-vertical-spacing-30--slot">
                      <div class="prismea-vertical-spacing-5 -center">
                        <div class="prismea-vertical-spacing-5--slot">
                          <div class="prismea-horizontal-spacing-5 -justify-middle">
                            <div class="prismea-horizontal-spacing-5--slot"><i class="prismea-icon -x2 -color-light -circle -primary prismea-glyph-24_dashboard"></i>
                            </div>
                          </div>
                        </div>
                        <div class="prismea-vertical-spacing-5--slot">
                                <p class="prismea-text -center -text-xs">Title level 3
                                </p>
                        </div>
                        <div class="prismea-vertical-spacing-5--slot">
                                <h1 class="prismea-sidebar-title -color-primary">Primary</h1>
                        </div>
                        <div class="prismea-vertical-spacing-5--slot">
                                <h1 class="prismea-sidebar-title">Second Title</h1>
                        </div>
                      </div>
              </div>
              <div class="prismea-vertical-spacing-20--slot">
                      <div class="prismea-card" style="margin-bottom:30px;">
                        <div class="prismea-card--body">
                          <div class="prismea-card--slot">
                            <div class="prismea-vertical-spacing-15">
                              <div class="prismea-vertical-spacing-15--slot"><span class="prismea-sidebar-text -min prismea-color -color-grey3">Name</span>
                                <div><span class="prismea-sidebar-text">Boris Vian</span>
                                </div>
                              </div>
                              <div class="prismea-vertical-spacing-15--slot"><span class="prismea-sidebar-text -min prismea-color -color-grey3">Company</span>
                                <div><span class="prismea-sidebar-text">The Strangers</span>
                                </div>
                              </div>
                            </div>
                          </div>
                          <div class="prismea-card--footer -color-negative">
                            <div class="prismea-horizontal-spacing-10 -middle -justify-middle">
                              <div class="prismea-horizontal-spacing-15--slot"><i class="prismea-icon -x1 prismea-glyph-40_delete"></i>
                              </div>
                              <div class="prismea-horizontal-spacing-15--slot">
                                      <p class="prismea-text">Push the red button
                                      </p>
                              </div>
                            </div>
                            <div class="prismea-card--footer-hidden-text">
                              <div class="prismea-vertical-spacing-10 -middle -justify-middle">
                                <div class="prismea-vertical-spacing-15--slot">
                                        <p class="prismea-text">You're about to push the red button, are you sure?
                                        </p>
                                </div>
                                <div class="prismea-vertical-spacing-15--slot">
                                  <div class="prismea-horizontal-spacing-10 -justify-middle">
                                    <div class="prismea-horizontal-spacing-15--slot">
                                            <button class="prismea-button -short  -pill">Yes
                                            </button>
                                    </div>
                                    <div class="prismea-horizontal-spacing-15--slot">
                                            <button class="prismea-button -short  -pill">No
                                            </button>
                                    </div>
                                  </div>
                                </div>
                              </div>
                            </div>
                          </div>
                        </div>
                      </div>
              </div>
              <div class="prismea-vertical-spacing-20--slot">
                      <div class="prismea-card ion--expandable -ion--expanded" style="margin-bottom:30px;">
                        <div class="prismea-card--body">
                          <div class="prismea-card--slot">
                            <div class="prismea-vertical-spacing-15">
                              <div class="prismea-vertical-spacing-15--slot"><span class="prismea-sidebar-text -min prismea-color -color-grey3">Name</span>
                                <div><span class="prismea-sidebar-text">Boris Vian</span>
                                </div>
                              </div>
                              <div class="prismea-vertical-spacing-15--slot"><span class="prismea-sidebar-text -min prismea-color -color-grey3">Company</span>
                                <div><span class="prismea-sidebar-text">The Strangers</span>
                                </div>
                              </div>
                            </div>
                          </div>
                        </div>
                      </div>
              </div>
              <div class="prismea-vertical-spacing-20--slot">
                      <div class="prismea-card ion--expandable" style="margin-bottom:30px;">
                        <div class="prismea-card--body">
                          <div class="prismea-card--slot">
                            <div class="prismea-vertical-spacing-15">
                              <div class="prismea-vertical-spacing-15--slot"><span class="prismea-sidebar-text -min prismea-color -color-grey3">Name</span>
                                <div><span class="prismea-sidebar-text">Boris Vian</span>
                                </div>
                              </div>
                              <div class="prismea-vertical-spacing-15--slot"><span class="prismea-sidebar-text -min prismea-color -color-grey3">Company</span>
                                <div><span class="prismea-sidebar-text">The Strangers</span>
                                </div>
                              </div>
                            </div>
                          </div>
                        </div>
                      </div>
              </div>
            </div>
    </div>
  </div>
</div>
.prismea-webapp
  .prismea-webapp-dashboard
    .prismea-webapp-sidebar-main
      .prismea-webapp--header
        .prismea-navigation-title
          .prismea-navigation-title-logo
            i.prismea-glyph-50-logo.prismea-icon
          .prismea-navigation-title-content
            .prismea-navigation-title-content--text James Gordon
            .prismea-navigation-title-content--subtext CyberLife Co.
      hr.prismea-line.-light
      .prismea-webapp--navigation
        .prismea-vertical-spacing-10
          .prismea-vertical-spacing-10--slot
            .prismea-list-item.ion--hoverable.-primary
              .prismea-horizontal-spacing-10.-middle
                .prismea-horizontal-spacing-10--slot
                  i.prismea-icon.prismea-glyph-24_dashboard
                .prismea-horizontal-spacing-10--slot.prismea-vertical-spacing-5.-flex
                  span.prismea-menu-label Menu item
                  span.prismea-menu-label.-min.prismea-color.-color-primary.prismea-numeral + 49 304,50 €
          .prismea-vertical-spacing-10--slot
            .prismea-list-item.-selected.ion--hoverable.-primary
              .prismea-horizontal-spacing-10.-middle
                .prismea-horizontal-spacing-10--slot
                  i.prismea-icon.prismea-glyph-24_dashboard
                .prismea-horizontal-spacing-10--slot.prismea-vertical-spacing-5.-flex
                  span.prismea-menu-label Menu item
          .prismea-vertical-spacing-10--slot
            .prismea-list-item.ion--hoverable.-primary
              .prismea-horizontal-spacing-10.-middle
                .prismea-horizontal-spacing-10--slot
                  i.prismea-icon.prismea-glyph-24_dashboard
                .prismea-horizontal-spacing-10--slot.prismea-vertical-spacing-5.-flex
                  span.prismea-menu-label Menu item
          .prismea-vertical-spacing-10--slot
            .prismea-list-item.ion--hoverable.-primary
              .prismea-horizontal-spacing-10.-middle
                .prismea-horizontal-spacing-10--slot
                  i.prismea-icon.prismea-glyph-24_dashboard
                .prismea-horizontal-spacing-10--slot.prismea-vertical-spacing-5.-flex
                  span.prismea-menu-label Menu item
          .prismea-vertical-spacing-10--slot
            .prismea-list-item.-disabled.ion--hoverable.-primary
              .prismea-horizontal-spacing-10.-middle
                .prismea-horizontal-spacing-10--slot
                  i.prismea-icon.prismea-glyph-24_dashboard
                .prismea-horizontal-spacing-10--slot.prismea-vertical-spacing-5.-flex
                  span.prismea-menu-label Menu item
      hr.prismea-line.-light
      .prismea-webapp--footer
        .prismea-vertical-spacing-10
          .prismea-vertical-spacing-10--slot
            .prismea-list-item.ion--hoverable.-primary
              .prismea-horizontal-spacing-10.-middle
                .prismea-horizontal-spacing-10--slot
                  i.prismea-icon.prismea-glyph-24_dashboard
                .prismea-horizontal-spacing-10--slot.prismea-vertical-spacing-5.-flex
                  span.prismea-menu-label Menu item
          .prismea-vertical-spacing-10--slot
            .prismea-list-item.ion--hoverable.-primary
              .prismea-horizontal-spacing-10.-middle
                .prismea-horizontal-spacing-10--slot
                  i.prismea-icon.prismea-glyph-24_dashboard
                .prismea-horizontal-spacing-10--slot.prismea-vertical-spacing-5.-flex
                  span.prismea-menu-label Menu item
          .prismea-vertical-spacing-10--slot
            .prismea-list-item.ion--hoverable.-primary
              .prismea-horizontal-spacing-10.-middle
                .prismea-horizontal-spacing-10--slot
                  i.prismea-icon.prismea-glyph-24_dashboard
                .prismea-horizontal-spacing-10--slot.prismea-vertical-spacing-5.-flex
                  span.prismea-menu-label Menu item
    .prismea-webapp--body
      .prismea-webapp-sidebar-details(style='TRANSFORM: translate3d(0,0,0); opacity: 1; pointer-events: all;')
        .prismea-vertical-spacing-30--slot
          .prismea-close
            .prismea-vertical-spacing-20--slot
              .prismea-horizontal-spacing-10.-middle
                .prismea-horizontal-spacing-5--slot
                  i.prismea-icon.prismea-glyph-16_close
                .prismea-horizontal-spacing-5--slot
                  p.prismea-text.-text-sm Close
        .prismea-vertical-spacing-30--slot
          .prismea-vertical-spacing-5.-center
            .prismea-vertical-spacing-5--slot
              .prismea-horizontal-spacing-5.-justify-middle
                .prismea-horizontal-spacing-5--slot
                  i.prismea-icon.-x2.-color-light.-circle.-primary.prismea-glyph-24_dashboard
            .prismea-vertical-spacing-5--slot
              p.prismea-text.-center.-text-xs.
                Title level 3
                
            .prismea-vertical-spacing-5--slot
              h1.prismea-sidebar-title.-color-primary Primary
            .prismea-vertical-spacing-5--slot
              h1.prismea-sidebar-title Second Title
        .prismea-vertical-spacing-20--slot
          .prismea-card(style='margin-bottom:30px;')
            .prismea-card--body
              .prismea-card--slot
                .prismea-vertical-spacing-15
                  .prismea-vertical-spacing-15--slot
                    span.prismea-sidebar-text.-min.prismea-color.-color-grey3 Name
                    div
                      span.prismea-sidebar-text Boris Vian
                  .prismea-vertical-spacing-15--slot
                    span.prismea-sidebar-text.-min.prismea-color.-color-grey3 Company
                    div
                      span.prismea-sidebar-text The Strangers
              .prismea-card--footer.-color-negative
                .prismea-horizontal-spacing-10.-middle.-justify-middle
                  .prismea-horizontal-spacing-15--slot
                    i.prismea-icon.-x1.prismea-glyph-40_delete
                  .prismea-horizontal-spacing-15--slot
                    p.prismea-text.
                      Push the red button
                      
                .prismea-card--footer-hidden-text
                  .prismea-vertical-spacing-10.-middle.-justify-middle
                    .prismea-vertical-spacing-15--slot
                      p.prismea-text.
                        You're about to push the red button, are you sure?
                        
                    .prismea-vertical-spacing-15--slot
                      .prismea-horizontal-spacing-10.-justify-middle
                        .prismea-horizontal-spacing-15--slot
                          button.prismea-button.-short.-pill.
                            Yes
                            
                        .prismea-horizontal-spacing-15--slot
                          button.prismea-button.-short.-pill.
                            No
                            
        .prismea-vertical-spacing-20--slot
          .prismea-card.ion--expandable.-ion--expanded(style='margin-bottom:30px;')
            .prismea-card--body
              .prismea-card--slot
                .prismea-vertical-spacing-15
                  .prismea-vertical-spacing-15--slot
                    span.prismea-sidebar-text.-min.prismea-color.-color-grey3 Name
                    div
                      span.prismea-sidebar-text Boris Vian
                  .prismea-vertical-spacing-15--slot
                    span.prismea-sidebar-text.-min.prismea-color.-color-grey3 Company
                    div
                      span.prismea-sidebar-text The Strangers
        .prismea-vertical-spacing-20--slot
          .prismea-card.ion--expandable(style='margin-bottom:30px;')
            .prismea-card--body
              .prismea-card--slot
                .prismea-vertical-spacing-15
                  .prismea-vertical-spacing-15--slot
                    span.prismea-sidebar-text.-min.prismea-color.-color-grey3 Name
                    div
                      span.prismea-sidebar-text Boris Vian
                  .prismea-vertical-spacing-15--slot
                    span.prismea-sidebar-text.-min.prismea-color.-color-grey3 Company
                    div
                      span.prismea-sidebar-text The Strangers

Webapp with off canvas content

<div class="prismea-webapp">
  <div class="prismea-webapp-dashboard">
    <div class="prismea-webapp-sidebar-main">
      <div class="prismea-webapp--header">
        <div class="prismea-navigation-title">
          <div class="prismea-navigation-title-logo"><i class="prismea-glyph-50-logo prismea-icon"></i></div>
          <div class="prismea-navigation-title-content">
            <div class="prismea-navigation-title-content--text">James Gordon</div>
            <div class="prismea-navigation-title-content--subtext">CyberLife Co.</div>
          </div>
        </div>
      </div>
      <hr class="prismea-line -light"/>
      <div class="prismea-webapp--navigation">
        <div class="prismea-vertical-spacing-10">
          <div class="prismea-vertical-spacing-10--slot">
            <div class="prismea-list-item ion--hoverable -primary">
              <div class="prismea-horizontal-spacing-10 -middle">
                <div class="prismea-horizontal-spacing-10--slot"><i class="prismea-icon prismea-glyph-24_dashboard"></i></div>
                <div class="prismea-horizontal-spacing-10--slot prismea-vertical-spacing-5 -flex"><span class="prismea-menu-label">Menu item</span><span class="prismea-menu-label -min prismea-color -color-primary prismea-numeral">+ 49 304,50 €</span>
                </div>
              </div>
            </div>
          </div>
          <div class="prismea-vertical-spacing-10--slot">
            <div class="prismea-list-item -selected ion--hoverable -primary">
              <div class="prismea-horizontal-spacing-10 -middle">
                <div class="prismea-horizontal-spacing-10--slot"><i class="prismea-icon prismea-glyph-24_dashboard"></i></div>
                <div class="prismea-horizontal-spacing-10--slot prismea-vertical-spacing-5 -flex"><span class="prismea-menu-label">Menu item</span>
                </div>
              </div>
            </div>
          </div>
          <div class="prismea-vertical-spacing-10--slot">
            <div class="prismea-list-item ion--hoverable -primary">
              <div class="prismea-horizontal-spacing-10 -middle">
                <div class="prismea-horizontal-spacing-10--slot"><i class="prismea-icon prismea-glyph-24_dashboard"></i></div>
                <div class="prismea-horizontal-spacing-10--slot prismea-vertical-spacing-5 -flex"><span class="prismea-menu-label">Menu item</span>
                </div>
              </div>
            </div>
          </div>
          <div class="prismea-vertical-spacing-10--slot">
            <div class="prismea-list-item ion--hoverable -primary">
              <div class="prismea-horizontal-spacing-10 -middle">
                <div class="prismea-horizontal-spacing-10--slot"><i class="prismea-icon prismea-glyph-24_dashboard"></i></div>
                <div class="prismea-horizontal-spacing-10--slot prismea-vertical-spacing-5 -flex"><span class="prismea-menu-label">Menu item</span>
                </div>
              </div>
            </div>
          </div>
          <div class="prismea-vertical-spacing-10--slot">
            <div class="prismea-list-item -disabled ion--hoverable -primary">
              <div class="prismea-horizontal-spacing-10 -middle">
                <div class="prismea-horizontal-spacing-10--slot"><i class="prismea-icon prismea-glyph-24_dashboard"></i></div>
                <div class="prismea-horizontal-spacing-10--slot prismea-vertical-spacing-5 -flex"><span class="prismea-menu-label">Menu item</span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <hr class="prismea-line -light"/>
      <div class="prismea-webapp--footer">
        <div class="prismea-vertical-spacing-10">
          <div class="prismea-vertical-spacing-10--slot">
            <div class="prismea-list-item ion--hoverable -primary">
              <div class="prismea-horizontal-spacing-10 -middle">
                <div class="prismea-horizontal-spacing-10--slot"><i class="prismea-icon prismea-glyph-24_dashboard"></i></div>
                <div class="prismea-horizontal-spacing-10--slot prismea-vertical-spacing-5 -flex"><span class="prismea-menu-label">Menu item</span>
                </div>
              </div>
            </div>
          </div>
          <div class="prismea-vertical-spacing-10--slot">
            <div class="prismea-list-item ion--hoverable -primary">
              <div class="prismea-horizontal-spacing-10 -middle">
                <div class="prismea-horizontal-spacing-10--slot"><i class="prismea-icon prismea-glyph-24_dashboard"></i></div>
                <div class="prismea-horizontal-spacing-10--slot prismea-vertical-spacing-5 -flex"><span class="prismea-menu-label">Menu item</span>
                </div>
              </div>
            </div>
          </div>
          <div class="prismea-vertical-spacing-10--slot">
            <div class="prismea-list-item ion--hoverable -primary">
              <div class="prismea-horizontal-spacing-10 -middle">
                <div class="prismea-horizontal-spacing-10--slot"><i class="prismea-icon prismea-glyph-24_dashboard"></i></div>
                <div class="prismea-horizontal-spacing-10--slot prismea-vertical-spacing-5 -flex"><span class="prismea-menu-label">Menu item</span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="prismea-webapp--body">
      <div class="prismea-webapp-body-container -off-canvas-opened">
        <div class="prismea-webapp-body-container--off-canvas-content -primary-lighter" style="height: 500px">
          <div class="prismea-webapp-body-container--off-canvas-content--cancel">
            <div class="prismea-horizontal-spacing-5 -middle">
              <div class="prismea-horizontal-spacing-5--slot">
                <p class="prismea-text -text-bold -uppercase -text-sm">Annuler</p>
              </div>
              <div class="prismea-horizontal-spacing-5--slot"><i class="prismea-glyph-12_cross prismea-icon"></i></div>
            </div>
          </div>
          <div class="prismea-webapp-body-container--off-canvas-content--container">
            <div class="prismea-vertical-spacing-10">
              <div class="prismea-vertical-spacing-30--slot">
                <div class="prismea-horizontal-spacing-10 -middle">
                  <div class="prismea-horizontal-spacing-10--slot"><i class="prismea-glyph-16_add prismea-icon -color-primary"></i></div>
                  <div class="prismea-horizontal-spacing-10--slot -expand">
                    <h2 class="prismea-title-2 prismea-text prismea-color -color-primary">Titre</h2>
                  </div>
                </div>
              </div>
              <div class="prismea-vertical-spacing-10--slot">
                <hr class="prismea-line -primary"/>
              </div>
              <div class="prismea-vertical-spacing-10--slot">
                <div class="prismea-horizontal-spacing-30 -start">
                  <div class="prismea-horizontal-spacing-30--slot -expand">
                    <p class="prismea-text prismea-text--intro prismea-color -color-primary">Zombie ipsum reversus ab viral inferno, nam rick grimes malum cerebro. De carne lumbering animata corpora quaeritis. Summus brains sit​​, morbo vel maleficia? De apocalypsi gorger omero undead survivor dictum mauris.</p>
                  </div>
                  <div class="prismea-horizontal-spacing-30--slot -expand">
                    <div class="prismea-vertical-spacing-10">
                      <div class="prismea-vertical-spacing-10--slot">
                        <p class="prismea-text prismea-color -color-primary">Form</p>
                      </div>
                      <div class="prismea-vertical-spacing-10--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 class="prismea-vertical-spacing-10--slot">
                              <div class="prismea-input   ">
                                <div class="prismea-input--container"><span class="prismea-input--placeholder">Mighty text</span>
                                  <input type="text" value=""/><i class="prismea-input--icon-suffix prismea-glyph-16_period"></i>
                                </div>
                                <div class="prismea-input--error"><span>Something bad happened</span></div>
                              </div>
                      </div>
                      <div class="prismea-vertical-spacing-10--slot">
                              <div class="prismea-input   ">
                                <div class="prismea-input--container"><span class="prismea-input--placeholder">Mighty text</span>
                                  <input type="text" value=""/><i class="prismea-input--icon-suffix prismea-glyph-16_period"></i>
                                </div>
                                <div class="prismea-input--error"><span>Something bad happened</span></div>
                              </div>
                      </div>
                      <div class="prismea-vertical-spacing-10--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 class="prismea-vertical-spacing-10--slot">
                              <button class="prismea-button -primary -short ">Continuer
                              </button>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="prismea-webapp-body-container--content -blur">
          <div class="prismea-vertical-spacing-5">
            <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">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>
                  <!-- todo: prismea-webapp-table avec les icones-->
                </div>
                <div class="prismea-vertical-spacing-30--slot">
                            <div class="pagination">
                              <div class="results-count">182 résultats trouvés</div>
                              <div class="navigation">
                                <button class="-button">1</button>
                                <button class="-button"><span style="font-size: 0.7rem;">◀</span></button>
                                <button class="-button -far">2</button>
                                <button class="-button">3</button>
                                <button class="-button -active">4</button>
                                <button class="-button">5</button>
                                <button class="-button -far">6</button>
                                <button class="-button"><span style="font-size: 0.7rem;">▶</span></button>
                                <button class="-button">11</button>
                              </div>
                              <div class="items-per-page">
                                <div class="text">Résultats par page</div>
                                <div class="options">
                                  <button class="-button -active">15</button>
                                  <button class="-button">30</button>
                                  <button class="-button">100</button>
                                </div>
                              </div>
                            </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
.prismea-webapp
  .prismea-webapp-dashboard
    .prismea-webapp-sidebar-main
      .prismea-webapp--header
        .prismea-navigation-title
          .prismea-navigation-title-logo
            i.prismea-glyph-50-logo.prismea-icon
          .prismea-navigation-title-content
            .prismea-navigation-title-content--text James Gordon
            .prismea-navigation-title-content--subtext CyberLife Co.
      hr.prismea-line.-light
      .prismea-webapp--navigation
        .prismea-vertical-spacing-10
          .prismea-vertical-spacing-10--slot
            .prismea-list-item.ion--hoverable.-primary
              .prismea-horizontal-spacing-10.-middle
                .prismea-horizontal-spacing-10--slot
                  i.prismea-icon.prismea-glyph-24_dashboard
                .prismea-horizontal-spacing-10--slot.prismea-vertical-spacing-5.-flex
                  span.prismea-menu-label Menu item
                  span.prismea-menu-label.-min.prismea-color.-color-primary.prismea-numeral + 49 304,50 €
          .prismea-vertical-spacing-10--slot
            .prismea-list-item.-selected.ion--hoverable.-primary
              .prismea-horizontal-spacing-10.-middle
                .prismea-horizontal-spacing-10--slot
                  i.prismea-icon.prismea-glyph-24_dashboard
                .prismea-horizontal-spacing-10--slot.prismea-vertical-spacing-5.-flex
                  span.prismea-menu-label Menu item
          .prismea-vertical-spacing-10--slot
            .prismea-list-item.ion--hoverable.-primary
              .prismea-horizontal-spacing-10.-middle
                .prismea-horizontal-spacing-10--slot
                  i.prismea-icon.prismea-glyph-24_dashboard
                .prismea-horizontal-spacing-10--slot.prismea-vertical-spacing-5.-flex
                  span.prismea-menu-label Menu item
          .prismea-vertical-spacing-10--slot
            .prismea-list-item.ion--hoverable.-primary
              .prismea-horizontal-spacing-10.-middle
                .prismea-horizontal-spacing-10--slot
                  i.prismea-icon.prismea-glyph-24_dashboard
                .prismea-horizontal-spacing-10--slot.prismea-vertical-spacing-5.-flex
                  span.prismea-menu-label Menu item
          .prismea-vertical-spacing-10--slot
            .prismea-list-item.-disabled.ion--hoverable.-primary
              .prismea-horizontal-spacing-10.-middle
                .prismea-horizontal-spacing-10--slot
                  i.prismea-icon.prismea-glyph-24_dashboard
                .prismea-horizontal-spacing-10--slot.prismea-vertical-spacing-5.-flex
                  span.prismea-menu-label Menu item
      hr.prismea-line.-light
      .prismea-webapp--footer
        .prismea-vertical-spacing-10
          .prismea-vertical-spacing-10--slot
            .prismea-list-item.ion--hoverable.-primary
              .prismea-horizontal-spacing-10.-middle
                .prismea-horizontal-spacing-10--slot
                  i.prismea-icon.prismea-glyph-24_dashboard
                .prismea-horizontal-spacing-10--slot.prismea-vertical-spacing-5.-flex
                  span.prismea-menu-label Menu item
          .prismea-vertical-spacing-10--slot
            .prismea-list-item.ion--hoverable.-primary
              .prismea-horizontal-spacing-10.-middle
                .prismea-horizontal-spacing-10--slot
                  i.prismea-icon.prismea-glyph-24_dashboard
                .prismea-horizontal-spacing-10--slot.prismea-vertical-spacing-5.-flex
                  span.prismea-menu-label Menu item
          .prismea-vertical-spacing-10--slot
            .prismea-list-item.ion--hoverable.-primary
              .prismea-horizontal-spacing-10.-middle
                .prismea-horizontal-spacing-10--slot
                  i.prismea-icon.prismea-glyph-24_dashboard
                .prismea-horizontal-spacing-10--slot.prismea-vertical-spacing-5.-flex
                  span.prismea-menu-label Menu item
    .prismea-webapp--body
      .prismea-webapp-body-container.-off-canvas-opened
        .prismea-webapp-body-container--off-canvas-content.-primary-lighter(style='height: 500px')
          .prismea-webapp-body-container--off-canvas-content--cancel
            .prismea-horizontal-spacing-5.-middle
              .prismea-horizontal-spacing-5--slot
                p.prismea-text.-text-bold.-uppercase.-text-sm Annuler
              .prismea-horizontal-spacing-5--slot
                i.prismea-glyph-12_cross.prismea-icon
          .prismea-webapp-body-container--off-canvas-content--container
            .prismea-vertical-spacing-10
              .prismea-vertical-spacing-30--slot
                .prismea-horizontal-spacing-10.-middle
                  .prismea-horizontal-spacing-10--slot
                    i.prismea-glyph-16_add.prismea-icon.-color-primary
                  .prismea-horizontal-spacing-10--slot.-expand
                    h2.prismea-title-2.prismea-text.prismea-color.-color-primary Titre
              .prismea-vertical-spacing-10--slot
                hr.prismea-line.-primary
              .prismea-vertical-spacing-10--slot
                .prismea-horizontal-spacing-30.-start
                  .prismea-horizontal-spacing-30--slot.-expand
                    p.prismea-text.prismea-text--intro.prismea-color.-color-primary Zombie ipsum reversus ab viral inferno, nam rick grimes malum cerebro. De carne lumbering animata corpora quaeritis. Summus brains sit​​, morbo vel maleficia? De apocalypsi gorger omero undead survivor dictum mauris.
                  .prismea-horizontal-spacing-30--slot.-expand
                    .prismea-vertical-spacing-10
                      .prismea-vertical-spacing-10--slot
                        p.prismea-text.prismea-color.-color-primary Form
                      .prismea-vertical-spacing-10--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-10--slot
                        .prismea-input
                          .prismea-input--container
                            span.prismea-input--placeholder Mighty text
                            input(type='text')
                            i.prismea-input--icon-suffix.prismea-glyph-16_period
                          .prismea-input--error
                            span Something bad happened
                      .prismea-vertical-spacing-10--slot
                        .prismea-input
                          .prismea-input--container
                            span.prismea-input--placeholder Mighty text
                            input(type='text')
                            i.prismea-input--icon-suffix.prismea-glyph-16_period
                          .prismea-input--error
                            span Something bad happened
                      .prismea-vertical-spacing-10--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-10--slot
                        button.prismea-button.-primary.-short.
                          Continuer
                          
        .prismea-webapp-body-container--content.-blur
          .prismea-vertical-spacing-5
            .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 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
                  //  todo: prismea-webapp-table avec les icones
                .prismea-vertical-spacing-30--slot
                  .pagination
                    .results-count 182 résultats trouvés
                    .navigation
                      button.-button 1
                      button.-button
                        span(style='font-size: 0.7rem;') ◀
                      button.-button.-far 2
                      button.-button 3
                      button.-button.-active 4
                      button.-button 5
                      button.-button.-far 6
                      button.-button
                        span(style='font-size: 0.7rem;') ▶
                      button.-button 11
                    .items-per-page
                      .text Résultats par page
                      .options
                        button.-button.-active 15
                        button.-button 30
                        button.-button 100

Webapp with notification

<div class="prismea-webapp">
  <div class="prismea-webapp-dashboard">
    <div class="prismea-webapp-sidebar-main">
      <div class="prismea-webapp--header">
        <div class="prismea-navigation-title">
          <div class="prismea-navigation-title-logo"><i class="prismea-glyph-50-logo prismea-icon"></i></div>
          <div class="prismea-navigation-title-content">
            <div class="prismea-navigation-title-content--text">James Gordon</div>
            <div class="prismea-navigation-title-content--subtext">CyberLife Co.</div>
          </div>
        </div>
      </div>
      <hr class="prismea-line -light"/>
      <div class="prismea-webapp--navigation">
        <div class="prismea-vertical-spacing-10">
          <div class="prismea-vertical-spacing-10--slot">
            <div class="prismea-list-item ion--hoverable -primary">
              <div class="prismea-horizontal-spacing-10 -middle">
                <div class="prismea-horizontal-spacing-10--slot"><i class="prismea-icon prismea-glyph-24_dashboard"></i></div>
                <div class="prismea-horizontal-spacing-10--slot prismea-vertical-spacing-5 -flex"><span class="prismea-menu-label">Menu item</span><span class="prismea-menu-label -min prismea-color -color-primary prismea-numeral">+ 49 304,50 €</span>
                </div>
              </div>
            </div>
          </div>
          <div class="prismea-vertical-spacing-10--slot">
            <div class="prismea-list-item -selected ion--hoverable -primary">
              <div class="prismea-horizontal-spacing-10 -middle">
                <div class="prismea-horizontal-spacing-10--slot"><i class="prismea-icon prismea-glyph-24_dashboard"></i></div>
                <div class="prismea-horizontal-spacing-10--slot prismea-vertical-spacing-5 -flex"><span class="prismea-menu-label">Menu item</span>
                </div>
              </div>
            </div>
          </div>
          <div class="prismea-vertical-spacing-10--slot">
            <div class="prismea-list-item ion--hoverable -primary">
              <div class="prismea-horizontal-spacing-10 -middle">
                <div class="prismea-horizontal-spacing-10--slot"><i class="prismea-icon prismea-glyph-24_dashboard"></i></div>
                <div class="prismea-horizontal-spacing-10--slot prismea-vertical-spacing-5 -flex"><span class="prismea-menu-label">Menu item</span>
                </div>
              </div>
            </div>
          </div>
          <div class="prismea-vertical-spacing-10--slot">
            <div class="prismea-list-item ion--hoverable -primary">
              <div class="prismea-horizontal-spacing-10 -middle">
                <div class="prismea-horizontal-spacing-10--slot"><i class="prismea-icon prismea-glyph-24_dashboard"></i></div>
                <div class="prismea-horizontal-spacing-10--slot prismea-vertical-spacing-5 -flex"><span class="prismea-menu-label">Menu item</span>
                </div>
              </div>
            </div>
          </div>
          <div class="prismea-vertical-spacing-10--slot">
            <div class="prismea-list-item -disabled ion--hoverable -primary">
              <div class="prismea-horizontal-spacing-10 -middle">
                <div class="prismea-horizontal-spacing-10--slot"><i class="prismea-icon prismea-glyph-24_dashboard"></i></div>
                <div class="prismea-horizontal-spacing-10--slot prismea-vertical-spacing-5 -flex"><span class="prismea-menu-label">Menu item</span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <hr class="prismea-line -light"/>
      <div class="prismea-webapp--footer">
        <div class="prismea-vertical-spacing-10">
          <div class="prismea-vertical-spacing-10--slot">
            <div class="prismea-list-item ion--hoverable -primary">
              <div class="prismea-horizontal-spacing-10 -middle">
                <div class="prismea-horizontal-spacing-10--slot"><i class="prismea-icon prismea-glyph-24_dashboard"></i></div>
                <div class="prismea-horizontal-spacing-10--slot prismea-vertical-spacing-5 -flex"><span class="prismea-menu-label">Menu item</span>
                </div>
              </div>
            </div>
          </div>
          <div class="prismea-vertical-spacing-10--slot">
            <div class="prismea-list-item ion--hoverable -primary">
              <div class="prismea-horizontal-spacing-10 -middle">
                <div class="prismea-horizontal-spacing-10--slot"><i class="prismea-icon prismea-glyph-24_dashboard"></i></div>
                <div class="prismea-horizontal-spacing-10--slot prismea-vertical-spacing-5 -flex"><span class="prismea-menu-label">Menu item</span>
                </div>
              </div>
            </div>
          </div>
          <div class="prismea-vertical-spacing-10--slot">
            <div class="prismea-list-item ion--hoverable -primary">
              <div class="prismea-horizontal-spacing-10 -middle">
                <div class="prismea-horizontal-spacing-10--slot"><i class="prismea-icon prismea-glyph-24_dashboard"></i></div>
                <div class="prismea-horizontal-spacing-10--slot prismea-vertical-spacing-5 -flex"><span class="prismea-menu-label">Menu item</span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="prismea-webapp--body">
      <div class="prismea-webapp-body-container">
        <div class="prismea-notification-area">
          <div class="prismea-notifications">
            <div class="prismea-notification--slot">
              <div class="prismea-notification -primary prismea-horizontal-spacing-5 -middle">
                <div class="prismea-notification--overlay -secondary"></div>
                <div class="prismea-horizontal-spacing-5--slot -expand">
                  <p class="prismea-text prismea-color -color-light">This is a notification</p>
                </div>
                <div class="prismea-horizontal-spacing-5--slot"><i class="prismea-icon prismea-glyph-16_close -color-light"></i></div>
              </div>
            </div>
            <div class="prismea-notification--slot">
              <div class="prismea-notification -primary prismea-horizontal-spacing-5 -middle">
                <div class="prismea-notification--overlay -secondary"></div>
                <div class="prismea-horizontal-spacing-5--slot -expand">
                  <p class="prismea-text prismea-color -color-light">This is a notification</p>
                </div>
                <div class="prismea-horizontal-spacing-5--slot"><i class="prismea-icon prismea-glyph-16_close -color-light"></i></div>
              </div>
            </div>
          </div>
        </div>
        <div class="prismea-webapp-body-container--content">
          <div class="prismea-vertical-spacing-5">
            <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">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>
                  <!-- todo: prismea-webapp-table avec les icones-->
                </div>
                <div class="prismea-vertical-spacing-30--slot">
                            <div class="pagination">
                              <div class="results-count">182 résultats trouvés</div>
                              <div class="navigation">
                                <button class="-button">1</button>
                                <button class="-button"><span style="font-size: 0.7rem;">◀</span></button>
                                <button class="-button -far">2</button>
                                <button class="-button">3</button>
                                <button class="-button -active">4</button>
                                <button class="-button">5</button>
                                <button class="-button -far">6</button>
                                <button class="-button"><span style="font-size: 0.7rem;">▶</span></button>
                                <button class="-button">11</button>
                              </div>
                              <div class="items-per-page">
                                <div class="text">Résultats par page</div>
                                <div class="options">
                                  <button class="-button -active">15</button>
                                  <button class="-button">30</button>
                                  <button class="-button">100</button>
                                </div>
                              </div>
                            </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
.prismea-webapp
  .prismea-webapp-dashboard
    .prismea-webapp-sidebar-main
      .prismea-webapp--header
        .prismea-navigation-title
          .prismea-navigation-title-logo
            i.prismea-glyph-50-logo.prismea-icon
          .prismea-navigation-title-content
            .prismea-navigation-title-content--text James Gordon
            .prismea-navigation-title-content--subtext CyberLife Co.
      hr.prismea-line.-light
      .prismea-webapp--navigation
        .prismea-vertical-spacing-10
          .prismea-vertical-spacing-10--slot
            .prismea-list-item.ion--hoverable.-primary
              .prismea-horizontal-spacing-10.-middle
                .prismea-horizontal-spacing-10--slot
                  i.prismea-icon.prismea-glyph-24_dashboard
                .prismea-horizontal-spacing-10--slot.prismea-vertical-spacing-5.-flex
                  span.prismea-menu-label Menu item
                  span.prismea-menu-label.-min.prismea-color.-color-primary.prismea-numeral + 49 304,50 €
          .prismea-vertical-spacing-10--slot
            .prismea-list-item.-selected.ion--hoverable.-primary
              .prismea-horizontal-spacing-10.-middle
                .prismea-horizontal-spacing-10--slot
                  i.prismea-icon.prismea-glyph-24_dashboard
                .prismea-horizontal-spacing-10--slot.prismea-vertical-spacing-5.-flex
                  span.prismea-menu-label Menu item
          .prismea-vertical-spacing-10--slot
            .prismea-list-item.ion--hoverable.-primary
              .prismea-horizontal-spacing-10.-middle
                .prismea-horizontal-spacing-10--slot
                  i.prismea-icon.prismea-glyph-24_dashboard
                .prismea-horizontal-spacing-10--slot.prismea-vertical-spacing-5.-flex
                  span.prismea-menu-label Menu item
          .prismea-vertical-spacing-10--slot
            .prismea-list-item.ion--hoverable.-primary
              .prismea-horizontal-spacing-10.-middle
                .prismea-horizontal-spacing-10--slot
                  i.prismea-icon.prismea-glyph-24_dashboard
                .prismea-horizontal-spacing-10--slot.prismea-vertical-spacing-5.-flex
                  span.prismea-menu-label Menu item
          .prismea-vertical-spacing-10--slot
            .prismea-list-item.-disabled.ion--hoverable.-primary
              .prismea-horizontal-spacing-10.-middle
                .prismea-horizontal-spacing-10--slot
                  i.prismea-icon.prismea-glyph-24_dashboard
                .prismea-horizontal-spacing-10--slot.prismea-vertical-spacing-5.-flex
                  span.prismea-menu-label Menu item
      hr.prismea-line.-light
      .prismea-webapp--footer
        .prismea-vertical-spacing-10
          .prismea-vertical-spacing-10--slot
            .prismea-list-item.ion--hoverable.-primary
              .prismea-horizontal-spacing-10.-middle
                .prismea-horizontal-spacing-10--slot
                  i.prismea-icon.prismea-glyph-24_dashboard
                .prismea-horizontal-spacing-10--slot.prismea-vertical-spacing-5.-flex
                  span.prismea-menu-label Menu item
          .prismea-vertical-spacing-10--slot
            .prismea-list-item.ion--hoverable.-primary
              .prismea-horizontal-spacing-10.-middle
                .prismea-horizontal-spacing-10--slot
                  i.prismea-icon.prismea-glyph-24_dashboard
                .prismea-horizontal-spacing-10--slot.prismea-vertical-spacing-5.-flex
                  span.prismea-menu-label Menu item
          .prismea-vertical-spacing-10--slot
            .prismea-list-item.ion--hoverable.-primary
              .prismea-horizontal-spacing-10.-middle
                .prismea-horizontal-spacing-10--slot
                  i.prismea-icon.prismea-glyph-24_dashboard
                .prismea-horizontal-spacing-10--slot.prismea-vertical-spacing-5.-flex
                  span.prismea-menu-label Menu item
    .prismea-webapp--body
      .prismea-webapp-body-container
        .prismea-notification-area
          .prismea-notifications
            .prismea-notification--slot
              .prismea-notification.-primary.prismea-horizontal-spacing-5.-middle
                .prismea-notification--overlay.-secondary
                .prismea-horizontal-spacing-5--slot.-expand
                  p.prismea-text.prismea-color.-color-light This is a notification
                .prismea-horizontal-spacing-5--slot
                  i.prismea-icon.prismea-glyph-16_close.-color-light
            .prismea-notification--slot
              .prismea-notification.-primary.prismea-horizontal-spacing-5.-middle
                .prismea-notification--overlay.-secondary
                .prismea-horizontal-spacing-5--slot.-expand
                  p.prismea-text.prismea-color.-color-light This is a notification
                .prismea-horizontal-spacing-5--slot
                  i.prismea-icon.prismea-glyph-16_close.-color-light
        .prismea-webapp-body-container--content
          .prismea-vertical-spacing-5
            .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 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
                  //  todo: prismea-webapp-table avec les icones
                .prismea-vertical-spacing-30--slot
                  .pagination
                    .results-count 182 résultats trouvés
                    .navigation
                      button.-button 1
                      button.-button
                        span(style='font-size: 0.7rem;') ◀
                      button.-button.-far 2
                      button.-button 3
                      button.-button.-active 4
                      button.-button 5
                      button.-button.-far 6
                      button.-button
                        span(style='font-size: 0.7rem;') ▶
                      button.-button 11
                    .items-per-page
                      .text Résultats par page
                      .options
                        button.-button.-active 15
                        button.-button 30
                        button.-button 100