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="modal-fullscreen">
  <section class="modal-fullscreen-section">
    <header class="ma-6 flex flex-justify-space-between">
      <div class="flex">
        <svg class="w-32 h-14">
          <use href="/svg/logo.svg#logo"></use>
        </svg>
      </div>
      <div class="flex">
        <button class="btn btn--primary">Ouvrir un compte</button>
      </div>
    </header>
    <div class="content-wrapper">
      <div class="content w-140">
        <h1 class="title-1 mb-10">Connexion</h1>
        <div class="input mb-6">
          <label class="input__label" for="input1">Téléphone ou e-mail</label>
          <div class="input__container">
            <input id="input1" type="text" placeholder="Entrez votre adresse email ou votre numéro de téléphone"/>
          </div>
        </div>
        <div class="input mb-10">
          <label class="input__label" for="input2">Mot de passe</label>
          <div class="input__container">
            <input id="input2" type="text" placeholder="Entrez votre mot de passe"/>
          </div>
        </div>
        <button class="btn btn--primary btn--lg w-full mb-4" disabled="disabled">Se connecter</button>
        <p class="text ma-0 color-grey--700">Vous avez oublié votre mot de passe ?</p><span class="text-link color-primary--700">Résilier mon mot de passe</span>
      </div>
    </div>
  </section>
  <aside class="aside-wrapper bg-color-grey--100"><svg class="ma-auto" fill="none" height="400" viewBox="0 0 400 400" width="400" xmlns="http://www.w3.org/2000/svg"><circle cx="200" cy="200" fill="#cceeec" r="132"/><path clip-rule="evenodd" d="m200 354.025c85.066 0 154.025-68.959 154.025-154.025s-68.959-154.0253-154.025-154.0253-154.0253 68.9593-154.0253 154.0253 68.9593 154.025 154.0253 154.025zm0 1.975c86.156 0 156-69.844 156-156s-69.844-156-156-156-156 69.844-156 156 69.844 156 156 156z" fill="#30aca4" fill-rule="evenodd"/><path clip-rule="evenodd" d="m248.53 371.459c.364.977 1.418 1.512 2.418 1.216 44-12.998 81.492-42.489 104.547-81.944.297-.509.349-1.124.143-1.676-.588-1.583-2.774-1.75-3.627-.292-22.538 38.542-59.167 67.352-102.153 80.062-1.12.332-1.735 1.54-1.328 2.634z" fill="#282e38" fill-rule="evenodd"/><path clip-rule="evenodd" d="m363.759 270.123c-1.073-.396-1.594-1.611-1.156-2.668 3.825-9.227 6.895-18.868 9.126-28.855.266-1.19 1.518-1.883 2.662-1.46.931.344 1.469 1.319 1.253 2.288-2.287 10.246-5.436 20.137-9.363 29.602-.408.984-1.523 1.463-2.522 1.093z" fill="#30aca4" fill-rule="evenodd"/><path clip-rule="evenodd" d="m105.424 48.4341c-.663-.549-1.604-.6112-2.329-.1473-26.1676 16.7489-47.7152 40.0821-62.3059 67.6622-.4389.83-.2302 1.853.4926 2.451.9833.815 2.4678.508 3.0652-.62 14.2594-26.9387 35.3074-49.7311 60.8651-66.0985 1.148-.7349 1.261-2.378.212-3.2474z" fill="#282e38" fill-rule="evenodd"/><circle cx="320" cy="80" fill="#282e38" r="36"/><g clip-rule="evenodd" fill-rule="evenodd"><path d="m320.049 60 16.951 9.9299v20.0368l-16.951 10.0333-17.049-10.0317v-20.04zm-15.19 11.003v17.8961l15.188 8.9364 15.094-8.9347v-17.8994l-15.094-8.8426z" fill="#b2e6e2"/><path d="m304.737 70.0039 16.118 28.4521-1.615.9224-16.119-28.4521z" fill="#b2e6e2"/><path d="m327.3 94.5877-16.118-28.3543 1.614-.9248 16.119 28.3543z" fill="#b2e6e2"/><path d="m303.122 88.9715 16.119-28.3543 1.614.9248-16.119 28.3543z" fill="#b2e6e2"/><path d="m320.856 60.6172 16.023 28.3543-1.617.9207-16.023-28.3543z" fill="#b2e6e2"/></g><path d="m235.752 235.905-28.383-5.925-35.601 6.073v-.501c0-2.895-2.47-5.155-5.364-5.155h-16.24c-2.894 0-5.364 2.26-5.364 5.155v30.39c0 2.896 2.47 5.156 5.364 5.156h16.24c2.894 0 5.364-2.26 5.364-5.156v-1.295c20.047 2.044 41.534.49 45.964.051 10.895-.996 28.273-4.298 41.828-7.663 2.758-.418 4.781-3.037 4.981-5.566.107-1.342-.286-2.743-1.403-3.819-1.099-1.059-2.759-1.67-4.94-1.76l-20.034-.589c.033-.075.064-.15.094-.224.399-1.004.619-2.191.643-3.352.024-1.157-.144-2.374-.595-3.412-.454-1.046-1.248-2.012-2.503-2.393z" fill="#c5cad3" opacity=".2"/><path d="m226.152 226.303-28.382-5.924-35.602 6.073v-.501c0-2.896-2.47-5.155-5.364-5.155h-16.24c-2.894 0-5.364 2.259-5.364 5.155v30.39c0 2.895 2.47 5.155 5.364 5.155h16.24c2.894 0 5.364-2.26 5.364-5.155v-1.295c20.048 2.043 41.535.489 45.964.05 10.895-.995 28.273-4.298 41.828-7.662 2.759-.418 4.781-3.038 4.982-5.567.106-1.341-.287-2.742-1.404-3.818-1.099-1.059-2.759-1.671-4.939-1.761l-20.034-.589c.032-.075.064-.149.093-.224.4-1.003.619-2.19.643-3.352.025-1.156-.143-2.373-.594-3.412-.455-1.046-1.249-2.012-2.504-2.392z" fill="#fff"/><path clip-rule="evenodd" d="m197.77 220.379 28.382 5.924.051.016c1.255.38 2.049 1.346 2.504 2.392.451 1.039.619 2.256.594 3.412-.024 1.162-.243 2.349-.643 3.352-.029.075-.061.149-.093.224l20.034.589c2.18.09 3.84.702 4.939 1.761 1.117 1.076 1.51 2.477 1.404 3.818-.201 2.529-2.223 5.149-4.982 5.567-13.555 3.364-30.933 6.667-41.828 7.662-4.429.439-25.916 1.993-45.964-.05v1.295c0 2.895-2.47 5.155-5.364 5.155h-16.24c-2.894 0-5.364-2.26-5.364-5.155v-30.39c0-2.896 2.47-5.155 5.364-5.155h16.24c2.894 0 5.364 2.259 5.364 5.155v.501zm-35.602 32.254v-23.747l35.557-6.065 27.823 5.808c.36.124.695.435.957 1.038.276.635.416 1.486.397 2.406-.019.915-.194 1.813-.474 2.515-.21.528-.437.844-.616 1.014-5.852-.139-10.691-.293-14.57-.416-1.523-.049-2.899-.093-4.13-.129-2.233-.066-3.999-.107-5.302-.107-.651 0-1.2.01-1.642.034-.416.023-.821.062-1.135.147l-.077.021-.073.031c-5.966 2.504-9.094 3.778-10.728 4.425-.817.324-1.253.488-1.479.569-.103.037-.156.055-.179.062-.594.154-.982.739-.881 1.356.108.654.725 1.097 1.379.989l-.195-1.184c.195 1.184.198 1.184.201 1.183l.005-.001.01-.002.019-.003c.011-.002.022-.005.032-.007.019-.004.036-.008.051-.012.029-.008.059-.017.091-.027.062-.019.149-.049.279-.096.261-.094.724-.268 1.551-.596 1.647-.652 4.768-1.923 10.677-4.403.089-.015.27-.038.584-.055.378-.021.878-.031 1.51-.031 1.263 0 2.997.04 5.232.106 1.223.036 2.594.08 4.114.128 3.028.096 6.649.212 10.878.324l26.466.778h.006c1.806.076 2.825.568 3.367 1.091.525.506.735 1.165.676 1.9-.127 1.603-1.474 3.181-2.984 3.389l-.063.009-.062.015c-13.502 3.354-30.787 6.635-41.531 7.617l-.009.001c-4.366.433-25.839 1.984-45.732-.075zm-2.4-25.772v-.91c0-1.455-1.277-2.755-2.964-2.755h-16.24c-1.686 0-2.964 1.3-2.964 2.755v30.39c0 1.455 1.278 2.755 2.964 2.755h16.24c1.687 0 2.964-1.3 2.964-2.755v-1.555z" fill="#282e38" fill-rule="evenodd"/><path d="m217.144 170.505c0-9.132-7.244-16.686-16.411-17.306h-.453c-.283 0-.509 0-.792 0v.057h-11.715v41.32h2.83v-28.073h9.734c2.093 0 3.791 1.691 3.791 3.777 0 2.029-1.924 3.946-4.018 4.002h-2.773l.057 20.351h2.829v-6.765c9.394-.395 16.921-8.005 16.921-17.363zm-16.977 14.544v-7.948c3.622-.056 6.791-3.213 6.791-6.821s-2.943-6.539-6.565-6.539h-9.79v-7.723h9.734c7.752.451 13.977 6.821 13.977 14.487 0 7.78-6.281 14.15-14.147 14.544z" fill="#282e38"/><path d="m227.268 188.062c-.905 0-1.747.516-2.07 1.354-.453 1.16.065 2.449 1.229 2.9l5.24 2.126c1.165.452 2.459-.064 2.912-1.224s-.065-2.449-1.229-2.9l-5.241-2.127c-.259-.064-.582-.129-.841-.129z" fill="#282e38"/><path d="m162.639 170.406h-9.575c-1.229 0-2.264-1.031-2.264-2.256 0-1.224 1.035-2.255 2.264-2.255h9.64c1.229 0 2.264 1.031 2.264 2.255-.065 1.225-1.035 2.256-2.329 2.256z" fill="#30aca4"/><path d="m172.019 188.062c-.259 0-.582.065-.841.194l-5.24 2.127c-1.165.451-1.682 1.804-1.229 2.9.453 1.16 1.811 1.675 2.911 1.224l5.24-2.127c1.165-.451 1.682-1.804 1.229-2.9-.323-.902-1.164-1.418-2.07-1.418z" fill="#282e38"/><path d="m246.936 170.406h-9.639c-1.23 0-2.265-1.031-2.265-2.256 0-1.224 1.035-2.255 2.265-2.255h9.639c1.229 0 2.264 1.031 2.264 2.255 0 1.225-.97 2.256-2.264 2.256z" fill="#30aca4"/><path d="m227.268 145.722c-.905 0-1.747-.516-2.07-1.353-.453-1.16.065-2.449 1.229-2.9l5.24-2.127c1.165-.451 2.459.064 2.912 1.224s-.065 2.449-1.229 2.9l-5.241 2.127c-.259.064-.582.129-.841.129z" fill="#282e38"/><path d="m199.709 142.049c-1.23 0-2.265-1.031-2.265-2.256v-9.537c0-1.225 1.035-2.256 2.265-2.256 1.229 0 2.264 1.031 2.264 2.256v9.602c0 1.224-1.035 2.191-2.264 2.191z" fill="#30aca4"/><path d="m172.019 145.724c-.259 0-.582-.065-.841-.193l-5.24-2.127c-1.165-.451-1.682-1.805-1.229-2.9.453-1.16 1.811-1.676 2.911-1.225l5.24 2.127c1.165.451 1.682 1.805 1.229 2.9-.323.902-1.164 1.418-2.07 1.418z" fill="#282e38"/></svg></aside>
</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
      +prismea-loader
.prismea-auth-layout--box
  .prismea-auth--box
    .prismea-vertical-spacing-20
      .prismea-vertical-spacing-30--slot.-center
        +prismea-webapp-icon({icon: '100-logo-plus'})
      .prismea-vertical-spacing-30--slot.-center
        +prismea-title-2('Bienvenue chez Prismea')
      .prismea-vertical-spacing-10--slot
        +prismea-webapp-toast({status: 'warn', title: 'Warning', text: 'This application is still under development'})
      .prismea-vertical-spacing-20--slot
        +prismea-webapp-toast({status: 'error', title: 'Error', text: 'There was a fatal error'})
      .prismea-vertical-spacing-5--slot
        +prismea-input-text({placeholder: 'Username'})
      .prismea-vertical-spacing-5--slot
        +prismea-input-text({placeholder: 'Password', type: 'password', typed: true})
      .prismea-vertical-spacing-10--slot
        +prismea-webapp-button({fill: 'primary', text: 'Login', isBlock: true, noMargin: true})
-->
.modal-fullscreen
  section.modal-fullscreen-section
    header.ma-6.flex.flex-justify-space-between
      .flex
        svg.w-32.h-14
          use(href='/svg/logo.svg#logo')
      .flex
        button.btn.btn--primary Ouvrir un compte
    .content-wrapper
      .content.w-140
        h1.title-1.mb-10 Connexion
        .input.mb-6
          label.input__label(for='input1') Téléphone ou e-mail
          .input__container
            input#input1(type='text', placeholder='Entrez votre adresse email ou votre numéro de téléphone')
        .input.mb-10
          label.input__label(for='input2') Mot de passe
          .input__container
            input#input2(type='text', placeholder='Entrez votre mot de passe')
        button.btn.btn--primary.btn--lg.w-full.mb-4(disabled) Se connecter
        p.text.ma-0.color-grey--700 Vous avez oublié votre mot de passe ?
        span.text-link.color-primary--700 Résilier mon mot de passe
  aside.aside-wrapper.bg-color-grey--100
    svg.ma-auto(fill='none', height='400', viewBox='0 0 400 400', width='400', xmlns='http://www.w3.org/2000/svg')
      circle(cx='200', cy='200', fill='#cceeec', r='132')
      path(clip-rule='evenodd', d='m200 354.025c85.066 0 154.025-68.959 154.025-154.025s-68.959-154.0253-154.025-154.0253-154.0253 68.9593-154.0253 154.0253 68.9593 154.025 154.0253 154.025zm0 1.975c86.156 0 156-69.844 156-156s-69.844-156-156-156-156 69.844-156 156 69.844 156 156 156z', fill='#30aca4', fill-rule='evenodd')
      path(clip-rule='evenodd', d='m248.53 371.459c.364.977 1.418 1.512 2.418 1.216 44-12.998 81.492-42.489 104.547-81.944.297-.509.349-1.124.143-1.676-.588-1.583-2.774-1.75-3.627-.292-22.538 38.542-59.167 67.352-102.153 80.062-1.12.332-1.735 1.54-1.328 2.634z', fill='#282e38', fill-rule='evenodd')
      path(clip-rule='evenodd', d='m363.759 270.123c-1.073-.396-1.594-1.611-1.156-2.668 3.825-9.227 6.895-18.868 9.126-28.855.266-1.19 1.518-1.883 2.662-1.46.931.344 1.469 1.319 1.253 2.288-2.287 10.246-5.436 20.137-9.363 29.602-.408.984-1.523 1.463-2.522 1.093z', fill='#30aca4', fill-rule='evenodd')
      path(clip-rule='evenodd', d='m105.424 48.4341c-.663-.549-1.604-.6112-2.329-.1473-26.1676 16.7489-47.7152 40.0821-62.3059 67.6622-.4389.83-.2302 1.853.4926 2.451.9833.815 2.4678.508 3.0652-.62 14.2594-26.9387 35.3074-49.7311 60.8651-66.0985 1.148-.7349 1.261-2.378.212-3.2474z', fill='#282e38', fill-rule='evenodd')
      circle(cx='320', cy='80', fill='#282e38', r='36')
      g(clip-rule='evenodd', fill-rule='evenodd')
        path(d='m320.049 60 16.951 9.9299v20.0368l-16.951 10.0333-17.049-10.0317v-20.04zm-15.19 11.003v17.8961l15.188 8.9364 15.094-8.9347v-17.8994l-15.094-8.8426z', fill='#b2e6e2')
        path(d='m304.737 70.0039 16.118 28.4521-1.615.9224-16.119-28.4521z', fill='#b2e6e2')
        path(d='m327.3 94.5877-16.118-28.3543 1.614-.9248 16.119 28.3543z', fill='#b2e6e2')
        path(d='m303.122 88.9715 16.119-28.3543 1.614.9248-16.119 28.3543z', fill='#b2e6e2')
        path(d='m320.856 60.6172 16.023 28.3543-1.617.9207-16.023-28.3543z', fill='#b2e6e2')
      path(d='m235.752 235.905-28.383-5.925-35.601 6.073v-.501c0-2.895-2.47-5.155-5.364-5.155h-16.24c-2.894 0-5.364 2.26-5.364 5.155v30.39c0 2.896 2.47 5.156 5.364 5.156h16.24c2.894 0 5.364-2.26 5.364-5.156v-1.295c20.047 2.044 41.534.49 45.964.051 10.895-.996 28.273-4.298 41.828-7.663 2.758-.418 4.781-3.037 4.981-5.566.107-1.342-.286-2.743-1.403-3.819-1.099-1.059-2.759-1.67-4.94-1.76l-20.034-.589c.033-.075.064-.15.094-.224.399-1.004.619-2.191.643-3.352.024-1.157-.144-2.374-.595-3.412-.454-1.046-1.248-2.012-2.503-2.393z', fill='#c5cad3', opacity='.2')
      path(d='m226.152 226.303-28.382-5.924-35.602 6.073v-.501c0-2.896-2.47-5.155-5.364-5.155h-16.24c-2.894 0-5.364 2.259-5.364 5.155v30.39c0 2.895 2.47 5.155 5.364 5.155h16.24c2.894 0 5.364-2.26 5.364-5.155v-1.295c20.048 2.043 41.535.489 45.964.05 10.895-.995 28.273-4.298 41.828-7.662 2.759-.418 4.781-3.038 4.982-5.567.106-1.341-.287-2.742-1.404-3.818-1.099-1.059-2.759-1.671-4.939-1.761l-20.034-.589c.032-.075.064-.149.093-.224.4-1.003.619-2.19.643-3.352.025-1.156-.143-2.373-.594-3.412-.455-1.046-1.249-2.012-2.504-2.392z', fill='#fff')
      path(clip-rule='evenodd', d='m197.77 220.379 28.382 5.924.051.016c1.255.38 2.049 1.346 2.504 2.392.451 1.039.619 2.256.594 3.412-.024 1.162-.243 2.349-.643 3.352-.029.075-.061.149-.093.224l20.034.589c2.18.09 3.84.702 4.939 1.761 1.117 1.076 1.51 2.477 1.404 3.818-.201 2.529-2.223 5.149-4.982 5.567-13.555 3.364-30.933 6.667-41.828 7.662-4.429.439-25.916 1.993-45.964-.05v1.295c0 2.895-2.47 5.155-5.364 5.155h-16.24c-2.894 0-5.364-2.26-5.364-5.155v-30.39c0-2.896 2.47-5.155 5.364-5.155h16.24c2.894 0 5.364 2.259 5.364 5.155v.501zm-35.602 32.254v-23.747l35.557-6.065 27.823 5.808c.36.124.695.435.957 1.038.276.635.416 1.486.397 2.406-.019.915-.194 1.813-.474 2.515-.21.528-.437.844-.616 1.014-5.852-.139-10.691-.293-14.57-.416-1.523-.049-2.899-.093-4.13-.129-2.233-.066-3.999-.107-5.302-.107-.651 0-1.2.01-1.642.034-.416.023-.821.062-1.135.147l-.077.021-.073.031c-5.966 2.504-9.094 3.778-10.728 4.425-.817.324-1.253.488-1.479.569-.103.037-.156.055-.179.062-.594.154-.982.739-.881 1.356.108.654.725 1.097 1.379.989l-.195-1.184c.195 1.184.198 1.184.201 1.183l.005-.001.01-.002.019-.003c.011-.002.022-.005.032-.007.019-.004.036-.008.051-.012.029-.008.059-.017.091-.027.062-.019.149-.049.279-.096.261-.094.724-.268 1.551-.596 1.647-.652 4.768-1.923 10.677-4.403.089-.015.27-.038.584-.055.378-.021.878-.031 1.51-.031 1.263 0 2.997.04 5.232.106 1.223.036 2.594.08 4.114.128 3.028.096 6.649.212 10.878.324l26.466.778h.006c1.806.076 2.825.568 3.367 1.091.525.506.735 1.165.676 1.9-.127 1.603-1.474 3.181-2.984 3.389l-.063.009-.062.015c-13.502 3.354-30.787 6.635-41.531 7.617l-.009.001c-4.366.433-25.839 1.984-45.732-.075zm-2.4-25.772v-.91c0-1.455-1.277-2.755-2.964-2.755h-16.24c-1.686 0-2.964 1.3-2.964 2.755v30.39c0 1.455 1.278 2.755 2.964 2.755h16.24c1.687 0 2.964-1.3 2.964-2.755v-1.555z', fill='#282e38', fill-rule='evenodd')
      path(d='m217.144 170.505c0-9.132-7.244-16.686-16.411-17.306h-.453c-.283 0-.509 0-.792 0v.057h-11.715v41.32h2.83v-28.073h9.734c2.093 0 3.791 1.691 3.791 3.777 0 2.029-1.924 3.946-4.018 4.002h-2.773l.057 20.351h2.829v-6.765c9.394-.395 16.921-8.005 16.921-17.363zm-16.977 14.544v-7.948c3.622-.056 6.791-3.213 6.791-6.821s-2.943-6.539-6.565-6.539h-9.79v-7.723h9.734c7.752.451 13.977 6.821 13.977 14.487 0 7.78-6.281 14.15-14.147 14.544z', fill='#282e38')
      path(d='m227.268 188.062c-.905 0-1.747.516-2.07 1.354-.453 1.16.065 2.449 1.229 2.9l5.24 2.126c1.165.452 2.459-.064 2.912-1.224s-.065-2.449-1.229-2.9l-5.241-2.127c-.259-.064-.582-.129-.841-.129z', fill='#282e38')
      path(d='m162.639 170.406h-9.575c-1.229 0-2.264-1.031-2.264-2.256 0-1.224 1.035-2.255 2.264-2.255h9.64c1.229 0 2.264 1.031 2.264 2.255-.065 1.225-1.035 2.256-2.329 2.256z', fill='#30aca4')
      path(d='m172.019 188.062c-.259 0-.582.065-.841.194l-5.24 2.127c-1.165.451-1.682 1.804-1.229 2.9.453 1.16 1.811 1.675 2.911 1.224l5.24-2.127c1.165-.451 1.682-1.804 1.229-2.9-.323-.902-1.164-1.418-2.07-1.418z', fill='#282e38')
      path(d='m246.936 170.406h-9.639c-1.23 0-2.265-1.031-2.265-2.256 0-1.224 1.035-2.255 2.265-2.255h9.639c1.229 0 2.264 1.031 2.264 2.255 0 1.225-.97 2.256-2.264 2.256z', fill='#30aca4')
      path(d='m227.268 145.722c-.905 0-1.747-.516-2.07-1.353-.453-1.16.065-2.449 1.229-2.9l5.24-2.127c1.165-.451 2.459.064 2.912 1.224s-.065 2.449-1.229 2.9l-5.241 2.127c-.259.064-.582.129-.841.129z', fill='#282e38')
      path(d='m199.709 142.049c-1.23 0-2.265-1.031-2.265-2.256v-9.537c0-1.225 1.035-2.256 2.265-2.256 1.229 0 2.264 1.031 2.264 2.256v9.602c0 1.224-1.035 2.191-2.264 2.191z', fill='#30aca4')
      path(d='m172.019 145.724c-.259 0-.582-.065-.841-.193l-5.24-2.127c-1.165-.451-1.682-1.805-1.229-2.9.453-1.16 1.811-1.676 2.911-1.225l5.24 2.127c1.165.451 1.682 1.805 1.229 2.9-.323.902-1.164 1.418-2.07 1.418z', fill='#282e38')
//
  .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
        +prismea-loader
  .prismea-auth-layout--box
    .prismea-auth--box
      .prismea-vertical-spacing-20
        .prismea-vertical-spacing-30--slot.-center
          +prismea-webapp-icon({icon: '100-logo-plus'})
        .prismea-vertical-spacing-30--slot.-center
          +prismea-title-2('Bienvenue chez Prismea')
        .prismea-vertical-spacing-10--slot
          +prismea-webapp-toast({status: 'warn', title: 'Warning', text: 'This application is still under development'})
        .prismea-vertical-spacing-20--slot
          +prismea-webapp-toast({status: 'error', title: 'Error', text: 'There was a fatal error'})
        .prismea-vertical-spacing-5--slot
          +prismea-input-text({placeholder: 'Username'})
        .prismea-vertical-spacing-5--slot
          +prismea-input-text({placeholder: 'Password', type: 'password', typed: true})
        .prismea-vertical-spacing-10--slot
          +prismea-webapp-button({fill: 'primary', text: 'Login', isBlock: true, noMargin: true})
  

Design system

Dashboard (new navigation)

Classic

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

With notifications

<div class="prismea-webapp">
  <div class="prismea-webapp-dashboard">
    <div class="prismea-webapp-dashboard__notifications">
      <div class="prismea-notifications">
        <div class="prismea-notification prismea-horizontal-spacing-5 -middle -primary">
          <div class="prismea-notification--overlay -secondary"></div>
          <div class="prismea-horizontal-spacing-5--slot -expand">
            <p class="prismea-text prismea-color -color-light">This is a notification</p>
          </div>
          <div class="prismea-horizontal-spacing-5--slot"><i class="prismea-icon prismea-glyph-16_close -color-light"></i></div>
        </div>
      </div>
    </div>
    <div class="prismea-webapp-dashboard__content">
      <div class="prismea-webapp-dashboard__header">
        <div class="navbar"><a class="navbar-logo">
            <svg>
              <use href="/svg/logo-v2.svg#logo-v2"></use>
            </svg></a><span class="navbar-divider"></span>
          <div class="navbar-menu">
            <!-- Default navigation item-->
            <div class="menu-item menu-item--rounded menu-item--selected"><span class="menu-item__icon">
                <svg class="icon-24">
                  <use href="/svg/24x24/line/dashboard.svg#dashboard-line-24"></use>
                </svg></span><span class="menu-item__content">Menu item</span>
            </div>
            <!-- Default navigation item-->
            <div class="menu-item menu-item--rounded"><span class="menu-item__icon">
                <svg class="icon-24">
                  <use href="/svg/24x24/line/dashboard.svg#dashboard-line-24"></use>
                </svg></span><span class="menu-item__content">Menu item</span>
            </div>
            <div class="dropdown dropdown--center">
              <div class="dropdown__trigger">
            <!-- Default navigation item-->
            <div class="menu-item menu-item--rounded"><span class="menu-item__icon">
                <svg class="icon-24">
                  <use href="/svg/24x24/line/dashboard.svg#dashboard-line-24"></use>
                </svg></span><span class="menu-item__content">Menu item</span>
            </div>
              </div>
              <div class="dropdown__popover">
                <div class="dropdown__arrow"></div>
                <div class="dropdown__content">
                  <div class="pa-4 prismea-text -text-md -text-nowrap">This is a popover content</div>
                </div>
              </div>
            </div>
          </div><span class="navbar-spacer"></span>
          <div class="navbar-menu">
            <div class="navbar-action">
              <svg class="icon-32">
                <use href="/svg/32x32/line/bell.svg#bell-line-32"></use>
              </svg>
            </div>
            <div class="navbar-action">
              <svg class="icon-32">
                <use href="/svg/32x32/line/help.svg#help-line-32"></use>
              </svg>
            </div>
          </div>
          <div class="dropdown dropdown--right">
            <div class="dropdown__trigger"><a class="navbar-profile -link">
            <div class="navbar-profile-avatar"><img src="https://images.unsplash.com/photo-1541298645675-6cc8e127934d?ixlib=rb-1.2.1&amp;auto=format&amp;fit=crop&amp;w=400&amp;h=400&amp;q=80"/></div>
            <div class="navbar-profile-content"><span class="navbar-profile-text">Company Name</span><span class="navbar-profile-subtext">User name</span></div>
            <div class="navbar-profile-arrow"><i class="prismea-icon prismea-glyph-16_arrow-s"></i></div></a>
            </div>
            <div class="dropdown__popover">
              <div class="dropdown__content">
          <div class="menu menu--fixed-width py-2">
            <div class="menu__label">My companies</div>
            <!-- Default navigation item-->
            <div class="menu-item"><span class="menu-item__avatar">Ab</span><span class="menu-item__content">Menu item</span>
            </div>
            <!-- Default navigation item-->
            <div class="menu-item"><span class="menu-item__avatar">Ab</span><span class="menu-item__content">Menu item</span>
            </div>
            <div class="menu__divider"></div>
            <!-- Default navigation item-->
            <div class="menu-item"><span class="menu-item__icon">
                <svg class="icon-24">
                  <use href="/svg/24x24/line/dashboard.svg#dashboard-line-24"></use>
                </svg></span><span class="menu-item__content">Menu item</span>
            </div>
          </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="prismea-webapp-dashboard__body">
        <div class="prismea-webapp-dashboard__body__content">
          <h1 class="prismea-title-1">Title</h1>
        </div>
      </div>
    </div>
  </div>
</div>
.prismea-webapp
  .prismea-webapp-dashboard
    .prismea-webapp-dashboard__notifications
      .prismea-notifications
        .prismea-notification.prismea-horizontal-spacing-5.-middle.-primary
          .prismea-notification--overlay.-secondary
          .prismea-horizontal-spacing-5--slot.-expand
            p.prismea-text.prismea-color.-color-light This is a notification
          .prismea-horizontal-spacing-5--slot
            i.prismea-icon.prismea-glyph-16_close.-color-light
    .prismea-webapp-dashboard__content
      .prismea-webapp-dashboard__header
        .navbar
          a.navbar-logo
            svg
              use(href='/svg/logo-v2.svg#logo-v2')
          span.navbar-divider
          .navbar-menu
            //  Default navigation item
            .menu-item.menu-item--rounded.menu-item--selected
              span.menu-item__icon
                svg.icon-24
                  use(href='/svg/24x24/line/dashboard.svg#dashboard-line-24')
              span.menu-item__content Menu item
            //  Default navigation item
            .menu-item.menu-item--rounded
              span.menu-item__icon
                svg.icon-24
                  use(href='/svg/24x24/line/dashboard.svg#dashboard-line-24')
              span.menu-item__content Menu item
            .dropdown.dropdown--center
              .dropdown__trigger
                //  Default navigation item
                .menu-item.menu-item--rounded
                  span.menu-item__icon
                    svg.icon-24
                      use(href='/svg/24x24/line/dashboard.svg#dashboard-line-24')
                  span.menu-item__content Menu item
              .dropdown__popover
                .dropdown__arrow
                .dropdown__content
                  .pa-4.prismea-text.-text-md.-text-nowrap This is a popover content
          span.navbar-spacer
          .navbar-menu
            .navbar-action
              svg.icon-32
                use(href='/svg/32x32/line/bell.svg#bell-line-32')
            .navbar-action
              svg.icon-32
                use(href='/svg/32x32/line/help.svg#help-line-32')
          .dropdown.dropdown--right
            .dropdown__trigger
              a.navbar-profile.-link
                .navbar-profile-avatar
                  img(src='https://images.unsplash.com/photo-1541298645675-6cc8e127934d?ixlib=rb-1.2.1&auto=format&fit=crop&w=400&h=400&q=80')
                .navbar-profile-content
                  span.navbar-profile-text Company Name
                  span.navbar-profile-subtext User name
                .navbar-profile-arrow
                  i.prismea-icon.prismea-glyph-16_arrow-s
            .dropdown__popover
              .dropdown__content
                .menu.menu--fixed-width.py-2
                  .menu__label My companies
                  //  Default navigation item
                  .menu-item
                    span.menu-item__avatar Ab
                    span.menu-item__content Menu item
                  //  Default navigation item
                  .menu-item
                    span.menu-item__avatar Ab
                    span.menu-item__content Menu item
                  .menu__divider
                  //  Default navigation item
                  .menu-item
                    span.menu-item__icon
                      svg.icon-24
                        use(href='/svg/24x24/line/dashboard.svg#dashboard-line-24')
                    span.menu-item__content Menu item
      .prismea-webapp-dashboard__body
        .prismea-webapp-dashboard__body__content
          h1.prismea-title-1 Title

With sidebar

<div class="prismea-webapp">
  <div class="prismea-webapp-dashboard">
    <div class="prismea-webapp-dashboard__notifications">
    </div>
    <div class="prismea-webapp-dashboard__content">
      <div class="prismea-webapp-dashboard__header">
        <div class="navbar"><a class="navbar-logo">
            <svg>
              <use href="/svg/logo-v2.svg#logo-v2"></use>
            </svg></a><span class="navbar-divider"></span>
          <div class="navbar-menu">
            <!-- Default navigation item-->
            <div class="menu-item menu-item--rounded menu-item--selected"><span class="menu-item__icon">
                <svg class="icon-24">
                  <use href="/svg/24x24/line/dashboard.svg#dashboard-line-24"></use>
                </svg></span><span class="menu-item__content">Menu item</span>
            </div>
            <!-- Default navigation item-->
            <div class="menu-item menu-item--rounded"><span class="menu-item__icon">
                <svg class="icon-24">
                  <use href="/svg/24x24/line/dashboard.svg#dashboard-line-24"></use>
                </svg></span><span class="menu-item__content">Menu item</span>
            </div>
            <div class="dropdown dropdown--center">
              <div class="dropdown__trigger">
            <!-- Default navigation item-->
            <div class="menu-item menu-item--rounded"><span class="menu-item__icon">
                <svg class="icon-24">
                  <use href="/svg/24x24/line/dashboard.svg#dashboard-line-24"></use>
                </svg></span><span class="menu-item__content">Menu item</span>
            </div>
              </div>
              <div class="dropdown__popover">
                <div class="dropdown__arrow"></div>
                <div class="dropdown__content">
                  <div class="pa-4 prismea-text -text-md -text-nowrap">This is a popover content</div>
                </div>
              </div>
            </div>
          </div><span class="navbar-spacer"></span>
          <div class="navbar-menu">
            <div class="navbar-action">
              <svg class="icon-32">
                <use href="/svg/32x32/line/bell.svg#bell-line-32"></use>
              </svg>
            </div>
            <div class="navbar-action">
              <svg class="icon-32">
                <use href="/svg/32x32/line/help.svg#help-line-32"></use>
              </svg>
            </div>
          </div>
          <div class="dropdown dropdown--right">
            <div class="dropdown__trigger"><a class="navbar-profile -link">
            <div class="navbar-profile-avatar"><img src="https://images.unsplash.com/photo-1541298645675-6cc8e127934d?ixlib=rb-1.2.1&amp;auto=format&amp;fit=crop&amp;w=400&amp;h=400&amp;q=80"/></div>
            <div class="navbar-profile-content"><span class="navbar-profile-text">Company Name</span><span class="navbar-profile-subtext">User name</span></div>
            <div class="navbar-profile-arrow"><i class="prismea-icon prismea-glyph-16_arrow-s"></i></div></a>
            </div>
            <div class="dropdown__popover">
              <div class="dropdown__content">
          <div class="menu menu--fixed-width py-2">
            <div class="menu__label">My companies</div>
            <!-- Default navigation item-->
            <div class="menu-item"><span class="menu-item__avatar">Ab</span><span class="menu-item__content">Menu item</span>
            </div>
            <!-- Default navigation item-->
            <div class="menu-item"><span class="menu-item__avatar">Ab</span><span class="menu-item__content">Menu item</span>
            </div>
            <div class="menu__divider"></div>
            <!-- Default navigation item-->
            <div class="menu-item"><span class="menu-item__icon">
                <svg class="icon-24">
                  <use href="/svg/24x24/line/dashboard.svg#dashboard-line-24"></use>
                </svg></span><span class="menu-item__content">Menu item</span>
            </div>
          </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="prismea-webapp-dashboard__body">
        <div class="prismea-webapp-dashboard__body__content">
          <h1 class="prismea-title-1">Title</h1>
        </div>
      </div>
      <div class="prismea-webapp-dashboard__aside">
        <div class="prismea-webapp-dashboard__aside__content">
          <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-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>
</div>
.prismea-webapp
  .prismea-webapp-dashboard
    .prismea-webapp-dashboard__notifications.
      
      
    .prismea-webapp-dashboard__content
      .prismea-webapp-dashboard__header
        .navbar
          a.navbar-logo
            svg
              use(href='/svg/logo-v2.svg#logo-v2')
          span.navbar-divider
          .navbar-menu
            //  Default navigation item
            .menu-item.menu-item--rounded.menu-item--selected
              span.menu-item__icon
                svg.icon-24
                  use(href='/svg/24x24/line/dashboard.svg#dashboard-line-24')
              span.menu-item__content Menu item
            //  Default navigation item
            .menu-item.menu-item--rounded
              span.menu-item__icon
                svg.icon-24
                  use(href='/svg/24x24/line/dashboard.svg#dashboard-line-24')
              span.menu-item__content Menu item
            .dropdown.dropdown--center
              .dropdown__trigger
                //  Default navigation item
                .menu-item.menu-item--rounded
                  span.menu-item__icon
                    svg.icon-24
                      use(href='/svg/24x24/line/dashboard.svg#dashboard-line-24')
                  span.menu-item__content Menu item
              .dropdown__popover
                .dropdown__arrow
                .dropdown__content
                  .pa-4.prismea-text.-text-md.-text-nowrap This is a popover content
          span.navbar-spacer
          .navbar-menu
            .navbar-action
              svg.icon-32
                use(href='/svg/32x32/line/bell.svg#bell-line-32')
            .navbar-action
              svg.icon-32
                use(href='/svg/32x32/line/help.svg#help-line-32')
          .dropdown.dropdown--right
            .dropdown__trigger
              a.navbar-profile.-link
                .navbar-profile-avatar
                  img(src='https://images.unsplash.com/photo-1541298645675-6cc8e127934d?ixlib=rb-1.2.1&auto=format&fit=crop&w=400&h=400&q=80')
                .navbar-profile-content
                  span.navbar-profile-text Company Name
                  span.navbar-profile-subtext User name
                .navbar-profile-arrow
                  i.prismea-icon.prismea-glyph-16_arrow-s
            .dropdown__popover
              .dropdown__content
                .menu.menu--fixed-width.py-2
                  .menu__label My companies
                  //  Default navigation item
                  .menu-item
                    span.menu-item__avatar Ab
                    span.menu-item__content Menu item
                  //  Default navigation item
                  .menu-item
                    span.menu-item__avatar Ab
                    span.menu-item__content Menu item
                  .menu__divider
                  //  Default navigation item
                  .menu-item
                    span.menu-item__icon
                      svg.icon-24
                        use(href='/svg/24x24/line/dashboard.svg#dashboard-line-24')
                    span.menu-item__content Menu item
      .prismea-webapp-dashboard__body
        .prismea-webapp-dashboard__body__content
          h1.prismea-title-1 Title
      .prismea-webapp-dashboard__aside
        .prismea-webapp-dashboard__aside__content
          .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-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

With off canvas content

<div class="prismea-webapp">
  <div class="prismea-webapp-dashboard">
    <div class="prismea-webapp-dashboard__notifications">
      <div class="prismea-notifications">
        <div class="prismea-notification prismea-horizontal-spacing-5 -middle -primary">
          <div class="prismea-notification--overlay -secondary"></div>
          <div class="prismea-horizontal-spacing-5--slot -expand">
            <p class="prismea-text prismea-color -color-light">This is a notification</p>
          </div>
          <div class="prismea-horizontal-spacing-5--slot"><i class="prismea-icon prismea-glyph-16_close -color-light"></i></div>
        </div>
      </div>
    </div>
    <div class="prismea-webapp-dashboard__content prismea-webapp-dashboard--translate-with-off-canvas" style="transform: translateY(500px);">
      <div class="prismea-webapp-dashboard__header">
        <div class="navbar"><a class="navbar-logo">
            <svg>
              <use href="/svg/logo-v2.svg#logo-v2"></use>
            </svg></a><span class="navbar-divider"></span>
          <div class="navbar-menu">
            <!-- Default navigation item-->
            <div class="menu-item menu-item--rounded menu-item--selected"><span class="menu-item__icon">
                <svg class="icon-24">
                  <use href="/svg/24x24/line/dashboard.svg#dashboard-line-24"></use>
                </svg></span><span class="menu-item__content">Menu item</span>
            </div>
            <!-- Default navigation item-->
            <div class="menu-item menu-item--rounded"><span class="menu-item__icon">
                <svg class="icon-24">
                  <use href="/svg/24x24/line/dashboard.svg#dashboard-line-24"></use>
                </svg></span><span class="menu-item__content">Menu item</span>
            </div>
            <div class="dropdown dropdown--center">
              <div class="dropdown__trigger">
            <!-- Default navigation item-->
            <div class="menu-item menu-item--rounded"><span class="menu-item__icon">
                <svg class="icon-24">
                  <use href="/svg/24x24/line/dashboard.svg#dashboard-line-24"></use>
                </svg></span><span class="menu-item__content">Menu item</span>
            </div>
              </div>
              <div class="dropdown__popover">
                <div class="dropdown__arrow"></div>
                <div class="dropdown__content">
                  <div class="pa-4 prismea-text -text-md -text-nowrap">This is a popover content</div>
                </div>
              </div>
            </div>
          </div><span class="navbar-spacer"></span>
          <div class="navbar-menu">
            <div class="navbar-action">
              <svg class="icon-32">
                <use href="/svg/32x32/line/bell.svg#bell-line-32"></use>
              </svg>
            </div>
            <div class="navbar-action">
              <svg class="icon-32">
                <use href="/svg/32x32/line/help.svg#help-line-32"></use>
              </svg>
            </div>
          </div>
          <div class="dropdown dropdown--right">
            <div class="dropdown__trigger"><a class="navbar-profile -link">
            <div class="navbar-profile-avatar"><img src="https://images.unsplash.com/photo-1541298645675-6cc8e127934d?ixlib=rb-1.2.1&amp;auto=format&amp;fit=crop&amp;w=400&amp;h=400&amp;q=80"/></div>
            <div class="navbar-profile-content"><span class="navbar-profile-text">Company Name</span><span class="navbar-profile-subtext">User name</span></div>
            <div class="navbar-profile-arrow"><i class="prismea-icon prismea-glyph-16_arrow-s"></i></div></a>
            </div>
            <div class="dropdown__popover">
              <div class="dropdown__content">
          <div class="menu menu--fixed-width py-2">
            <div class="menu__label">My companies</div>
            <!-- Default navigation item-->
            <div class="menu-item"><span class="menu-item__avatar">Ab</span><span class="menu-item__content">Menu item</span>
            </div>
            <!-- Default navigation item-->
            <div class="menu-item"><span class="menu-item__avatar">Ab</span><span class="menu-item__content">Menu item</span>
            </div>
            <div class="menu__divider"></div>
            <!-- Default navigation item-->
            <div class="menu-item"><span class="menu-item__icon">
                <svg class="icon-24">
                  <use href="/svg/24x24/line/dashboard.svg#dashboard-line-24"></use>
                </svg></span><span class="menu-item__content">Menu item</span>
            </div>
          </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="prismea-webapp-dashboard__body">
        <div class="prismea-webapp-dashboard__body__content">
          <h1 class="prismea-title-1">Title</h1>
        </div>
      </div>
      <div class="prismea-webapp-dashboard__off-canvas">
        <div class="prismea-webapp-dashboard__off-canvas__overlay"></div>
        <div class="prismea-webapp-dashboard__off-canvas__content -primary-lighter" style="height: 500px;">
          <div class="prismea-webapp-dashboard__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-dashboard__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>
    </div>
  </div>
</div>
.prismea-webapp
  .prismea-webapp-dashboard
    .prismea-webapp-dashboard__notifications
      .prismea-notifications
        .prismea-notification.prismea-horizontal-spacing-5.-middle.-primary
          .prismea-notification--overlay.-secondary
          .prismea-horizontal-spacing-5--slot.-expand
            p.prismea-text.prismea-color.-color-light This is a notification
          .prismea-horizontal-spacing-5--slot
            i.prismea-icon.prismea-glyph-16_close.-color-light
    .prismea-webapp-dashboard__content.prismea-webapp-dashboard--translate-with-off-canvas(style='transform: translateY(500px);')
      .prismea-webapp-dashboard__header
        .navbar
          a.navbar-logo
            svg
              use(href='/svg/logo-v2.svg#logo-v2')
          span.navbar-divider
          .navbar-menu
            //  Default navigation item
            .menu-item.menu-item--rounded.menu-item--selected
              span.menu-item__icon
                svg.icon-24
                  use(href='/svg/24x24/line/dashboard.svg#dashboard-line-24')
              span.menu-item__content Menu item
            //  Default navigation item
            .menu-item.menu-item--rounded
              span.menu-item__icon
                svg.icon-24
                  use(href='/svg/24x24/line/dashboard.svg#dashboard-line-24')
              span.menu-item__content Menu item
            .dropdown.dropdown--center
              .dropdown__trigger
                //  Default navigation item
                .menu-item.menu-item--rounded
                  span.menu-item__icon
                    svg.icon-24
                      use(href='/svg/24x24/line/dashboard.svg#dashboard-line-24')
                  span.menu-item__content Menu item
              .dropdown__popover
                .dropdown__arrow
                .dropdown__content
                  .pa-4.prismea-text.-text-md.-text-nowrap This is a popover content
          span.navbar-spacer
          .navbar-menu
            .navbar-action
              svg.icon-32
                use(href='/svg/32x32/line/bell.svg#bell-line-32')
            .navbar-action
              svg.icon-32
                use(href='/svg/32x32/line/help.svg#help-line-32')
          .dropdown.dropdown--right
            .dropdown__trigger
              a.navbar-profile.-link
                .navbar-profile-avatar
                  img(src='https://images.unsplash.com/photo-1541298645675-6cc8e127934d?ixlib=rb-1.2.1&auto=format&fit=crop&w=400&h=400&q=80')
                .navbar-profile-content
                  span.navbar-profile-text Company Name
                  span.navbar-profile-subtext User name
                .navbar-profile-arrow
                  i.prismea-icon.prismea-glyph-16_arrow-s
            .dropdown__popover
              .dropdown__content
                .menu.menu--fixed-width.py-2
                  .menu__label My companies
                  //  Default navigation item
                  .menu-item
                    span.menu-item__avatar Ab
                    span.menu-item__content Menu item
                  //  Default navigation item
                  .menu-item
                    span.menu-item__avatar Ab
                    span.menu-item__content Menu item
                  .menu__divider
                  //  Default navigation item
                  .menu-item
                    span.menu-item__icon
                      svg.icon-24
                        use(href='/svg/24x24/line/dashboard.svg#dashboard-line-24')
                    span.menu-item__content Menu item
      .prismea-webapp-dashboard__body
        .prismea-webapp-dashboard__body__content
          h1.prismea-title-1 Title
      .prismea-webapp-dashboard__off-canvas
        .prismea-webapp-dashboard__off-canvas__overlay
        .prismea-webapp-dashboard__off-canvas__content.-primary-lighter(style='height: 500px;')
          .prismea-webapp-dashboard__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-dashboard__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
                          

With off canvas content - CSS only

When using CSS only (no JS height calculation), the dashboard content is not moved down.

<div class="prismea-webapp">
  <div class="prismea-webapp-dashboard">
    <div class="prismea-webapp-dashboard__notifications">
      <div class="prismea-notifications">
        <div class="prismea-notification prismea-horizontal-spacing-5 -middle -primary">
          <div class="prismea-notification--overlay -secondary"></div>
          <div class="prismea-horizontal-spacing-5--slot -expand">
            <p class="prismea-text prismea-color -color-light">This is a notification</p>
          </div>
          <div class="prismea-horizontal-spacing-5--slot"><i class="prismea-icon prismea-glyph-16_close -color-light"></i></div>
        </div>
      </div>
    </div>
    <div class="prismea-webapp-dashboard__content">
      <div class="prismea-webapp-dashboard__header">
        <div class="navbar"><a class="navbar-logo">
            <svg>
              <use href="/svg/logo-v2.svg#logo-v2"></use>
            </svg></a><span class="navbar-divider"></span>
          <div class="navbar-menu">
            <!-- Default navigation item-->
            <div class="menu-item menu-item--rounded menu-item--selected"><span class="menu-item__icon">
                <svg class="icon-24">
                  <use href="/svg/24x24/line/dashboard.svg#dashboard-line-24"></use>
                </svg></span><span class="menu-item__content">Menu item</span>
            </div>
            <!-- Default navigation item-->
            <div class="menu-item menu-item--rounded"><span class="menu-item__icon">
                <svg class="icon-24">
                  <use href="/svg/24x24/line/dashboard.svg#dashboard-line-24"></use>
                </svg></span><span class="menu-item__content">Menu item</span>
            </div>
            <div class="dropdown dropdown--center">
              <div class="dropdown__trigger">
            <!-- Default navigation item-->
            <div class="menu-item menu-item--rounded"><span class="menu-item__icon">
                <svg class="icon-24">
                  <use href="/svg/24x24/line/dashboard.svg#dashboard-line-24"></use>
                </svg></span><span class="menu-item__content">Menu item</span>
            </div>
              </div>
              <div class="dropdown__popover">
                <div class="dropdown__arrow"></div>
                <div class="dropdown__content">
                  <div class="pa-4 prismea-text -text-md -text-nowrap">This is a popover content</div>
                </div>
              </div>
            </div>
          </div><span class="navbar-spacer"></span>
          <div class="navbar-menu">
            <div class="navbar-action">
              <svg class="icon-32">
                <use href="/svg/32x32/line/bell.svg#bell-line-32"></use>
              </svg>
            </div>
            <div class="navbar-action">
              <svg class="icon-32">
                <use href="/svg/32x32/line/help.svg#help-line-32"></use>
              </svg>
            </div>
          </div>
          <div class="dropdown dropdown--right">
            <div class="dropdown__trigger"><a class="navbar-profile -link">
            <div class="navbar-profile-avatar"><img src="https://images.unsplash.com/photo-1541298645675-6cc8e127934d?ixlib=rb-1.2.1&amp;auto=format&amp;fit=crop&amp;w=400&amp;h=400&amp;q=80"/></div>
            <div class="navbar-profile-content"><span class="navbar-profile-text">Company Name</span><span class="navbar-profile-subtext">User name</span></div>
            <div class="navbar-profile-arrow"><i class="prismea-icon prismea-glyph-16_arrow-s"></i></div></a>
            </div>
            <div class="dropdown__popover">
              <div class="dropdown__content">
          <div class="menu menu--fixed-width py-2">
            <div class="menu__label">My companies</div>
            <!-- Default navigation item-->
            <div class="menu-item"><span class="menu-item__avatar">Ab</span><span class="menu-item__content">Menu item</span>
            </div>
            <!-- Default navigation item-->
            <div class="menu-item"><span class="menu-item__avatar">Ab</span><span class="menu-item__content">Menu item</span>
            </div>
            <div class="menu__divider"></div>
            <!-- Default navigation item-->
            <div class="menu-item"><span class="menu-item__icon">
                <svg class="icon-24">
                  <use href="/svg/24x24/line/dashboard.svg#dashboard-line-24"></use>
                </svg></span><span class="menu-item__content">Menu item</span>
            </div>
          </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="prismea-webapp-dashboard__body">
        <div class="prismea-webapp-dashboard__body__content">
          <h1 class="prismea-title-1">Title</h1>
        </div>
      </div>
      <div class="prismea-webapp-dashboard__off-canvas">
        <div class="prismea-webapp-dashboard__off-canvas__overlay"></div>
        <div class="prismea-webapp-dashboard__off-canvas__content -primary-lighter">
          <div class="prismea-webapp-dashboard__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-dashboard__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>
    </div>
  </div>
</div>
.prismea-webapp
  .prismea-webapp-dashboard
    .prismea-webapp-dashboard__notifications
      .prismea-notifications
        .prismea-notification.prismea-horizontal-spacing-5.-middle.-primary
          .prismea-notification--overlay.-secondary
          .prismea-horizontal-spacing-5--slot.-expand
            p.prismea-text.prismea-color.-color-light This is a notification
          .prismea-horizontal-spacing-5--slot
            i.prismea-icon.prismea-glyph-16_close.-color-light
    .prismea-webapp-dashboard__content
      .prismea-webapp-dashboard__header
        .navbar
          a.navbar-logo
            svg
              use(href='/svg/logo-v2.svg#logo-v2')
          span.navbar-divider
          .navbar-menu
            //  Default navigation item
            .menu-item.menu-item--rounded.menu-item--selected
              span.menu-item__icon
                svg.icon-24
                  use(href='/svg/24x24/line/dashboard.svg#dashboard-line-24')
              span.menu-item__content Menu item
            //  Default navigation item
            .menu-item.menu-item--rounded
              span.menu-item__icon
                svg.icon-24
                  use(href='/svg/24x24/line/dashboard.svg#dashboard-line-24')
              span.menu-item__content Menu item
            .dropdown.dropdown--center
              .dropdown__trigger
                //  Default navigation item
                .menu-item.menu-item--rounded
                  span.menu-item__icon
                    svg.icon-24
                      use(href='/svg/24x24/line/dashboard.svg#dashboard-line-24')
                  span.menu-item__content Menu item
              .dropdown__popover
                .dropdown__arrow
                .dropdown__content
                  .pa-4.prismea-text.-text-md.-text-nowrap This is a popover content
          span.navbar-spacer
          .navbar-menu
            .navbar-action
              svg.icon-32
                use(href='/svg/32x32/line/bell.svg#bell-line-32')
            .navbar-action
              svg.icon-32
                use(href='/svg/32x32/line/help.svg#help-line-32')
          .dropdown.dropdown--right
            .dropdown__trigger
              a.navbar-profile.-link
                .navbar-profile-avatar
                  img(src='https://images.unsplash.com/photo-1541298645675-6cc8e127934d?ixlib=rb-1.2.1&auto=format&fit=crop&w=400&h=400&q=80')
                .navbar-profile-content
                  span.navbar-profile-text Company Name
                  span.navbar-profile-subtext User name
                .navbar-profile-arrow
                  i.prismea-icon.prismea-glyph-16_arrow-s
            .dropdown__popover
              .dropdown__content
                .menu.menu--fixed-width.py-2
                  .menu__label My companies
                  //  Default navigation item
                  .menu-item
                    span.menu-item__avatar Ab
                    span.menu-item__content Menu item
                  //  Default navigation item
                  .menu-item
                    span.menu-item__avatar Ab
                    span.menu-item__content Menu item
                  .menu__divider
                  //  Default navigation item
                  .menu-item
                    span.menu-item__icon
                      svg.icon-24
                        use(href='/svg/24x24/line/dashboard.svg#dashboard-line-24')
                    span.menu-item__content Menu item
      .prismea-webapp-dashboard__body
        .prismea-webapp-dashboard__body__content
          h1.prismea-title-1 Title
      .prismea-webapp-dashboard__off-canvas
        .prismea-webapp-dashboard__off-canvas__overlay
        .prismea-webapp-dashboard__off-canvas__content.-primary-lighter
          .prismea-webapp-dashboard__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-dashboard__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
                          

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="company-switcher  ">
          <div class="company-switcher-logo"><i class="prismea-glyph-50-logo prismea-icon"></i></div>
          <div class="company-switcher-content">
            <div class="company-switcher-content__text">James Gordon</div>
            <div class="company-switcher-content__subtext">CyberLife Co.</div>
          </div>
        </div>
      </div>
      <hr class="prismea-line -light"/>
      <div class="prismea-webapp--navigation">
        <div class="prismea-vertical-spacing-10">
          <div class="prismea-vertical-spacing-10--slot">
            <div class="list-item">
              <div class="text">Vue d'ensemble</div>
            </div>
          </div>
          <div class="prismea-vertical-spacing-10--slot">
            <div class="list-item">
              <div class="text">Opérations</div>
            </div>
          </div>
          <div class="prismea-vertical-spacing-10--slot">
            <div class="list-item">
              <div class="text">Cartes</div>
            </div>
          </div>
          <div class="prismea-vertical-spacing-10--slot">
            <div class="list-item">
              <div class="text">Virements</div>
            </div>
          </div>
          <div class="prismea-vertical-spacing-10--slot">
            <div class="list-item">
              <div class="text">Prélèvements</div>
            </div>
          </div>
        </div>
      </div>
      <hr class="prismea-line -light"/>
      <div class="prismea-webapp--footer">
        <div class="prismea-vertical-spacing-10">
          <div class="prismea-vertical-spacing-10--slot">
            <div class="list-item">
              <div class="text">Paramètres</div>
            </div>
          </div>
          <div class="prismea-vertical-spacing-10--slot">
            <div class="list-item">
              <div class="text">Aide et documentation</div>
            </div>
          </div>
          <div class="prismea-vertical-spacing-10--slot">
            <div class="list-item">
              <div class="text">Déconnexion</div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <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
        .company-switcher
          .company-switcher-logo
            i.prismea-glyph-50-logo.prismea-icon
          .company-switcher-content
            .company-switcher-content__text James Gordon
            .company-switcher-content__subtext CyberLife Co.
      hr.prismea-line.-light
      .prismea-webapp--navigation
        .prismea-vertical-spacing-10
          .prismea-vertical-spacing-10--slot
            .list-item
              .text Vue d'ensemble
          .prismea-vertical-spacing-10--slot
            .list-item
              .text Opérations
          .prismea-vertical-spacing-10--slot
            .list-item
              .text Cartes
          .prismea-vertical-spacing-10--slot
            .list-item
              .text Virements
          .prismea-vertical-spacing-10--slot
            .list-item
              .text Prélèvements
      hr.prismea-line.-light
      .prismea-webapp--footer
        .prismea-vertical-spacing-10
          .prismea-vertical-spacing-10--slot
            .list-item
              .text Paramètres
          .prismea-vertical-spacing-10--slot
            .list-item
              .text Aide et documentation
          .prismea-vertical-spacing-10--slot
            .list-item
              .text Déconnexion
    .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="company-switcher  ">
          <div class="company-switcher-logo"><i class="prismea-glyph-50-logo prismea-icon"></i></div>
          <div class="company-switcher-content">
            <div class="company-switcher-content__text">James Gordon</div>
            <div class="company-switcher-content__subtext">CyberLife Co.</div>
          </div>
        </div>
      </div>
      <hr class="prismea-line -light"/>
      <div class="prismea-webapp--navigation">
        <div class="prismea-vertical-spacing-10">
          <div class="prismea-vertical-spacing-10--slot">
            <div class="list-item">
              <div class="text">Vue d'ensemble</div>
            </div>
          </div>
          <div class="prismea-vertical-spacing-10--slot">
            <div class="list-item">
              <div class="text">Opérations</div>
            </div>
          </div>
          <div class="prismea-vertical-spacing-10--slot">
            <div class="list-item">
              <div class="text">Cartes</div>
            </div>
          </div>
          <div class="prismea-vertical-spacing-10--slot">
            <div class="list-item">
              <div class="text">Virements</div>
            </div>
          </div>
          <div class="prismea-vertical-spacing-10--slot">
            <div class="list-item">
              <div class="text">Prélèvements</div>
            </div>
          </div>
        </div>
      </div>
      <hr class="prismea-line -light"/>
      <div class="prismea-webapp--footer">
        <div class="prismea-vertical-spacing-10">
          <div class="prismea-vertical-spacing-10--slot">
            <div class="list-item">
              <div class="text">Paramètres</div>
            </div>
          </div>
          <div class="prismea-vertical-spacing-10--slot">
            <div class="list-item">
              <div class="text">Aide et documentation</div>
            </div>
          </div>
          <div class="prismea-vertical-spacing-10--slot">
            <div class="list-item">
              <div class="text">Déconnexion</div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <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
        .company-switcher
          .company-switcher-logo
            i.prismea-glyph-50-logo.prismea-icon
          .company-switcher-content
            .company-switcher-content__text James Gordon
            .company-switcher-content__subtext CyberLife Co.
      hr.prismea-line.-light
      .prismea-webapp--navigation
        .prismea-vertical-spacing-10
          .prismea-vertical-spacing-10--slot
            .list-item
              .text Vue d'ensemble
          .prismea-vertical-spacing-10--slot
            .list-item
              .text Opérations
          .prismea-vertical-spacing-10--slot
            .list-item
              .text Cartes
          .prismea-vertical-spacing-10--slot
            .list-item
              .text Virements
          .prismea-vertical-spacing-10--slot
            .list-item
              .text Prélèvements
      hr.prismea-line.-light
      .prismea-webapp--footer
        .prismea-vertical-spacing-10
          .prismea-vertical-spacing-10--slot
            .list-item
              .text Paramètres
          .prismea-vertical-spacing-10--slot
            .list-item
              .text Aide et documentation
          .prismea-vertical-spacing-10--slot
            .list-item
              .text Déconnexion
    .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="company-switcher  ">
          <div class="company-switcher-logo"><i class="prismea-glyph-50-logo prismea-icon"></i></div>
          <div class="company-switcher-content">
            <div class="company-switcher-content__text">James Gordon</div>
            <div class="company-switcher-content__subtext">CyberLife Co.</div>
          </div>
        </div>
      </div>
      <hr class="prismea-line -light"/>
      <div class="prismea-webapp--navigation">
        <div class="prismea-vertical-spacing-10">
          <div class="prismea-vertical-spacing-10--slot">
            <div class="list-item">
              <div class="text">Vue d'ensemble</div>
            </div>
          </div>
          <div class="prismea-vertical-spacing-10--slot">
            <div class="list-item">
              <div class="text">Opérations</div>
            </div>
          </div>
          <div class="prismea-vertical-spacing-10--slot">
            <div class="list-item">
              <div class="text">Cartes</div>
            </div>
          </div>
          <div class="prismea-vertical-spacing-10--slot">
            <div class="list-item">
              <div class="text">Virements</div>
            </div>
          </div>
          <div class="prismea-vertical-spacing-10--slot">
            <div class="list-item">
              <div class="text">Prélèvements</div>
            </div>
          </div>
        </div>
      </div>
      <hr class="prismea-line -light"/>
      <div class="prismea-webapp--footer">
        <div class="prismea-vertical-spacing-10">
          <div class="prismea-vertical-spacing-10--slot">
            <div class="list-item">
              <div class="text">Paramètres</div>
            </div>
          </div>
          <div class="prismea-vertical-spacing-10--slot">
            <div class="list-item">
              <div class="text">Aide et documentation</div>
            </div>
          </div>
          <div class="prismea-vertical-spacing-10--slot">
            <div class="list-item">
              <div class="text">Déconnexion</div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <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
        .company-switcher
          .company-switcher-logo
            i.prismea-glyph-50-logo.prismea-icon
          .company-switcher-content
            .company-switcher-content__text James Gordon
            .company-switcher-content__subtext CyberLife Co.
      hr.prismea-line.-light
      .prismea-webapp--navigation
        .prismea-vertical-spacing-10
          .prismea-vertical-spacing-10--slot
            .list-item
              .text Vue d'ensemble
          .prismea-vertical-spacing-10--slot
            .list-item
              .text Opérations
          .prismea-vertical-spacing-10--slot
            .list-item
              .text Cartes
          .prismea-vertical-spacing-10--slot
            .list-item
              .text Virements
          .prismea-vertical-spacing-10--slot
            .list-item
              .text Prélèvements
      hr.prismea-line.-light
      .prismea-webapp--footer
        .prismea-vertical-spacing-10
          .prismea-vertical-spacing-10--slot
            .list-item
              .text Paramètres
          .prismea-vertical-spacing-10--slot
            .list-item
              .text Aide et documentation
          .prismea-vertical-spacing-10--slot
            .list-item
              .text Déconnexion
    .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="company-switcher  ">
          <div class="company-switcher-logo"><i class="prismea-glyph-50-logo prismea-icon"></i></div>
          <div class="company-switcher-content">
            <div class="company-switcher-content__text">James Gordon</div>
            <div class="company-switcher-content__subtext">CyberLife Co.</div>
          </div>
        </div>
      </div>
      <hr class="prismea-line -light"/>
      <div class="prismea-webapp--navigation">
        <div class="prismea-vertical-spacing-10">
          <div class="prismea-vertical-spacing-10--slot">
            <div class="list-item">
              <div class="text">Vue d'ensemble</div>
            </div>
          </div>
          <div class="prismea-vertical-spacing-10--slot">
            <div class="list-item">
              <div class="text">Opérations</div>
            </div>
          </div>
          <div class="prismea-vertical-spacing-10--slot">
            <div class="list-item">
              <div class="text">Cartes</div>
            </div>
          </div>
          <div class="prismea-vertical-spacing-10--slot">
            <div class="list-item">
              <div class="text">Virements</div>
            </div>
          </div>
          <div class="prismea-vertical-spacing-10--slot">
            <div class="list-item">
              <div class="text">Prélèvements</div>
            </div>
          </div>
        </div>
      </div>
      <hr class="prismea-line -light"/>
      <div class="prismea-webapp--footer">
        <div class="prismea-vertical-spacing-10">
          <div class="prismea-vertical-spacing-10--slot">
            <div class="list-item">
              <div class="text">Paramètres</div>
            </div>
          </div>
          <div class="prismea-vertical-spacing-10--slot">
            <div class="list-item">
              <div class="text">Aide et documentation</div>
            </div>
          </div>
          <div class="prismea-vertical-spacing-10--slot">
            <div class="list-item">
              <div class="text">Déconnexion</div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <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
        .company-switcher
          .company-switcher-logo
            i.prismea-glyph-50-logo.prismea-icon
          .company-switcher-content
            .company-switcher-content__text James Gordon
            .company-switcher-content__subtext CyberLife Co.
      hr.prismea-line.-light
      .prismea-webapp--navigation
        .prismea-vertical-spacing-10
          .prismea-vertical-spacing-10--slot
            .list-item
              .text Vue d'ensemble
          .prismea-vertical-spacing-10--slot
            .list-item
              .text Opérations
          .prismea-vertical-spacing-10--slot
            .list-item
              .text Cartes
          .prismea-vertical-spacing-10--slot
            .list-item
              .text Virements
          .prismea-vertical-spacing-10--slot
            .list-item
              .text Prélèvements
      hr.prismea-line.-light
      .prismea-webapp--footer
        .prismea-vertical-spacing-10
          .prismea-vertical-spacing-10--slot
            .list-item
              .text Paramètres
          .prismea-vertical-spacing-10--slot
            .list-item
              .text Aide et documentation
          .prismea-vertical-spacing-10--slot
            .list-item
              .text Déconnexion
    .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