Organisms

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

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

Atomic Design by Brad Frost

Block Articles

<div class="prismea-content-container">
  <div class="block-articles">
    <div class="article-card"><img class="article-card__image" src="https://placeimg.com/380/250/animals"/>
      <div class="article-card__body">
        <div class="mb-3">
          <div class="prismea-landingpage-category-label">
            <div class="prismea-landingpage-category-label-text">
              <p class="prismea-text -size-14 ">Lorem Ipsum</p>
            </div>
          </div>
        </div>
        <h3 class="prismea-text -size-18 -text-medium mb-5">Lorem ipsum dolor sit amet consectetur adipisicing elit</h3>
        <p class="prismea-text color-grey--700">Lorem ipsum dolor sit amet consectetur adipisicing elit. Culpa perspiciatis numquam consectetur vitae commodi similique exercitationem, lauda.</p>
      </div>
      <div class="article-card__footer flex flex-align-center flex-gap-4">
        <div class="avatar avatar--lg border-radius-rounded flex-no-shrink"><img class="avatar__image" src="https://images.unsplash.com/photo-1541298645675-6cc8e127934d"/>
        </div>
        <p class="prismea-text -size-12 color-grey--600"><span>Lorem ipsum dolor sit</span><span class="color-primary--500"> amet consectetur</span></p>
      </div>
    </div>
    <div class="article-card"><img class="article-card__image" src="https://placeimg.com/380/250/animals"/>
      <div class="article-card__body">
        <div class="mb-3">
          <div class="prismea-landingpage-category-label">
            <div class="prismea-landingpage-category-label-text">
              <p class="prismea-text -size-14 ">Lorem Ipsum</p>
            </div>
          </div>
        </div>
        <h3 class="prismea-text -size-18 -text-medium mb-5">Lorem ipsum dolor sit amet consectetur adipisicing elit</h3>
        <p class="prismea-text color-grey--700">Lorem ipsum dolor sit amet consectetur adipisicing elit. Culpa perspiciatis numquam consectetur vitae commodi similique exercitationem, lauda.</p>
      </div>
      <div class="article-card__footer flex flex-align-center flex-gap-4">
        <div class="avatar avatar--lg border-radius-rounded flex-no-shrink"><img class="avatar__image" src="https://images.unsplash.com/photo-1541298645675-6cc8e127934d"/>
        </div>
        <p class="prismea-text -size-12 color-grey--600"><span>Lorem ipsum dolor sit</span><span class="color-primary--500"> amet consectetur</span></p>
      </div>
    </div>
    <div class="article-card"><img class="article-card__image" src="https://placeimg.com/380/250/animals"/>
      <div class="article-card__body">
        <div class="mb-3">
          <div class="prismea-landingpage-category-label">
            <div class="prismea-landingpage-category-label-text">
              <p class="prismea-text -size-14 ">Lorem Ipsum</p>
            </div>
          </div>
        </div>
        <h3 class="prismea-text -size-18 -text-medium mb-5">Lorem ipsum dolor sit amet consectetur adipisicing elit</h3>
        <p class="prismea-text color-grey--700">Lorem ipsum dolor sit amet consectetur adipisicing elit. Culpa perspiciatis numquam consectetur vitae commodi similique exercitationem, lauda.</p>
      </div>
      <div class="article-card__footer flex flex-align-center flex-gap-4">
        <div class="avatar avatar--lg border-radius-rounded flex-no-shrink"><img class="avatar__image" src="https://images.unsplash.com/photo-1541298645675-6cc8e127934d"/>
        </div>
        <p class="prismea-text -size-12 color-grey--600"><span>Lorem ipsum dolor sit</span><span class="color-primary--500"> amet consectetur</span></p>
      </div>
    </div>
    <div class="article-card"><img class="article-card__image" src="https://placeimg.com/380/250/animals"/>
      <div class="article-card__body">
        <div class="mb-3">
          <div class="prismea-landingpage-category-label">
            <div class="prismea-landingpage-category-label-text">
              <p class="prismea-text -size-14 ">Lorem Ipsum</p>
            </div>
          </div>
        </div>
        <h3 class="prismea-text -size-18 -text-medium mb-5">Lorem ipsum dolor sit amet consectetur adipisicing elit</h3>
        <p class="prismea-text color-grey--700">Lorem ipsum dolor sit amet consectetur adipisicing elit. Culpa perspiciatis numquam consectetur vitae commodi similique exercitationem, lauda.</p>
      </div>
      <div class="article-card__footer flex flex-align-center flex-gap-4">
        <div class="avatar avatar--lg border-radius-rounded flex-no-shrink"><img class="avatar__image" src="https://images.unsplash.com/photo-1541298645675-6cc8e127934d"/>
        </div>
        <p class="prismea-text -size-12 color-grey--600"><span>Lorem ipsum dolor sit</span><span class="color-primary--500"> amet consectetur</span></p>
      </div>
    </div>
    <div class="article-card"><img class="article-card__image" src="https://placeimg.com/380/250/animals"/>
      <div class="article-card__body">
        <div class="mb-3">
          <div class="prismea-landingpage-category-label">
            <div class="prismea-landingpage-category-label-text">
              <p class="prismea-text -size-14 ">Lorem Ipsum</p>
            </div>
          </div>
        </div>
        <h3 class="prismea-text -size-18 -text-medium mb-5">Lorem ipsum dolor sit amet consectetur adipisicing elit</h3>
        <p class="prismea-text color-grey--700">Lorem ipsum dolor sit amet consectetur adipisicing elit. Culpa perspiciatis numquam consectetur vitae commodi similique exercitationem, lauda.</p>
      </div>
      <div class="article-card__footer flex flex-align-center flex-gap-4">
        <div class="avatar avatar--lg border-radius-rounded flex-no-shrink"><img class="avatar__image" src="https://images.unsplash.com/photo-1541298645675-6cc8e127934d"/>
        </div>
        <p class="prismea-text -size-12 color-grey--600"><span>Lorem ipsum dolor sit</span><span class="color-primary--500"> amet consectetur</span></p>
      </div>
    </div>
    <div class="article-card"><img class="article-card__image" src="https://placeimg.com/380/250/animals"/>
      <div class="article-card__body">
        <div class="mb-3">
          <div class="prismea-landingpage-category-label">
            <div class="prismea-landingpage-category-label-text">
              <p class="prismea-text -size-14 ">Lorem Ipsum</p>
            </div>
          </div>
        </div>
        <h3 class="prismea-text -size-18 -text-medium mb-5">Lorem ipsum dolor sit amet consectetur adipisicing elit</h3>
        <p class="prismea-text color-grey--700">Lorem ipsum dolor sit amet consectetur adipisicing elit. Culpa perspiciatis numquam consectetur vitae commodi similique exercitationem, lauda.</p>
      </div>
      <div class="article-card__footer flex flex-align-center flex-gap-4">
        <div class="avatar avatar--lg border-radius-rounded flex-no-shrink"><img class="avatar__image" src="https://images.unsplash.com/photo-1541298645675-6cc8e127934d"/>
        </div>
        <p class="prismea-text -size-12 color-grey--600"><span>Lorem ipsum dolor sit</span><span class="color-primary--500"> amet consectetur</span></p>
      </div>
    </div>
    <div class="article-card"><img class="article-card__image" src="https://placeimg.com/380/250/animals"/>
      <div class="article-card__body">
        <div class="mb-3">
          <div class="prismea-landingpage-category-label">
            <div class="prismea-landingpage-category-label-text">
              <p class="prismea-text -size-14 ">Lorem Ipsum</p>
            </div>
          </div>
        </div>
        <h3 class="prismea-text -size-18 -text-medium mb-5">Lorem ipsum dolor sit amet consectetur adipisicing elit</h3>
        <p class="prismea-text color-grey--700">Lorem ipsum dolor sit amet consectetur adipisicing elit. Culpa perspiciatis numquam consectetur vitae commodi similique exercitationem, lauda.</p>
      </div>
      <div class="article-card__footer flex flex-align-center flex-gap-4">
        <div class="avatar avatar--lg border-radius-rounded flex-no-shrink"><img class="avatar__image" src="https://images.unsplash.com/photo-1541298645675-6cc8e127934d"/>
        </div>
        <p class="prismea-text -size-12 color-grey--600"><span>Lorem ipsum dolor sit</span><span class="color-primary--500"> amet consectetur</span></p>
      </div>
    </div>
  </div>
</div>
<div class="block-articles-swiper">
  <h4 class="branding-title-4 color-grey--800 font-weight-medium mb-16 text-align-center">Lorem ipsum dolor sit amet
  </h4>
  <div class="prismea-fake-swiper">
    <div>
      <div class="article-card"><img class="article-card__image" src="https://placeimg.com/380/250/animals"/>
        <div class="article-card__body">
          <div class="mb-3">
            <div class="prismea-landingpage-category-label">
              <div class="prismea-landingpage-category-label-text">
                <p class="prismea-text -size-14 ">Lorem Ipsum</p>
              </div>
            </div>
          </div>
          <h3 class="prismea-text -size-18 -text-medium mb-5">Lorem ipsum dolor sit amet consectetur adipisicing elit</h3>
          <p class="prismea-text color-grey--700">Lorem ipsum dolor sit amet consectetur adipisicing elit. Culpa perspiciatis numquam consectetur vitae commodi similique exercitationem, lauda.</p>
        </div>
        <div class="article-card__footer flex flex-align-center flex-gap-4">
          <div class="avatar avatar--lg border-radius-rounded flex-no-shrink"><img class="avatar__image" src="https://images.unsplash.com/photo-1541298645675-6cc8e127934d"/>
          </div>
          <p class="prismea-text -size-12 color-grey--600"><span>Lorem ipsum dolor sit</span><span class="color-primary--500"> amet consectetur</span></p>
        </div>
      </div>
    </div>
    <div>
      <div class="article-card"><img class="article-card__image" src="https://placeimg.com/380/250/animals"/>
        <div class="article-card__body">
          <div class="mb-3">
            <div class="prismea-landingpage-category-label">
              <div class="prismea-landingpage-category-label-text">
                <p class="prismea-text -size-14 ">Lorem Ipsum</p>
              </div>
            </div>
          </div>
          <h3 class="prismea-text -size-18 -text-medium mb-5">Lorem ipsum dolor sit amet consectetur adipisicing elit</h3>
          <p class="prismea-text color-grey--700">Lorem ipsum dolor sit amet consectetur adipisicing elit. Culpa perspiciatis numquam consectetur vitae commodi similique exercitationem, lauda.</p>
        </div>
        <div class="article-card__footer flex flex-align-center flex-gap-4">
          <div class="avatar avatar--lg border-radius-rounded flex-no-shrink"><img class="avatar__image" src="https://images.unsplash.com/photo-1541298645675-6cc8e127934d"/>
          </div>
          <p class="prismea-text -size-12 color-grey--600"><span>Lorem ipsum dolor sit</span><span class="color-primary--500"> amet consectetur</span></p>
        </div>
      </div>
    </div>
    <div>
      <div class="article-card"><img class="article-card__image" src="https://placeimg.com/380/250/animals"/>
        <div class="article-card__body">
          <div class="mb-3">
            <div class="prismea-landingpage-category-label">
              <div class="prismea-landingpage-category-label-text">
                <p class="prismea-text -size-14 ">Lorem Ipsum</p>
              </div>
            </div>
          </div>
          <h3 class="prismea-text -size-18 -text-medium mb-5">Lorem ipsum dolor sit amet consectetur adipisicing elit</h3>
          <p class="prismea-text color-grey--700">Lorem ipsum dolor sit amet consectetur adipisicing elit. Culpa perspiciatis numquam consectetur vitae commodi similique exercitationem, lauda.</p>
        </div>
        <div class="article-card__footer flex flex-align-center flex-gap-4">
          <div class="avatar avatar--lg border-radius-rounded flex-no-shrink"><img class="avatar__image" src="https://images.unsplash.com/photo-1541298645675-6cc8e127934d"/>
          </div>
          <p class="prismea-text -size-12 color-grey--600"><span>Lorem ipsum dolor sit</span><span class="color-primary--500"> amet consectetur</span></p>
        </div>
      </div>
    </div>
  </div>
</div>
.prismea-content-container
  .block-articles
    .article-card
      img.article-card__image(src='https://placeimg.com/380/250/animals')
      .article-card__body
        .mb-3
          .prismea-landingpage-category-label
            .prismea-landingpage-category-label-text
              p.prismea-text.-size-14 Lorem Ipsum
        h3.prismea-text.-size-18.-text-medium.mb-5 Lorem ipsum dolor sit amet consectetur adipisicing elit
        p.prismea-text.color-grey--700 Lorem ipsum dolor sit amet consectetur adipisicing elit. Culpa perspiciatis numquam consectetur vitae commodi similique exercitationem, lauda.
      .article-card__footer.flex.flex-align-center.flex-gap-4
        .avatar.avatar--lg.border-radius-rounded.flex-no-shrink
          img.avatar__image(src='https://images.unsplash.com/photo-1541298645675-6cc8e127934d')
        p.prismea-text.-size-12.color-grey--600
          span Lorem ipsum dolor sit
          span.color-primary--500  amet consectetur
    .article-card
      img.article-card__image(src='https://placeimg.com/380/250/animals')
      .article-card__body
        .mb-3
          .prismea-landingpage-category-label
            .prismea-landingpage-category-label-text
              p.prismea-text.-size-14 Lorem Ipsum
        h3.prismea-text.-size-18.-text-medium.mb-5 Lorem ipsum dolor sit amet consectetur adipisicing elit
        p.prismea-text.color-grey--700 Lorem ipsum dolor sit amet consectetur adipisicing elit. Culpa perspiciatis numquam consectetur vitae commodi similique exercitationem, lauda.
      .article-card__footer.flex.flex-align-center.flex-gap-4
        .avatar.avatar--lg.border-radius-rounded.flex-no-shrink
          img.avatar__image(src='https://images.unsplash.com/photo-1541298645675-6cc8e127934d')
        p.prismea-text.-size-12.color-grey--600
          span Lorem ipsum dolor sit
          span.color-primary--500  amet consectetur
    .article-card
      img.article-card__image(src='https://placeimg.com/380/250/animals')
      .article-card__body
        .mb-3
          .prismea-landingpage-category-label
            .prismea-landingpage-category-label-text
              p.prismea-text.-size-14 Lorem Ipsum
        h3.prismea-text.-size-18.-text-medium.mb-5 Lorem ipsum dolor sit amet consectetur adipisicing elit
        p.prismea-text.color-grey--700 Lorem ipsum dolor sit amet consectetur adipisicing elit. Culpa perspiciatis numquam consectetur vitae commodi similique exercitationem, lauda.
      .article-card__footer.flex.flex-align-center.flex-gap-4
        .avatar.avatar--lg.border-radius-rounded.flex-no-shrink
          img.avatar__image(src='https://images.unsplash.com/photo-1541298645675-6cc8e127934d')
        p.prismea-text.-size-12.color-grey--600
          span Lorem ipsum dolor sit
          span.color-primary--500  amet consectetur
    .article-card
      img.article-card__image(src='https://placeimg.com/380/250/animals')
      .article-card__body
        .mb-3
          .prismea-landingpage-category-label
            .prismea-landingpage-category-label-text
              p.prismea-text.-size-14 Lorem Ipsum
        h3.prismea-text.-size-18.-text-medium.mb-5 Lorem ipsum dolor sit amet consectetur adipisicing elit
        p.prismea-text.color-grey--700 Lorem ipsum dolor sit amet consectetur adipisicing elit. Culpa perspiciatis numquam consectetur vitae commodi similique exercitationem, lauda.
      .article-card__footer.flex.flex-align-center.flex-gap-4
        .avatar.avatar--lg.border-radius-rounded.flex-no-shrink
          img.avatar__image(src='https://images.unsplash.com/photo-1541298645675-6cc8e127934d')
        p.prismea-text.-size-12.color-grey--600
          span Lorem ipsum dolor sit
          span.color-primary--500  amet consectetur
    .article-card
      img.article-card__image(src='https://placeimg.com/380/250/animals')
      .article-card__body
        .mb-3
          .prismea-landingpage-category-label
            .prismea-landingpage-category-label-text
              p.prismea-text.-size-14 Lorem Ipsum
        h3.prismea-text.-size-18.-text-medium.mb-5 Lorem ipsum dolor sit amet consectetur adipisicing elit
        p.prismea-text.color-grey--700 Lorem ipsum dolor sit amet consectetur adipisicing elit. Culpa perspiciatis numquam consectetur vitae commodi similique exercitationem, lauda.
      .article-card__footer.flex.flex-align-center.flex-gap-4
        .avatar.avatar--lg.border-radius-rounded.flex-no-shrink
          img.avatar__image(src='https://images.unsplash.com/photo-1541298645675-6cc8e127934d')
        p.prismea-text.-size-12.color-grey--600
          span Lorem ipsum dolor sit
          span.color-primary--500  amet consectetur
    .article-card
      img.article-card__image(src='https://placeimg.com/380/250/animals')
      .article-card__body
        .mb-3
          .prismea-landingpage-category-label
            .prismea-landingpage-category-label-text
              p.prismea-text.-size-14 Lorem Ipsum
        h3.prismea-text.-size-18.-text-medium.mb-5 Lorem ipsum dolor sit amet consectetur adipisicing elit
        p.prismea-text.color-grey--700 Lorem ipsum dolor sit amet consectetur adipisicing elit. Culpa perspiciatis numquam consectetur vitae commodi similique exercitationem, lauda.
      .article-card__footer.flex.flex-align-center.flex-gap-4
        .avatar.avatar--lg.border-radius-rounded.flex-no-shrink
          img.avatar__image(src='https://images.unsplash.com/photo-1541298645675-6cc8e127934d')
        p.prismea-text.-size-12.color-grey--600
          span Lorem ipsum dolor sit
          span.color-primary--500  amet consectetur
    .article-card
      img.article-card__image(src='https://placeimg.com/380/250/animals')
      .article-card__body
        .mb-3
          .prismea-landingpage-category-label
            .prismea-landingpage-category-label-text
              p.prismea-text.-size-14 Lorem Ipsum
        h3.prismea-text.-size-18.-text-medium.mb-5 Lorem ipsum dolor sit amet consectetur adipisicing elit
        p.prismea-text.color-grey--700 Lorem ipsum dolor sit amet consectetur adipisicing elit. Culpa perspiciatis numquam consectetur vitae commodi similique exercitationem, lauda.
      .article-card__footer.flex.flex-align-center.flex-gap-4
        .avatar.avatar--lg.border-radius-rounded.flex-no-shrink
          img.avatar__image(src='https://images.unsplash.com/photo-1541298645675-6cc8e127934d')
        p.prismea-text.-size-12.color-grey--600
          span Lorem ipsum dolor sit
          span.color-primary--500  amet consectetur
.block-articles-swiper
  h4.branding-title-4.color-grey--800.font-weight-medium.mb-16.text-align-center.
    Lorem ipsum dolor sit amet
    
  .prismea-fake-swiper
    div
      .article-card
        img.article-card__image(src='https://placeimg.com/380/250/animals')
        .article-card__body
          .mb-3
            .prismea-landingpage-category-label
              .prismea-landingpage-category-label-text
                p.prismea-text.-size-14 Lorem Ipsum
          h3.prismea-text.-size-18.-text-medium.mb-5 Lorem ipsum dolor sit amet consectetur adipisicing elit
          p.prismea-text.color-grey--700 Lorem ipsum dolor sit amet consectetur adipisicing elit. Culpa perspiciatis numquam consectetur vitae commodi similique exercitationem, lauda.
        .article-card__footer.flex.flex-align-center.flex-gap-4
          .avatar.avatar--lg.border-radius-rounded.flex-no-shrink
            img.avatar__image(src='https://images.unsplash.com/photo-1541298645675-6cc8e127934d')
          p.prismea-text.-size-12.color-grey--600
            span Lorem ipsum dolor sit
            span.color-primary--500  amet consectetur
    div
      .article-card
        img.article-card__image(src='https://placeimg.com/380/250/animals')
        .article-card__body
          .mb-3
            .prismea-landingpage-category-label
              .prismea-landingpage-category-label-text
                p.prismea-text.-size-14 Lorem Ipsum
          h3.prismea-text.-size-18.-text-medium.mb-5 Lorem ipsum dolor sit amet consectetur adipisicing elit
          p.prismea-text.color-grey--700 Lorem ipsum dolor sit amet consectetur adipisicing elit. Culpa perspiciatis numquam consectetur vitae commodi similique exercitationem, lauda.
        .article-card__footer.flex.flex-align-center.flex-gap-4
          .avatar.avatar--lg.border-radius-rounded.flex-no-shrink
            img.avatar__image(src='https://images.unsplash.com/photo-1541298645675-6cc8e127934d')
          p.prismea-text.-size-12.color-grey--600
            span Lorem ipsum dolor sit
            span.color-primary--500  amet consectetur
    div
      .article-card
        img.article-card__image(src='https://placeimg.com/380/250/animals')
        .article-card__body
          .mb-3
            .prismea-landingpage-category-label
              .prismea-landingpage-category-label-text
                p.prismea-text.-size-14 Lorem Ipsum
          h3.prismea-text.-size-18.-text-medium.mb-5 Lorem ipsum dolor sit amet consectetur adipisicing elit
          p.prismea-text.color-grey--700 Lorem ipsum dolor sit amet consectetur adipisicing elit. Culpa perspiciatis numquam consectetur vitae commodi similique exercitationem, lauda.
        .article-card__footer.flex.flex-align-center.flex-gap-4
          .avatar.avatar--lg.border-radius-rounded.flex-no-shrink
            img.avatar__image(src='https://images.unsplash.com/photo-1541298645675-6cc8e127934d')
          p.prismea-text.-size-12.color-grey--600
            span Lorem ipsum dolor sit
            span.color-primary--500  amet consectetur

Block Banner

<div class="prismea-content-container">
  <div class="block-banner">
    <div class="block-banner-header"><img src="https://placeimg.com/130/90/animals"/></div>
    <div class="block-banner-body">
      <h4 class="branding-title-4 color-white font-weight-medium mb-6 text-align-center">Lorem ipsum dolor sit amet
      </h4>
      <p class="prismea-text -size-16 prismea-color -color-white text-align-center">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque bibendum cursus ipsum, dictum consequat ipsum tempus quis. Nulla suscipit gravida ultricies. Ut nec felis at sapien condimentum faucibus. Pellentesque tempus nec est eu iaculis. (16px)</p>
    </div><img class="block-banner-illustration" src="/projects/landingpage/images/shape-double-trait--secondary.svg"/>
  </div>
</div>
.prismea-content-container
  .block-banner
    .block-banner-header
      img(src='https://placeimg.com/130/90/animals')
    .block-banner-body
      h4.branding-title-4.color-white.font-weight-medium.mb-6.text-align-center.
        Lorem ipsum dolor sit amet
        
      p.prismea-text.-size-16.prismea-color.-color-white.text-align-center Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque bibendum cursus ipsum, dictum consequat ipsum tempus quis. Nulla suscipit gravida ultricies. Ut nec felis at sapien condimentum faucibus. Pellentesque tempus nec est eu iaculis. (16px)
    img.block-banner-illustration(src='/projects/landingpage/images/shape-double-trait--secondary.svg')

Block Button

<div class="block-button">
  <div class="prismea-content-container">
    <div class="flex flex-justify-center flex-gap-5 flex-wrap">
      <a class="btn btn--lg btn--primary btn--responsive">Lorem ipsum</a>
      <a class="btn btn--lg btn--outlined btn--responsive">Lorem ipsum</a>
    </div>
  </div>
</div>
.block-button
  .prismea-content-container
    .flex.flex-justify-center.flex-gap-5.flex-wrap
      a.btn.btn--lg.btn--primary.btn--responsive Lorem ipsum
      a.btn.btn--lg.btn--outlined.btn--responsive Lorem ipsum

Block Carousel Video Testimonials

You can add pretitle, and title. For each testimonial, you can add profile picture, fullname, category, job, video link, and description.

<div class="block-carousel-video-testimonials">
  <div class="prismea-content-container">
    <div class="block-carousel-video-testimonials__header">
      <p class="branding-text-lg color-primary--500 text-transform-uppercase font-weight-bold mb-2">Pre title lorem</p>
      <h2 class="branding-title-3 font-weight-medium">Lorem ipsum title</h2>
    </div>
    <div class="block-carousel-video-testimonials__carousel-chevron">
      <div class="block-carousel-video-testimonials__carousel-chevron-left btn-icon--md">
        <svg class="icon-24 icon-color-primary--300">
          <use href="/svg/24x24/line/chevron-left.svg#chevron-left-line-24"></use>
        </svg>
      </div>
      <div class="block-carousel-video-testimonials__carousel-chevron-right btn-icon--md">
        <svg class="icon-24 icon-color-primary--300">
          <use href="/svg/24x24/line/chevron-right.svg#chevron-right-line-24"></use>
        </svg>
      </div>
    </div>
    <div class="block-carousel-video-testimonials__carousel">
      <div class="block-carousel-video-testimonials__carousel-video">
        <div class="block-carousel-video-testimonials__carousel-video-vignette"><img class="block-carousel-video-testimonials__carousel-video-vignette-profile" src="http://placeimg.com/750/1000/tech"/>
          <div class="block-carousel-video-testimonials__carousel-video-vignette-icon"><img src="/projects/landingpage/images/icn-play-video.svg"/></div>
        </div>
        <div class="block-carousel-video-testimonials__carousel-video-title branding-text-md">
          <p class="color-primary--500">Name user</p>
          <p>Type job</p>
        </div>
      </div>
      <div class="block-carousel-video-testimonials__carousel-video">
        <div class="block-carousel-video-testimonials__carousel-video-vignette"><img class="block-carousel-video-testimonials__carousel-video-vignette-profile" src="http://placeimg.com/750/1000/tech"/>
          <div class="block-carousel-video-testimonials__carousel-video-vignette-icon"><img src="/projects/landingpage/images/icn-play-video.svg"/></div>
        </div>
        <div class="block-carousel-video-testimonials__carousel-video-title branding-text-md">
          <p class="color-primary--500">Name user</p>
          <p>Type job</p>
        </div>
      </div>
      <div class="block-carousel-video-testimonials__carousel-video block-carousel-video-testimonials__carousel-video--active">
        <div class="block-carousel-video-testimonials__carousel-video-vignette"><img class="block-carousel-video-testimonials__carousel-video-vignette-profile" src="http://placeimg.com/750/1000/tech"/>
          <div class="block-carousel-video-testimonials__carousel-video-vignette-icon"><img src="/projects/landingpage/images/icn-play-video.svg"/></div>
        </div>
        <div class="block-carousel-video-testimonials__carousel-video-title branding-text-md">
          <p class="color-primary--500">Name user</p>
          <p>Type job</p>
        </div>
      </div>
      <div class="block-carousel-video-testimonials__carousel-video">
        <div class="block-carousel-video-testimonials__carousel-video-vignette"><img class="block-carousel-video-testimonials__carousel-video-vignette-profile" src="http://placeimg.com/750/1000/tech"/>
          <div class="block-carousel-video-testimonials__carousel-video-vignette-icon"><img src="/projects/landingpage/images/icn-play-video.svg"/></div>
        </div>
        <div class="block-carousel-video-testimonials__carousel-video-title branding-text-md">
          <p class="color-primary--500">Name user</p>
          <p>Type job</p>
        </div>
      </div>
      <div class="block-carousel-video-testimonials__carousel-video">
        <div class="block-carousel-video-testimonials__carousel-video-vignette"><img class="block-carousel-video-testimonials__carousel-video-vignette-profile" src="http://placeimg.com/750/1000/tech"/>
          <div class="block-carousel-video-testimonials__carousel-video-vignette-icon"><img src="/projects/landingpage/images/icn-play-video.svg"/></div>
        </div>
        <div class="block-carousel-video-testimonials__carousel-video-title branding-text-md">
          <p class="color-primary--500">Name user</p>
          <p>Type job</p>
        </div>
      </div>
    </div>
    <div class="block-carousel-video-testimonials__testimonial">
      <div class="block-carousel-video-testimonials__testimonial-profile"><img src="http://placeimg.com/750/1000/tech"/></div>
      <p class="block-carousel-video-testimonials__testimonial-title branding-text-md"><span>Name user,</span>Job name of user</p>
      <div class="block-carousel-video-testimonials__testimonial-description">Lorem ipsum dolor sit amet of Patrice Kahn, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
    </div>
  </div>
</div>
.block-carousel-video-testimonials
  .prismea-content-container
    .block-carousel-video-testimonials__header
      p.branding-text-lg.color-primary--500.text-transform-uppercase.font-weight-bold.mb-2 Pre title lorem
      h2.branding-title-3.font-weight-medium Lorem ipsum title
    .block-carousel-video-testimonials__carousel-chevron
      .block-carousel-video-testimonials__carousel-chevron-left.btn-icon--md
        svg.icon-24.icon-color-primary--300
          use(href='/svg/24x24/line/chevron-left.svg#chevron-left-line-24')
      .block-carousel-video-testimonials__carousel-chevron-right.btn-icon--md
        svg.icon-24.icon-color-primary--300
          use(href='/svg/24x24/line/chevron-right.svg#chevron-right-line-24')
    .block-carousel-video-testimonials__carousel
      .block-carousel-video-testimonials__carousel-video
        .block-carousel-video-testimonials__carousel-video-vignette
          img.block-carousel-video-testimonials__carousel-video-vignette-profile(src='http://placeimg.com/750/1000/tech')
          .block-carousel-video-testimonials__carousel-video-vignette-icon
            img(src='/projects/landingpage/images/icn-play-video.svg')
        .block-carousel-video-testimonials__carousel-video-title.branding-text-md
          p.color-primary--500 Name user
          p Type job
      .block-carousel-video-testimonials__carousel-video
        .block-carousel-video-testimonials__carousel-video-vignette
          img.block-carousel-video-testimonials__carousel-video-vignette-profile(src='http://placeimg.com/750/1000/tech')
          .block-carousel-video-testimonials__carousel-video-vignette-icon
            img(src='/projects/landingpage/images/icn-play-video.svg')
        .block-carousel-video-testimonials__carousel-video-title.branding-text-md
          p.color-primary--500 Name user
          p Type job
      .block-carousel-video-testimonials__carousel-video.block-carousel-video-testimonials__carousel-video--active
        .block-carousel-video-testimonials__carousel-video-vignette
          img.block-carousel-video-testimonials__carousel-video-vignette-profile(src='http://placeimg.com/750/1000/tech')
          .block-carousel-video-testimonials__carousel-video-vignette-icon
            img(src='/projects/landingpage/images/icn-play-video.svg')
        .block-carousel-video-testimonials__carousel-video-title.branding-text-md
          p.color-primary--500 Name user
          p Type job
      .block-carousel-video-testimonials__carousel-video
        .block-carousel-video-testimonials__carousel-video-vignette
          img.block-carousel-video-testimonials__carousel-video-vignette-profile(src='http://placeimg.com/750/1000/tech')
          .block-carousel-video-testimonials__carousel-video-vignette-icon
            img(src='/projects/landingpage/images/icn-play-video.svg')
        .block-carousel-video-testimonials__carousel-video-title.branding-text-md
          p.color-primary--500 Name user
          p Type job
      .block-carousel-video-testimonials__carousel-video
        .block-carousel-video-testimonials__carousel-video-vignette
          img.block-carousel-video-testimonials__carousel-video-vignette-profile(src='http://placeimg.com/750/1000/tech')
          .block-carousel-video-testimonials__carousel-video-vignette-icon
            img(src='/projects/landingpage/images/icn-play-video.svg')
        .block-carousel-video-testimonials__carousel-video-title.branding-text-md
          p.color-primary--500 Name user
          p Type job
    .block-carousel-video-testimonials__testimonial
      .block-carousel-video-testimonials__testimonial-profile
        img(src='http://placeimg.com/750/1000/tech')
      p.block-carousel-video-testimonials__testimonial-title.branding-text-md
        span Name user,
        | Job name of user
      .block-carousel-video-testimonials__testimonial-description Lorem ipsum dolor sit amet of Patrice Kahn, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Block Checklist

<div class="block-checklist -grey-100">
  <div class="prismea-content-container">
    <div class="block-checklist-content">
      <div class="block-checklist-head">
        <div class="separator w-full bg-color-primary--500 max-w-10 mx-auto"></div>
        <h4 class="branding-title-4 color-grey--800 font-weight-medium">
          Lorem
          ipsum
        </h4>
        <div class="separator w-full bg-color-primary--500 max-w-10 mx-auto"></div>
      </div>
      <div class="block-checklist-body">
        <ul class="checklist block-checklist-column">
          <li>
            <svg class="icon-16 icon-color-primary--300 mt-1 flex-no-shrink">
              <use href="/projects/landingpage/svg/16x16/bold/checklist.svg#checklist-bold-16"></use>
            </svg>
            <span class="branding-text color-grey--800 font-weight-medium mb-3">Lorem ipsum dolor sit amet
            </span>
          </li>
          <li>
            <svg class="icon-16 icon-color-primary--300 mt-1 flex-no-shrink">
              <use href="/projects/landingpage/svg/16x16/bold/checklist.svg#checklist-bold-16"></use>
            </svg>
            <span class="branding-text color-grey--800 font-weight-medium mb-3">Lorem ipsum dolor sit amet
            </span>
          </li>
          <li>
            <svg class="icon-16 icon-color-primary--300 mt-1 flex-no-shrink">
              <use href="/projects/landingpage/svg/16x16/bold/checklist.svg#checklist-bold-16"></use>
            </svg>
            <span class="branding-text color-grey--800 font-weight-medium mb-3">Lorem ipsum dolor sit amet
            </span>
          </li>
        </ul>
        <ul class="checklist block-checklist-column">
          <li>
            <svg class="icon-16 icon-color-primary--300 mt-1 flex-no-shrink">
              <use href="/projects/landingpage/svg/16x16/bold/checklist.svg#checklist-bold-16"></use>
            </svg>
            <span class="branding-text color-grey--800 font-weight-medium mb-3">Lorem ipsum dolor sit amet
            </span>
          </li>
          <li>
            <svg class="icon-16 icon-color-primary--300 mt-1 flex-no-shrink">
              <use href="/projects/landingpage/svg/16x16/bold/checklist.svg#checklist-bold-16"></use>
            </svg>
            <span class="branding-text color-grey--800 font-weight-medium mb-3">Lorem ipsum dolor sit amet
            </span>
          </li>
          <li>
            <svg class="icon-16 icon-color-primary--300 mt-1 flex-no-shrink">
              <use href="/projects/landingpage/svg/16x16/bold/checklist.svg#checklist-bold-16"></use>
            </svg>
            <span class="branding-text color-grey--800 font-weight-medium mb-3">Lorem ipsum dolor sit amet
            </span>
          </li>
        </ul>
      </div>
    </div>
  </div>
</div>
.block-checklist.-grey-100
  .prismea-content-container
    .block-checklist-content
      .block-checklist-head
        .separator.w-full.bg-color-primary--500.max-w-10.mx-auto
        h4.branding-title-4.color-grey--800.font-weight-medium.
          
          Lorem ipsum
          
        .separator.w-full.bg-color-primary--500.max-w-10.mx-auto
      .block-checklist-body
        ul.checklist.block-checklist-column
          li
            svg.icon-16.icon-color-primary--300.mt-1.flex-no-shrink
              use(href='/projects/landingpage/svg/16x16/bold/checklist.svg#checklist-bold-16')
            span.branding-text.color-grey--800.font-weight-medium.mb-3.
              Lorem ipsum dolor sit amet
              
          li
            svg.icon-16.icon-color-primary--300.mt-1.flex-no-shrink
              use(href='/projects/landingpage/svg/16x16/bold/checklist.svg#checklist-bold-16')
            span.branding-text.color-grey--800.font-weight-medium.mb-3.
              Lorem ipsum dolor sit amet
              
          li
            svg.icon-16.icon-color-primary--300.mt-1.flex-no-shrink
              use(href='/projects/landingpage/svg/16x16/bold/checklist.svg#checklist-bold-16')
            span.branding-text.color-grey--800.font-weight-medium.mb-3.
              Lorem ipsum dolor sit amet
              
        ul.checklist.block-checklist-column
          li
            svg.icon-16.icon-color-primary--300.mt-1.flex-no-shrink
              use(href='/projects/landingpage/svg/16x16/bold/checklist.svg#checklist-bold-16')
            span.branding-text.color-grey--800.font-weight-medium.mb-3.
              Lorem ipsum dolor sit amet
              
          li
            svg.icon-16.icon-color-primary--300.mt-1.flex-no-shrink
              use(href='/projects/landingpage/svg/16x16/bold/checklist.svg#checklist-bold-16')
            span.branding-text.color-grey--800.font-weight-medium.mb-3.
              Lorem ipsum dolor sit amet
              
          li
            svg.icon-16.icon-color-primary--300.mt-1.flex-no-shrink
              use(href='/projects/landingpage/svg/16x16/bold/checklist.svg#checklist-bold-16')
            span.branding-text.color-grey--800.font-weight-medium.mb-3.
              Lorem ipsum dolor sit amet
              

Block Contact

<div class="prismea-content-container">
  <div class="block-contact">
    <div class="block-contact-head">
      <h4 class="branding-title-4 color-grey--800 font-weight-medium"><span class="color-primary--500">Lorem</span>ipsum
      </h4>
    </div>
    <div class="block-contact-body">
      <div class="block-contact-body--item">
        <div class="avatar avatar--lg border-radius-rounded"><img class="avatar__image" src="https://images.unsplash.com/photo-1541298645675-6cc8e127934d"/>
        </div>
        <p class="prismea-text -size-18 text-bold color-primary--500">Lorem ipsum</p>
        <p class="text-bold">Lorem ipsum</p>
        <p>Lorem ipsum</p>
        <p>Lorem ipsum</p>
      </div>
      <div class="block-contact-body--item">
        <div class="avatar avatar--lg border-radius-rounded"><img class="avatar__image" src="https://images.unsplash.com/photo-1541298645675-6cc8e127934d"/>
        </div>
        <p class="prismea-text -size-18 text-bold color-primary--500">Lorem ipsum</p>
        <p class="text-bold">Lorem ipsum</p>
        <p>Lorem ipsum</p>
        <p>Lorem ipsum</p>
      </div>
    </div>
  </div>
</div>
.prismea-content-container
  .block-contact
    .block-contact-head
      h4.branding-title-4.color-grey--800.font-weight-medium
        span.color-primary--500 Lorem
        | ipsum

    .block-contact-body
      .block-contact-body--item
        .avatar.avatar--lg.border-radius-rounded
          img.avatar__image(src='https://images.unsplash.com/photo-1541298645675-6cc8e127934d')
        p.prismea-text.-size-18.text-bold.color-primary--500 Lorem ipsum
        p.text-bold Lorem ipsum
        p Lorem ipsum
        p Lorem ipsum
      .block-contact-body--item
        .avatar.avatar--lg.border-radius-rounded
          img.avatar__image(src='https://images.unsplash.com/photo-1541298645675-6cc8e127934d')
        p.prismea-text.-size-18.text-bold.color-primary--500 Lorem ipsum
        p.text-bold Lorem ipsum
        p Lorem ipsum
        p Lorem ipsum

Block Faq

<div class="prismea-content-container">
  <div class="block-faq">
    <div class="mt-16">
      <div class="flex flex-align-center flex-wrap flex-gap-4 mb-7">
        <svg class="icon-40 border-radius-4 bg-color-primary--500 icon-color-white">
          <use href="/svg/40x40/line/prismea.svg#prismea-line-40"></use>
        </svg>
        <p class="branding-text-xxl color-primary--500">Lorem ipsum dolor sit amet
        </p>
      </div>
      <p class="branding-text color-grey--700 mb-8">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rerum, eos ad quas odit minima distinctio beatae iure eligendi omnis quia, ducimus doloremque neque fuga voluptate id pariatur error! Alias, autem. Consequuntur totam et cum est, aliquid quia magnam minus autem nisi sapiente neque quisquam aperiam recusandae.
      </p>
      <div class="separator w-full bg-color-grey--400"></div>
    </div>
    <div class="mt-16">
      <div class="flex flex-align-center flex-wrap flex-gap-4 mb-7">
        <svg class="icon-40 border-radius-4 bg-color-primary--500 icon-color-white">
          <use href="/svg/40x40/line/prismea.svg#prismea-line-40"></use>
        </svg>
        <p class="branding-text-xxl color-primary--500">Lorem ipsum dolor sit amet
        </p>
      </div>
      <p class="branding-text color-grey--700 mb-8">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rerum, eos ad quas odit minima distinctio beatae iure eligendi omnis quia, ducimus doloremque neque fuga voluptate id pariatur error! Alias, autem. Consequuntur totam et cum est, aliquid quia magnam minus autem nisi sapiente neque quisquam aperiam recusandae.
      </p>
      <div class="separator w-full bg-color-grey--400"></div>
    </div>
  </div>
</div>
.prismea-content-container
  .block-faq
    .mt-16
      .flex.flex-align-center.flex-wrap.flex-gap-4.mb-7
        svg.icon-40.border-radius-4.bg-color-primary--500.icon-color-white
          use(href='/svg/40x40/line/prismea.svg#prismea-line-40')
        p.branding-text-xxl.color-primary--500.
          Lorem ipsum dolor sit amet
          
      p.branding-text.color-grey--700.mb-8.
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rerum, eos ad quas odit minima distinctio beatae iure eligendi omnis quia, ducimus doloremque neque fuga voluptate id pariatur error! Alias, autem. Consequuntur totam et cum est, aliquid quia magnam minus autem nisi sapiente neque quisquam aperiam recusandae.
        
      .separator.w-full.bg-color-grey--400
    .mt-16
      .flex.flex-align-center.flex-wrap.flex-gap-4.mb-7
        svg.icon-40.border-radius-4.bg-color-primary--500.icon-color-white
          use(href='/svg/40x40/line/prismea.svg#prismea-line-40')
        p.branding-text-xxl.color-primary--500.
          Lorem ipsum dolor sit amet
          
      p.branding-text.color-grey--700.mb-8.
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rerum, eos ad quas odit minima distinctio beatae iure eligendi omnis quia, ducimus doloremque neque fuga voluptate id pariatur error! Alias, autem. Consequuntur totam et cum est, aliquid quia magnam minus autem nisi sapiente neque quisquam aperiam recusandae.
        
      .separator.w-full.bg-color-grey--400

Block Features

<div class="prismea-content-container">
  <div class="block-features">
    <div class="block-features-header mb-11">
      <div class="mb-5"><img class="block-features-image" src="https://placeimg.com/460/319/animals"/></div>
      <div class="prismea-horizontal-spacing-20 -justify-middle -middle -responsive">
        <div class="prismea-horizontal-spacing-20--slot">
          <svg class="icon-40 icon-color-primary--500 bg-color-grey--800 border-radius-rounded">
            <use href="/svg/40x40/line/prismea.svg#prismea-line-40"></use>
          </svg>
        </div>
        <div class="prismea-horizontal-spacing-20--slot">
          <h3 class="branding-title-3 color-grey--800 font-weight-medium">Lorem ipsum dolor sit amet
          </h3>
        </div>
      </div>
    </div>
    <div class="prismea-fake-swiper">
      <div class="block-features-card">
        <svg class="icon-32 icon-color-primary--500">
          <use href="/svg/32x32/line/validate.svg#validate-line-32"></use>
        </svg>
        <p class="prismea-text mt-1 -text-multiline">Lorem ipsum dolor sit amet consectetur</p>
      </div>
      <div class="block-features-card">
        <svg class="icon-32 icon-color-primary--500">
          <use href="/svg/32x32/line/validate.svg#validate-line-32"></use>
        </svg>
        <p class="prismea-text mt-1 -text-multiline">Lorem ipsum dolor sit amet consectetur</p>
      </div>
      <div class="block-features-card">
        <svg class="icon-32 icon-color-primary--500">
          <use href="/svg/32x32/line/validate.svg#validate-line-32"></use>
        </svg>
        <p class="prismea-text mt-1 -text-multiline">Lorem ipsum dolor sit amet consectetur</p>
      </div>
      <div class="block-features-card">
        <svg class="icon-32 icon-color-primary--500">
          <use href="/svg/32x32/line/validate.svg#validate-line-32"></use>
        </svg>
        <p class="prismea-text mt-1 -text-multiline">Lorem ipsum dolor sit amet consectetur</p>
      </div>
      <div class="block-features-card">
        <svg class="icon-32 icon-color-primary--500">
          <use href="/svg/32x32/line/validate.svg#validate-line-32"></use>
        </svg>
        <p class="prismea-text mt-1 -text-multiline">Lorem ipsum dolor sit amet consectetur</p>
      </div>
    </div>
  </div>
</div>
.prismea-content-container
  .block-features
    .block-features-header.mb-11
      .mb-5
        img.block-features-image(src='https://placeimg.com/460/319/animals')
      .prismea-horizontal-spacing-20.-justify-middle.-middle.-responsive
        .prismea-horizontal-spacing-20--slot
          svg.icon-40.icon-color-primary--500.bg-color-grey--800.border-radius-rounded
            use(href='/svg/40x40/line/prismea.svg#prismea-line-40')
        .prismea-horizontal-spacing-20--slot
          h3.branding-title-3.color-grey--800.font-weight-medium.
            Lorem ipsum dolor sit amet
            
    .prismea-fake-swiper
      .block-features-card
        svg.icon-32.icon-color-primary--500
          use(href='/svg/32x32/line/validate.svg#validate-line-32')
        p.prismea-text.mt-1.-text-multiline Lorem ipsum dolor sit amet consectetur
      .block-features-card
        svg.icon-32.icon-color-primary--500
          use(href='/svg/32x32/line/validate.svg#validate-line-32')
        p.prismea-text.mt-1.-text-multiline Lorem ipsum dolor sit amet consectetur
      .block-features-card
        svg.icon-32.icon-color-primary--500
          use(href='/svg/32x32/line/validate.svg#validate-line-32')
        p.prismea-text.mt-1.-text-multiline Lorem ipsum dolor sit amet consectetur
      .block-features-card
        svg.icon-32.icon-color-primary--500
          use(href='/svg/32x32/line/validate.svg#validate-line-32')
        p.prismea-text.mt-1.-text-multiline Lorem ipsum dolor sit amet consectetur
      .block-features-card
        svg.icon-32.icon-color-primary--500
          use(href='/svg/32x32/line/validate.svg#validate-line-32')
        p.prismea-text.mt-1.-text-multiline Lorem ipsum dolor sit amet consectetur

Block Form

<div class="block-form">
  <div class="prismea-content-container">
    <div class="block-form__wrapper">
      <div class="block-form__text mb-6 min-w-100">
        <h1 class="branding-title-2 color-grey--800 font-weight-medium mb-9">
          Lorem ipsum dolor
          <span class="color-primary--500">sit consectetur</span>
        </h1>
        <p class="branding-text-lg color-grey--700 max-w-125">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Illum, dignissimos? Voluptates maiores dolorum impedit maxime? Lorem, ipsum dolor sit amet consectetur adipisicing elit. Illum, dignissimos?
        </p><img class="mx-auto mt-6" src="https://placeimg.com/440/480/animals"/>
      </div>
      <form class="block-form__form">
        <div class="flex flex-justify-center only-desktop">
          <svg class="icon-40 icon-color-primary--500 bg-color-grey--800 border-radius-rounded">
            <use href="/svg/40x40/line/prismea.svg#prismea-line-40"></use>
          </svg>
        </div>
        <p class="branding-text color-grey--800 font-weight-bold only-desktop text-align-center mt-6 mb-10">Lorem ipsum dolor sit amet
        </p>
        <div class="input mb-6">
          <label class="input__label" for="lastname">Lastname</label>
          <div class="input__container">
            <input type="text" id="lastname" placeholder="Input text goes here"/>
          </div>
        </div>
        <div class="input mb-6">
          <label class="input__label" for="firstname">Firstname</label>
          <div class="input__container">
            <input type="text" id="firstname" placeholder="Input text goes here"/>
          </div>
        </div>
        <div class="input mb-6">
          <label class="input__label" for="email">Email</label>
          <div class="input__container">
            <input type="text" id="email" placeholder="Input text goes here"/>
          </div>
        </div>
        <div class="input mb-6">
          <label class="input__label" for="company-name">Company Name</label>
          <div class="input__container">
            <input type="text" id="company-name" placeholder="Input text goes here"/>
          </div>
        </div>
        <div class="input mb-6">
          <label class="input__label" for="phone">Phone</label>
          <div class="input__container">
            <div class="input__dropdown-prefix select">
              <div class="select__input">
                <svg class="icon-32">
                  <use href="/svg/32x32/line/flag-FR.svg#flag-FR-line-32"></use>
                </svg>
              </div>
              <svg class="icon-16 icon-rotate-180 select__chevron mx-2">
                <use href="/svg/16x16/line/chevron-up.svg#chevron-up-line-16"></use>
              </svg>
              <div class="select__options">
                <div class="select__option">
                  <svg class="icon-32 mr-3">
                    <use href="/svg/32x32/line/flag-DE.svg#flag-DE-line-32"></use>
                  </svg><span>(+49) Allemagne</span>
                </div>
                <div class="select__option">
                  <svg class="icon-32 mr-3">
                    <use href="/svg/32x32/line/flag-BE.svg#flag-BE-line-32"></use>
                  </svg><span>(+32) Belgique</span>
                </div>
                <div class="select__option">
                  <svg class="icon-32 mr-3">
                    <use href="/svg/32x32/line/flag-ES.svg#flag-ES-line-32"></use>
                  </svg><span>(+34) Espagne</span>
                </div>
                <div class="select__option">
                  <svg class="icon-32 mr-3">
                    <use href="/svg/32x32/line/flag-US.svg#flag-US-line-32"></use>
                  </svg><span>(+1) États-Unis</span>
                </div>
                <div class="select__option select__option--active">
                  <svg class="icon-32 mr-3">
                    <use href="/svg/32x32/line/flag-FR.svg#flag-FR-line-32"></use>
                  </svg><span>(+33) France</span>
                </div>
                <div class="select__option">
                  <svg class="icon-32 mr-3">
                    <use href="/svg/32x32/line/flag-IT.svg#flag-IT-line-32"></use>
                  </svg><span>(+39) Italie</span>
                </div>
                <div class="select__option">
                  <svg class="icon-32 mr-3">
                    <use href="/svg/32x32/line/flag-EN.svg#flag-EN-line-32"></use>
                  </svg><span>(+44) Royaume-Uni</span>
                </div>
                <div class="select__option">
                  <svg class="icon-32 mr-3">
                    <use href="/svg/32x32/line/flag-SU.svg#flag-SU-line-32"></use>
                  </svg><span>(+41) Suisse</span>
                </div>
              </div>
            </div>
            <input type="text" id="phone" placeholder="+33 6 78 90 12 34"/>
          </div>
        </div>
        <a class="btn btn--lg btn--primary w-full mt-10">Lorem ipsum</a>
        <p class="branding-text-sm color-grey--500 mt-9 text-align-center">Lorem ipsum dolor sit amet consectetur adipisicing elit. Eos consectetur accusantium ullam voluptate hic nisi omnis porro voluptas ratione labore.
        </p>
      </form>
    </div>
  </div>
</div>
.block-form
  .prismea-content-container
    .block-form__wrapper
      .block-form__text.mb-6.min-w-100
        h1.branding-title-2.color-grey--800.font-weight-medium.mb-9
          | 
Lorem ipsum dolor

          span.color-primary--500 sit consectetur
        p.branding-text-lg.color-grey--700.max-w-125.
          Lorem, ipsum dolor sit amet consectetur adipisicing elit. Illum, dignissimos? Voluptates maiores dolorum impedit maxime? Lorem, ipsum dolor sit amet consectetur adipisicing elit. Illum, dignissimos?
          
        img.mx-auto.mt-6(src='https://placeimg.com/440/480/animals')
      form.block-form__form
        .flex.flex-justify-center.only-desktop
          svg.icon-40.icon-color-primary--500.bg-color-grey--800.border-radius-rounded
            use(href='/svg/40x40/line/prismea.svg#prismea-line-40')
        p.branding-text.color-grey--800.font-weight-bold.only-desktop.text-align-center.mt-6.mb-10.
          Lorem ipsum dolor sit amet
          
        .input.mb-6
          label.input__label(for='lastname') Lastname
          .input__container
            input#lastname(type='text', placeholder='Input text goes here')
        .input.mb-6
          label.input__label(for='firstname') Firstname
          .input__container
            input#firstname(type='text', placeholder='Input text goes here')
        .input.mb-6
          label.input__label(for='email') Email
          .input__container
            input#email(type='text', placeholder='Input text goes here')
        .input.mb-6
          label.input__label(for='company-name') Company Name
          .input__container
            input#company-name(type='text', placeholder='Input text goes here')
        .input.mb-6
          label.input__label(for='phone') Phone
          .input__container
            .input__dropdown-prefix.select
              .select__input
                svg.icon-32
                  use(href='/svg/32x32/line/flag-FR.svg#flag-FR-line-32')
              svg.icon-16.icon-rotate-180.select__chevron.mx-2
                use(href='/svg/16x16/line/chevron-up.svg#chevron-up-line-16')
              .select__options
                .select__option
                  svg.icon-32.mr-3
                    use(href='/svg/32x32/line/flag-DE.svg#flag-DE-line-32')
                  span (+49) Allemagne
                .select__option
                  svg.icon-32.mr-3
                    use(href='/svg/32x32/line/flag-BE.svg#flag-BE-line-32')
                  span (+32) Belgique
                .select__option
                  svg.icon-32.mr-3
                    use(href='/svg/32x32/line/flag-ES.svg#flag-ES-line-32')
                  span (+34) Espagne
                .select__option
                  svg.icon-32.mr-3
                    use(href='/svg/32x32/line/flag-US.svg#flag-US-line-32')
                  span (+1) États-Unis
                .select__option.select__option--active
                  svg.icon-32.mr-3
                    use(href='/svg/32x32/line/flag-FR.svg#flag-FR-line-32')
                  span (+33) France
                .select__option
                  svg.icon-32.mr-3
                    use(href='/svg/32x32/line/flag-IT.svg#flag-IT-line-32')
                  span (+39) Italie
                .select__option
                  svg.icon-32.mr-3
                    use(href='/svg/32x32/line/flag-EN.svg#flag-EN-line-32')
                  span (+44) Royaume-Uni
                .select__option
                  svg.icon-32.mr-3
                    use(href='/svg/32x32/line/flag-SU.svg#flag-SU-line-32')
                  span (+41) Suisse
            input#phone(type='text', placeholder='+33 6 78 90 12 34')
        a.btn.btn--lg.btn--primary.w-full.mt-10 Lorem ipsum
        p.branding-text-sm.color-grey--500.mt-9.text-align-center.
          Lorem ipsum dolor sit amet consectetur adipisicing elit. Eos consectetur accusantium ullam voluptate hic nisi omnis porro voluptas ratione labore.
          

Block Header Primary

<header class="block-header-primary">
  <div class="prismea-content-container">
    <div class="block-header-primary__wrapper">
      <div class="mb-7">
        <h1 class="branding-title-1 color-grey--800 font-weight-medium">
          Comment améliorer la
          <span class="color-primary--500">sit consectetur</span>
        </h1>
        <p class="branding-text-lg color-grey--700 block-header-primary__description-lg mt-10 max-w-125">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Illum, dignissimos? Voluptates maiores dolorum impedit maxime? Lorem, ipsum dolor sit amet consectetur adipisicing elit. Illum, dignissimos?
        </p>
        <p class="branding-text-lg color-grey--700 block-header-primary__description mt-5 max-w-125">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Illum, dignissimos? Voluptates maiores dolorum impedit maxime?
        </p>
        <div class="flex flex-gap-5 flex-wrap mt-13">
          <a class="btn btn--lg btn--primary btn--responsive">Lorem ipsum</a>
          <a class="btn btn--lg btn--outlined btn--responsive">Lorem ipsum</a>
        </div>
        <div class="block-header-primary__rating mt-13">
          <div class="rating">
            <div class="rating__score mb-1">4</div>
            <div class="rating__stars">
              <div class="rating__stars-off">
                <svg class="icon-16 icon-color-grey--800 rating__star">
                  <use href="/projects/landingpage/svg/16x16/bold/star.svg#star-bold-16"></use>
                </svg>
                <svg class="icon-16 icon-color-grey--800 rating__star">
                  <use href="/projects/landingpage/svg/16x16/bold/star.svg#star-bold-16"></use>
                </svg>
                <svg class="icon-16 icon-color-grey--800 rating__star">
                  <use href="/projects/landingpage/svg/16x16/bold/star.svg#star-bold-16"></use>
                </svg>
                <svg class="icon-16 icon-color-grey--800 rating__star">
                  <use href="/projects/landingpage/svg/16x16/bold/star.svg#star-bold-16"></use>
                </svg>
                <svg class="icon-16 icon-color-grey--800 rating__star">
                  <use href="/projects/landingpage/svg/16x16/bold/star.svg#star-bold-16"></use>
                </svg>
              </div>
              <div class="rating__stars-on" style="width: 80%;">
                <svg class="icon-16 icon-color-primary--500 rating__star">
                  <use href="/projects/landingpage/svg/16x16/bold/star.svg#star-bold-16"></use>
                </svg>
                <svg class="icon-16 icon-color-primary--500 rating__star">
                  <use href="/projects/landingpage/svg/16x16/bold/star.svg#star-bold-16"></use>
                </svg>
                <svg class="icon-16 icon-color-primary--500 rating__star">
                  <use href="/projects/landingpage/svg/16x16/bold/star.svg#star-bold-16"></use>
                </svg>
                <svg class="icon-16 icon-color-primary--500 rating__star">
                  <use href="/projects/landingpage/svg/16x16/bold/star.svg#star-bold-16"></use>
                </svg>
                <svg class="icon-16 icon-color-primary--500 rating__star">
                  <use href="/projects/landingpage/svg/16x16/bold/star.svg#star-bold-16"></use>
                </svg>
              </div>
            </div>
            <div class="rating__description color-grey--800 mt-1">Lorem ipusm</div>
          </div>
          <div class="rating">
            <div class="rating__score mb-1">4.3</div>
            <div class="rating__stars">
              <div class="rating__stars-off">
                <svg class="icon-16 icon-color-grey--800 rating__star">
                  <use href="/projects/landingpage/svg/16x16/bold/star.svg#star-bold-16"></use>
                </svg>
                <svg class="icon-16 icon-color-grey--800 rating__star">
                  <use href="/projects/landingpage/svg/16x16/bold/star.svg#star-bold-16"></use>
                </svg>
                <svg class="icon-16 icon-color-grey--800 rating__star">
                  <use href="/projects/landingpage/svg/16x16/bold/star.svg#star-bold-16"></use>
                </svg>
                <svg class="icon-16 icon-color-grey--800 rating__star">
                  <use href="/projects/landingpage/svg/16x16/bold/star.svg#star-bold-16"></use>
                </svg>
                <svg class="icon-16 icon-color-grey--800 rating__star">
                  <use href="/projects/landingpage/svg/16x16/bold/star.svg#star-bold-16"></use>
                </svg>
              </div>
              <div class="rating__stars-on" style="width: 86%;">
                <svg class="icon-16 icon-color-primary--500 rating__star">
                  <use href="/projects/landingpage/svg/16x16/bold/star.svg#star-bold-16"></use>
                </svg>
                <svg class="icon-16 icon-color-primary--500 rating__star">
                  <use href="/projects/landingpage/svg/16x16/bold/star.svg#star-bold-16"></use>
                </svg>
                <svg class="icon-16 icon-color-primary--500 rating__star">
                  <use href="/projects/landingpage/svg/16x16/bold/star.svg#star-bold-16"></use>
                </svg>
                <svg class="icon-16 icon-color-primary--500 rating__star">
                  <use href="/projects/landingpage/svg/16x16/bold/star.svg#star-bold-16"></use>
                </svg>
                <svg class="icon-16 icon-color-primary--500 rating__star">
                  <use href="/projects/landingpage/svg/16x16/bold/star.svg#star-bold-16"></use>
                </svg>
              </div>
            </div>
            <div class="rating__description color-grey--800 mt-1">Lorem ipusm</div>
          </div>
          <div class="rating">
            <div class="rating__score mb-1">4.8</div>
            <div class="rating__stars">
              <div class="rating__stars-off">
                <svg class="icon-16 icon-color-grey--800 rating__star">
                  <use href="/projects/landingpage/svg/16x16/bold/star.svg#star-bold-16"></use>
                </svg>
                <svg class="icon-16 icon-color-grey--800 rating__star">
                  <use href="/projects/landingpage/svg/16x16/bold/star.svg#star-bold-16"></use>
                </svg>
                <svg class="icon-16 icon-color-grey--800 rating__star">
                  <use href="/projects/landingpage/svg/16x16/bold/star.svg#star-bold-16"></use>
                </svg>
                <svg class="icon-16 icon-color-grey--800 rating__star">
                  <use href="/projects/landingpage/svg/16x16/bold/star.svg#star-bold-16"></use>
                </svg>
                <svg class="icon-16 icon-color-grey--800 rating__star">
                  <use href="/projects/landingpage/svg/16x16/bold/star.svg#star-bold-16"></use>
                </svg>
              </div>
              <div class="rating__stars-on" style="width: 96%;">
                <svg class="icon-16 icon-color-primary--500 rating__star">
                  <use href="/projects/landingpage/svg/16x16/bold/star.svg#star-bold-16"></use>
                </svg>
                <svg class="icon-16 icon-color-primary--500 rating__star">
                  <use href="/projects/landingpage/svg/16x16/bold/star.svg#star-bold-16"></use>
                </svg>
                <svg class="icon-16 icon-color-primary--500 rating__star">
                  <use href="/projects/landingpage/svg/16x16/bold/star.svg#star-bold-16"></use>
                </svg>
                <svg class="icon-16 icon-color-primary--500 rating__star">
                  <use href="/projects/landingpage/svg/16x16/bold/star.svg#star-bold-16"></use>
                </svg>
                <svg class="icon-16 icon-color-primary--500 rating__star">
                  <use href="/projects/landingpage/svg/16x16/bold/star.svg#star-bold-16"></use>
                </svg>
              </div>
            </div>
            <div class="rating__description color-grey--800 mt-1">Lorem ipusm</div>
          </div>
        </div>
      </div><img class="block-header-primary__image ma-auto" src="https://placeimg.com/400/500/animals"/>
    </div>
    <div class="block-header-primary__partners">
      <div class="prismea-fake-swiper"><img class="block-header-primary__partner" src="https://placeimg.com/40/35/animals"/><img class="block-header-primary__partner" src="https://placeimg.com/106/21/animals"/><img class="block-header-primary__partner" src="https://placeimg.com/96/21/animals"/><img class="block-header-primary__partner" src="https://placeimg.com/80/21/animals"/><img class="block-header-primary__partner" src="https://placeimg.com/95/20/animals"/><img class="block-header-primary__partner" src="https://placeimg.com/45/34/animals"/><img class="block-header-primary__partner" src="https://placeimg.com/35/33/animals"/><img class="block-header-primary__partner" src="https://placeimg.com/98/12/animals"/></div>
    </div>
  </div>
</header>
header.block-header-primary
  .prismea-content-container
    .block-header-primary__wrapper
      .mb-7
        h1.branding-title-1.color-grey--800.font-weight-medium
          | 
Comment améliorer la

          span.color-primary--500 sit consectetur
        p.branding-text-lg.color-grey--700.block-header-primary__description-lg.mt-10.max-w-125.
          Lorem, ipsum dolor sit amet consectetur adipisicing elit. Illum, dignissimos? Voluptates maiores dolorum impedit maxime? Lorem, ipsum dolor sit amet consectetur adipisicing elit. Illum, dignissimos?
          
        p.branding-text-lg.color-grey--700.block-header-primary__description.mt-5.max-w-125.
          Lorem, ipsum dolor sit amet consectetur adipisicing elit. Illum, dignissimos? Voluptates maiores dolorum impedit maxime?
          
        .flex.flex-gap-5.flex-wrap.mt-13
          a.btn.btn--lg.btn--primary.btn--responsive Lorem ipsum
          a.btn.btn--lg.btn--outlined.btn--responsive Lorem ipsum
        .block-header-primary__rating.mt-13
          .rating
            .rating__score.mb-1 4
            .rating__stars
              .rating__stars-off
                svg.icon-16.icon-color-grey--800.rating__star
                  use(href='/projects/landingpage/svg/16x16/bold/star.svg#star-bold-16')
                svg.icon-16.icon-color-grey--800.rating__star
                  use(href='/projects/landingpage/svg/16x16/bold/star.svg#star-bold-16')
                svg.icon-16.icon-color-grey--800.rating__star
                  use(href='/projects/landingpage/svg/16x16/bold/star.svg#star-bold-16')
                svg.icon-16.icon-color-grey--800.rating__star
                  use(href='/projects/landingpage/svg/16x16/bold/star.svg#star-bold-16')
                svg.icon-16.icon-color-grey--800.rating__star
                  use(href='/projects/landingpage/svg/16x16/bold/star.svg#star-bold-16')
              .rating__stars-on(style='width: 80%;')
                svg.icon-16.icon-color-primary--500.rating__star
                  use(href='/projects/landingpage/svg/16x16/bold/star.svg#star-bold-16')
                svg.icon-16.icon-color-primary--500.rating__star
                  use(href='/projects/landingpage/svg/16x16/bold/star.svg#star-bold-16')
                svg.icon-16.icon-color-primary--500.rating__star
                  use(href='/projects/landingpage/svg/16x16/bold/star.svg#star-bold-16')
                svg.icon-16.icon-color-primary--500.rating__star
                  use(href='/projects/landingpage/svg/16x16/bold/star.svg#star-bold-16')
                svg.icon-16.icon-color-primary--500.rating__star
                  use(href='/projects/landingpage/svg/16x16/bold/star.svg#star-bold-16')
            .rating__description.color-grey--800.mt-1 Lorem ipusm
          .rating
            .rating__score.mb-1 4.3
            .rating__stars
              .rating__stars-off
                svg.icon-16.icon-color-grey--800.rating__star
                  use(href='/projects/landingpage/svg/16x16/bold/star.svg#star-bold-16')
                svg.icon-16.icon-color-grey--800.rating__star
                  use(href='/projects/landingpage/svg/16x16/bold/star.svg#star-bold-16')
                svg.icon-16.icon-color-grey--800.rating__star
                  use(href='/projects/landingpage/svg/16x16/bold/star.svg#star-bold-16')
                svg.icon-16.icon-color-grey--800.rating__star
                  use(href='/projects/landingpage/svg/16x16/bold/star.svg#star-bold-16')
                svg.icon-16.icon-color-grey--800.rating__star
                  use(href='/projects/landingpage/svg/16x16/bold/star.svg#star-bold-16')
              .rating__stars-on(style='width: 86%;')
                svg.icon-16.icon-color-primary--500.rating__star
                  use(href='/projects/landingpage/svg/16x16/bold/star.svg#star-bold-16')
                svg.icon-16.icon-color-primary--500.rating__star
                  use(href='/projects/landingpage/svg/16x16/bold/star.svg#star-bold-16')
                svg.icon-16.icon-color-primary--500.rating__star
                  use(href='/projects/landingpage/svg/16x16/bold/star.svg#star-bold-16')
                svg.icon-16.icon-color-primary--500.rating__star
                  use(href='/projects/landingpage/svg/16x16/bold/star.svg#star-bold-16')
                svg.icon-16.icon-color-primary--500.rating__star
                  use(href='/projects/landingpage/svg/16x16/bold/star.svg#star-bold-16')
            .rating__description.color-grey--800.mt-1 Lorem ipusm
          .rating
            .rating__score.mb-1 4.8
            .rating__stars
              .rating__stars-off
                svg.icon-16.icon-color-grey--800.rating__star
                  use(href='/projects/landingpage/svg/16x16/bold/star.svg#star-bold-16')
                svg.icon-16.icon-color-grey--800.rating__star
                  use(href='/projects/landingpage/svg/16x16/bold/star.svg#star-bold-16')
                svg.icon-16.icon-color-grey--800.rating__star
                  use(href='/projects/landingpage/svg/16x16/bold/star.svg#star-bold-16')
                svg.icon-16.icon-color-grey--800.rating__star
                  use(href='/projects/landingpage/svg/16x16/bold/star.svg#star-bold-16')
                svg.icon-16.icon-color-grey--800.rating__star
                  use(href='/projects/landingpage/svg/16x16/bold/star.svg#star-bold-16')
              .rating__stars-on(style='width: 96%;')
                svg.icon-16.icon-color-primary--500.rating__star
                  use(href='/projects/landingpage/svg/16x16/bold/star.svg#star-bold-16')
                svg.icon-16.icon-color-primary--500.rating__star
                  use(href='/projects/landingpage/svg/16x16/bold/star.svg#star-bold-16')
                svg.icon-16.icon-color-primary--500.rating__star
                  use(href='/projects/landingpage/svg/16x16/bold/star.svg#star-bold-16')
                svg.icon-16.icon-color-primary--500.rating__star
                  use(href='/projects/landingpage/svg/16x16/bold/star.svg#star-bold-16')
                svg.icon-16.icon-color-primary--500.rating__star
                  use(href='/projects/landingpage/svg/16x16/bold/star.svg#star-bold-16')
            .rating__description.color-grey--800.mt-1 Lorem ipusm
      img.block-header-primary__image.ma-auto(src='https://placeimg.com/400/500/animals')
    .block-header-primary__partners
      .prismea-fake-swiper
        img.block-header-primary__partner(src='https://placeimg.com/40/35/animals')
        img.block-header-primary__partner(src='https://placeimg.com/106/21/animals')
        img.block-header-primary__partner(src='https://placeimg.com/96/21/animals')
        img.block-header-primary__partner(src='https://placeimg.com/80/21/animals')
        img.block-header-primary__partner(src='https://placeimg.com/95/20/animals')
        img.block-header-primary__partner(src='https://placeimg.com/45/34/animals')
        img.block-header-primary__partner(src='https://placeimg.com/35/33/animals')
        img.block-header-primary__partner(src='https://placeimg.com/98/12/animals')

Block Header Secondary

<header class="block-header-secondary">
  <div class="prismea-content-container">
    <div class="block-header-secondary__wrapper">
      <div class="mb-7">
        <h1 class="branding-title-1 color-grey--800 font-weight-medium">
          Comment améliorer la
          <span class="color-primary--500">sit consectetur</span>
        </h1>
        <p class="branding-text-lg color-grey--700 block-header-secondary__description-lg mt-10 max-w-125">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Illum, dignissimos? Voluptates maiores dolorum impedit maxime? Lorem, ipsum dolor sit amet consectetur adipisicing elit. Illum, dignissimos?
        </p>
        <p class="branding-text-lg color-grey--700 block-header-secondary__description mt-5 max-w-125">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Illum, dignissimos? Voluptates maiores dolorum impedit maxime?
        </p>
        <div class="flex flex-gap-5 flex-wrap mt-13">
          <a class="btn btn--lg btn--primary btn--responsive">Lorem ipsum</a>
          <a class="btn btn--lg btn--outlined btn--responsive">Lorem ipsum</a>
        </div>
        <div class="block-header-secondary__rating mt-13">
          <div class="rating">
            <div class="rating__score mb-1">4</div>
            <div class="rating__stars">
              <div class="rating__stars-off">
                <svg class="icon-16 icon-color-grey--800 rating__star">
                  <use href="/projects/landingpage/svg/16x16/bold/star.svg#star-bold-16"></use>
                </svg>
                <svg class="icon-16 icon-color-grey--800 rating__star">
                  <use href="/projects/landingpage/svg/16x16/bold/star.svg#star-bold-16"></use>
                </svg>
                <svg class="icon-16 icon-color-grey--800 rating__star">
                  <use href="/projects/landingpage/svg/16x16/bold/star.svg#star-bold-16"></use>
                </svg>
                <svg class="icon-16 icon-color-grey--800 rating__star">
                  <use href="/projects/landingpage/svg/16x16/bold/star.svg#star-bold-16"></use>
                </svg>
                <svg class="icon-16 icon-color-grey--800 rating__star">
                  <use href="/projects/landingpage/svg/16x16/bold/star.svg#star-bold-16"></use>
                </svg>
              </div>
              <div class="rating__stars-on" style="width: 80%;">
                <svg class="icon-16 icon-color-primary--500 rating__star">
                  <use href="/projects/landingpage/svg/16x16/bold/star.svg#star-bold-16"></use>
                </svg>
                <svg class="icon-16 icon-color-primary--500 rating__star">
                  <use href="/projects/landingpage/svg/16x16/bold/star.svg#star-bold-16"></use>
                </svg>
                <svg class="icon-16 icon-color-primary--500 rating__star">
                  <use href="/projects/landingpage/svg/16x16/bold/star.svg#star-bold-16"></use>
                </svg>
                <svg class="icon-16 icon-color-primary--500 rating__star">
                  <use href="/projects/landingpage/svg/16x16/bold/star.svg#star-bold-16"></use>
                </svg>
                <svg class="icon-16 icon-color-primary--500 rating__star">
                  <use href="/projects/landingpage/svg/16x16/bold/star.svg#star-bold-16"></use>
                </svg>
              </div>
            </div>
            <div class="rating__description color-grey--800 mt-1">Lorem ipusm</div>
          </div>
          <div class="rating">
            <div class="rating__score mb-1">4.3</div>
            <div class="rating__stars">
              <div class="rating__stars-off">
                <svg class="icon-16 icon-color-grey--800 rating__star">
                  <use href="/projects/landingpage/svg/16x16/bold/star.svg#star-bold-16"></use>
                </svg>
                <svg class="icon-16 icon-color-grey--800 rating__star">
                  <use href="/projects/landingpage/svg/16x16/bold/star.svg#star-bold-16"></use>
                </svg>
                <svg class="icon-16 icon-color-grey--800 rating__star">
                  <use href="/projects/landingpage/svg/16x16/bold/star.svg#star-bold-16"></use>
                </svg>
                <svg class="icon-16 icon-color-grey--800 rating__star">
                  <use href="/projects/landingpage/svg/16x16/bold/star.svg#star-bold-16"></use>
                </svg>
                <svg class="icon-16 icon-color-grey--800 rating__star">
                  <use href="/projects/landingpage/svg/16x16/bold/star.svg#star-bold-16"></use>
                </svg>
              </div>
              <div class="rating__stars-on" style="width: 86%;">
                <svg class="icon-16 icon-color-primary--500 rating__star">
                  <use href="/projects/landingpage/svg/16x16/bold/star.svg#star-bold-16"></use>
                </svg>
                <svg class="icon-16 icon-color-primary--500 rating__star">
                  <use href="/projects/landingpage/svg/16x16/bold/star.svg#star-bold-16"></use>
                </svg>
                <svg class="icon-16 icon-color-primary--500 rating__star">
                  <use href="/projects/landingpage/svg/16x16/bold/star.svg#star-bold-16"></use>
                </svg>
                <svg class="icon-16 icon-color-primary--500 rating__star">
                  <use href="/projects/landingpage/svg/16x16/bold/star.svg#star-bold-16"></use>
                </svg>
                <svg class="icon-16 icon-color-primary--500 rating__star">
                  <use href="/projects/landingpage/svg/16x16/bold/star.svg#star-bold-16"></use>
                </svg>
              </div>
            </div>
            <div class="rating__description color-grey--800 mt-1">Lorem ipusm</div>
          </div>
          <div class="rating">
            <div class="rating__score mb-1">4.8</div>
            <div class="rating__stars">
              <div class="rating__stars-off">
                <svg class="icon-16 icon-color-grey--800 rating__star">
                  <use href="/projects/landingpage/svg/16x16/bold/star.svg#star-bold-16"></use>
                </svg>
                <svg class="icon-16 icon-color-grey--800 rating__star">
                  <use href="/projects/landingpage/svg/16x16/bold/star.svg#star-bold-16"></use>
                </svg>
                <svg class="icon-16 icon-color-grey--800 rating__star">
                  <use href="/projects/landingpage/svg/16x16/bold/star.svg#star-bold-16"></use>
                </svg>
                <svg class="icon-16 icon-color-grey--800 rating__star">
                  <use href="/projects/landingpage/svg/16x16/bold/star.svg#star-bold-16"></use>
                </svg>
                <svg class="icon-16 icon-color-grey--800 rating__star">
                  <use href="/projects/landingpage/svg/16x16/bold/star.svg#star-bold-16"></use>
                </svg>
              </div>
              <div class="rating__stars-on" style="width: 96%;">
                <svg class="icon-16 icon-color-primary--500 rating__star">
                  <use href="/projects/landingpage/svg/16x16/bold/star.svg#star-bold-16"></use>
                </svg>
                <svg class="icon-16 icon-color-primary--500 rating__star">
                  <use href="/projects/landingpage/svg/16x16/bold/star.svg#star-bold-16"></use>
                </svg>
                <svg class="icon-16 icon-color-primary--500 rating__star">
                  <use href="/projects/landingpage/svg/16x16/bold/star.svg#star-bold-16"></use>
                </svg>
                <svg class="icon-16 icon-color-primary--500 rating__star">
                  <use href="/projects/landingpage/svg/16x16/bold/star.svg#star-bold-16"></use>
                </svg>
                <svg class="icon-16 icon-color-primary--500 rating__star">
                  <use href="/projects/landingpage/svg/16x16/bold/star.svg#star-bold-16"></use>
                </svg>
              </div>
            </div>
            <div class="rating__description color-grey--800 mt-1">Lorem ipusm</div>
          </div>
        </div>
      </div><img class="block-header-primary__image ma-auto" src="https://placeimg.com/300/450/animals"/>
    </div>
  </div>
</header>
header.block-header-secondary
  .prismea-content-container
    .block-header-secondary__wrapper
      .mb-7
        h1.branding-title-1.color-grey--800.font-weight-medium
          | 
Comment améliorer la

          span.color-primary--500 sit consectetur
        p.branding-text-lg.color-grey--700.block-header-secondary__description-lg.mt-10.max-w-125.
          Lorem, ipsum dolor sit amet consectetur adipisicing elit. Illum, dignissimos? Voluptates maiores dolorum impedit maxime? Lorem, ipsum dolor sit amet consectetur adipisicing elit. Illum, dignissimos?
          
        p.branding-text-lg.color-grey--700.block-header-secondary__description.mt-5.max-w-125.
          Lorem, ipsum dolor sit amet consectetur adipisicing elit. Illum, dignissimos? Voluptates maiores dolorum impedit maxime?
          
        .flex.flex-gap-5.flex-wrap.mt-13
          a.btn.btn--lg.btn--primary.btn--responsive Lorem ipsum
          a.btn.btn--lg.btn--outlined.btn--responsive Lorem ipsum
        .block-header-secondary__rating.mt-13
          .rating
            .rating__score.mb-1 4
            .rating__stars
              .rating__stars-off
                svg.icon-16.icon-color-grey--800.rating__star
                  use(href='/projects/landingpage/svg/16x16/bold/star.svg#star-bold-16')
                svg.icon-16.icon-color-grey--800.rating__star
                  use(href='/projects/landingpage/svg/16x16/bold/star.svg#star-bold-16')
                svg.icon-16.icon-color-grey--800.rating__star
                  use(href='/projects/landingpage/svg/16x16/bold/star.svg#star-bold-16')
                svg.icon-16.icon-color-grey--800.rating__star
                  use(href='/projects/landingpage/svg/16x16/bold/star.svg#star-bold-16')
                svg.icon-16.icon-color-grey--800.rating__star
                  use(href='/projects/landingpage/svg/16x16/bold/star.svg#star-bold-16')
              .rating__stars-on(style='width: 80%;')
                svg.icon-16.icon-color-primary--500.rating__star
                  use(href='/projects/landingpage/svg/16x16/bold/star.svg#star-bold-16')
                svg.icon-16.icon-color-primary--500.rating__star
                  use(href='/projects/landingpage/svg/16x16/bold/star.svg#star-bold-16')
                svg.icon-16.icon-color-primary--500.rating__star
                  use(href='/projects/landingpage/svg/16x16/bold/star.svg#star-bold-16')
                svg.icon-16.icon-color-primary--500.rating__star
                  use(href='/projects/landingpage/svg/16x16/bold/star.svg#star-bold-16')
                svg.icon-16.icon-color-primary--500.rating__star
                  use(href='/projects/landingpage/svg/16x16/bold/star.svg#star-bold-16')
            .rating__description.color-grey--800.mt-1 Lorem ipusm
          .rating
            .rating__score.mb-1 4.3
            .rating__stars
              .rating__stars-off
                svg.icon-16.icon-color-grey--800.rating__star
                  use(href='/projects/landingpage/svg/16x16/bold/star.svg#star-bold-16')
                svg.icon-16.icon-color-grey--800.rating__star
                  use(href='/projects/landingpage/svg/16x16/bold/star.svg#star-bold-16')
                svg.icon-16.icon-color-grey--800.rating__star
                  use(href='/projects/landingpage/svg/16x16/bold/star.svg#star-bold-16')
                svg.icon-16.icon-color-grey--800.rating__star
                  use(href='/projects/landingpage/svg/16x16/bold/star.svg#star-bold-16')
                svg.icon-16.icon-color-grey--800.rating__star
                  use(href='/projects/landingpage/svg/16x16/bold/star.svg#star-bold-16')
              .rating__stars-on(style='width: 86%;')
                svg.icon-16.icon-color-primary--500.rating__star
                  use(href='/projects/landingpage/svg/16x16/bold/star.svg#star-bold-16')
                svg.icon-16.icon-color-primary--500.rating__star
                  use(href='/projects/landingpage/svg/16x16/bold/star.svg#star-bold-16')
                svg.icon-16.icon-color-primary--500.rating__star
                  use(href='/projects/landingpage/svg/16x16/bold/star.svg#star-bold-16')
                svg.icon-16.icon-color-primary--500.rating__star
                  use(href='/projects/landingpage/svg/16x16/bold/star.svg#star-bold-16')
                svg.icon-16.icon-color-primary--500.rating__star
                  use(href='/projects/landingpage/svg/16x16/bold/star.svg#star-bold-16')
            .rating__description.color-grey--800.mt-1 Lorem ipusm
          .rating
            .rating__score.mb-1 4.8
            .rating__stars
              .rating__stars-off
                svg.icon-16.icon-color-grey--800.rating__star
                  use(href='/projects/landingpage/svg/16x16/bold/star.svg#star-bold-16')
                svg.icon-16.icon-color-grey--800.rating__star
                  use(href='/projects/landingpage/svg/16x16/bold/star.svg#star-bold-16')
                svg.icon-16.icon-color-grey--800.rating__star
                  use(href='/projects/landingpage/svg/16x16/bold/star.svg#star-bold-16')
                svg.icon-16.icon-color-grey--800.rating__star
                  use(href='/projects/landingpage/svg/16x16/bold/star.svg#star-bold-16')
                svg.icon-16.icon-color-grey--800.rating__star
                  use(href='/projects/landingpage/svg/16x16/bold/star.svg#star-bold-16')
              .rating__stars-on(style='width: 96%;')
                svg.icon-16.icon-color-primary--500.rating__star
                  use(href='/projects/landingpage/svg/16x16/bold/star.svg#star-bold-16')
                svg.icon-16.icon-color-primary--500.rating__star
                  use(href='/projects/landingpage/svg/16x16/bold/star.svg#star-bold-16')
                svg.icon-16.icon-color-primary--500.rating__star
                  use(href='/projects/landingpage/svg/16x16/bold/star.svg#star-bold-16')
                svg.icon-16.icon-color-primary--500.rating__star
                  use(href='/projects/landingpage/svg/16x16/bold/star.svg#star-bold-16')
                svg.icon-16.icon-color-primary--500.rating__star
                  use(href='/projects/landingpage/svg/16x16/bold/star.svg#star-bold-16')
            .rating__description.color-grey--800.mt-1 Lorem ipusm
      img.block-header-primary__image.ma-auto(src='https://placeimg.com/300/450/animals')

Block Header Tertiary

<header class="block-header-tertiary">
  <div class="prismea-content-container">
    <div class="flex flex-justify-center">
      <svg class="icon-40 border-radius-4 bg-color-primary--500 icon-color-white">
        <use href="/svg/40x40/line/prismea.svg#prismea-line-40"></use>
      </svg>
    </div>
    <h1 class="branding-title-4 color-grey--800 font-weight-medium mt-3 text-align-center">Lorem ipsum dolor sit amet
    </h1>
  </div>
</header>
header.block-header-tertiary
  .prismea-content-container
    .flex.flex-justify-center
      svg.icon-40.border-radius-4.bg-color-primary--500.icon-color-white
        use(href='/svg/40x40/line/prismea.svg#prismea-line-40')
    h1.branding-title-4.color-grey--800.font-weight-medium.mt-3.text-align-center.
      Lorem ipsum dolor sit amet
      

Block Horizontal Items

<div class="block-horizontal-items bg-color-primary--500 py-16 px-5 text-align-center">
  <div class="mt-8 only-desktop"></div>
  <h3 class="branding-title-3 color-white font-weight-medium mb-12">Lorem ipsum dolor sit amet
  </h3>
  <div class="flex flex-justify-center flex-wrap flex-gap-5">
    <div class="block-horizontal-items__card max-w-64 py-8 px-6 ba-color-primary--300 border-radius-8 shadow-branding">
      <p class="branding-title-4 color-white font-weight-medium font-weight-bold mb-3">Consectetur
      </p>
      <p class="branding-text-lg color-white font-weight-medium">Lorem ipsum dolor sit amet
      </p>
    </div>
    <div class="block-horizontal-items__card max-w-64 py-8 px-6 ba-color-primary--300 border-radius-8 shadow-branding">
      <p class="branding-title-4 color-white font-weight-medium font-weight-bold mb-3">Consectetur
      </p>
      <p class="branding-text-lg color-white font-weight-medium">Lorem ipsum dolor sit amet
      </p>
    </div>
    <div class="block-horizontal-items__card max-w-64 py-8 px-6 ba-color-primary--300 border-radius-8 shadow-branding">
      <p class="branding-title-4 color-white font-weight-medium font-weight-bold mb-3">Consectetur
      </p>
      <p class="branding-text-lg color-white font-weight-medium">Lorem ipsum dolor sit amet
      </p>
    </div>
    <div class="block-horizontal-items__card max-w-64 py-8 px-6 ba-color-primary--300 border-radius-8 shadow-branding">
      <p class="branding-title-4 color-white font-weight-medium font-weight-bold mb-3">Consectetur
      </p>
      <p class="branding-text-lg color-white font-weight-medium">Lorem ipsum dolor sit amet
      </p>
    </div>
    <div class="block-horizontal-items__card max-w-64 py-8 px-6 ba-color-primary--300 border-radius-8 shadow-branding">
      <p class="branding-title-4 color-white font-weight-medium font-weight-bold mb-3">Consectetur
      </p>
      <p class="branding-text-lg color-white font-weight-medium">Lorem ipsum dolor sit amet
      </p>
    </div>
  </div>
  <div class="mt-8 only-desktop"></div>
</div>
.block-horizontal-items.bg-color-primary--500.py-16.px-5.text-align-center
  .mt-8.only-desktop
  h3.branding-title-3.color-white.font-weight-medium.mb-12.
    Lorem ipsum dolor sit amet
    
  .flex.flex-justify-center.flex-wrap.flex-gap-5
    .block-horizontal-items__card.max-w-64.py-8.px-6.ba-color-primary--300.border-radius-8.shadow-branding
      p.branding-title-4.color-white.font-weight-medium.font-weight-bold.mb-3.
        Consectetur
        
      p.branding-text-lg.color-white.font-weight-medium.
        Lorem ipsum dolor sit amet
        
    .block-horizontal-items__card.max-w-64.py-8.px-6.ba-color-primary--300.border-radius-8.shadow-branding
      p.branding-title-4.color-white.font-weight-medium.font-weight-bold.mb-3.
        Consectetur
        
      p.branding-text-lg.color-white.font-weight-medium.
        Lorem ipsum dolor sit amet
        
    .block-horizontal-items__card.max-w-64.py-8.px-6.ba-color-primary--300.border-radius-8.shadow-branding
      p.branding-title-4.color-white.font-weight-medium.font-weight-bold.mb-3.
        Consectetur
        
      p.branding-text-lg.color-white.font-weight-medium.
        Lorem ipsum dolor sit amet
        
    .block-horizontal-items__card.max-w-64.py-8.px-6.ba-color-primary--300.border-radius-8.shadow-branding
      p.branding-title-4.color-white.font-weight-medium.font-weight-bold.mb-3.
        Consectetur
        
      p.branding-text-lg.color-white.font-weight-medium.
        Lorem ipsum dolor sit amet
        
    .block-horizontal-items__card.max-w-64.py-8.px-6.ba-color-primary--300.border-radius-8.shadow-branding
      p.branding-title-4.color-white.font-weight-medium.font-weight-bold.mb-3.
        Consectetur
        
      p.branding-text-lg.color-white.font-weight-medium.
        Lorem ipsum dolor sit amet
        
  .mt-8.only-desktop

Block Image

<div class="block-image">
  <div class="prismea-content-container"><img class="overflow-h border-radius-8" src="https://placeimg.com/1200/450/animals"/></div>
</div>
.block-image
  .prismea-content-container
    img.overflow-h.border-radius-8(src='https://placeimg.com/1200/450/animals')

Block Image Text

You can use the following variants :

  • Display or not a pre title
  • Display or not a tite
  • Display or not a rich text
  • Display or not a list item
  • Display or not one or two buttons
  • Display a motion or an image
  • Display or not an illustration at the bottom of the visual
  • Reverse image and text
  • Change the background color to primary--50 or grey--50
  • Make the image full
<div class="prismea-content-container">
  <div class="block-image-text border-radius-8 bg-color-grey--50 block-image-text--illustration">
    <div class="block-image-text__wrapper">
      <div class="block-image-text__text">
        <p class="branding-text-lg color-primary--500 text-transform-uppercase font-weight-bold mb-4">Lorem
        </p>
        <h3 class="branding-title-3 color-grey--800 font-weight-medium mb-18">Lorem ipsum dolor sit amet
        </h3>
        <div class="mb-18 wysiwyg">
          <p class="branding-text color-grey--700 my-4">Lorem ipsum dolor sit amet consectetur adipisicing elit. Eos consectetur accusantium ullam voluptate hic nisi omnis porro voluptas ratione labore.
          </p>
          <ul class="checklist my-10">
            <li>
              <svg class="icon-16 icon-color-primary--300 mt-1 flex-no-shrink">
                <use href="/projects/landingpage/svg/16x16/bold/checklist.svg#checklist-bold-16"></use>
              </svg>
              <span class="branding-text color-grey--800 font-weight-medium mb-3">Lorem ipsum dolor sit amet
              </span>
            </li>
            <li>
              <svg class="icon-16 icon-color-primary--300 mt-1 flex-no-shrink">
                <use href="/projects/landingpage/svg/16x16/bold/checklist.svg#checklist-bold-16"></use>
              </svg>
              <span class="branding-text color-grey--800 font-weight-medium mb-3">Lorem ipsum dolor sit amet
              </span>
            </li>
            <li>
              <svg class="icon-16 icon-color-primary--300 mt-1 flex-no-shrink">
                <use href="/projects/landingpage/svg/16x16/bold/checklist.svg#checklist-bold-16"></use>
              </svg>
              <span class="branding-text color-grey--800 font-weight-medium mb-3">Lorem ipsum dolor sit amet
              </span>
            </li>
          </ul>
        </div>
        <div class="flex flex-gap-5 flex-wrap block-image-text__buttons">
          <a class="btn btn--lg btn--outlined btn--responsive">Lorem ipsum</a>
          <a class="btn btn--lg btn--primary btn--responsive">Lorem ipsum</a>
        </div>
      </div>
      <div class="block-image-text__visuals max-w-105 w-full">
        <lottie-player class="block-image-text__visual w-full h-auto" src="https://assets8.lottiefiles.com/private_files/lf30_ljlt8fcv.json" background="transparent" loop="loop" autoplay="autoplay"></lottie-player><img class="block-image-text__illustration" src="/projects/landingpage/images/illustration.svg"/>
      </div>
    </div>
  </div>
</div>
<div class="prismea-content-container">
  <div class="block-image-text border-radius-8 bg-color-primary--50">
    <div class="block-image-text__wrapper block-image-text__wrapper--reverse">
      <div class="block-image-text__text">
        <p class="branding-text-lg color-primary--500 text-transform-uppercase font-weight-bold mb-4">Lorem
        </p>
        <h3 class="branding-title-3 color-grey--800 font-weight-medium mb-18">Lorem ipsum dolor sit amet
        </h3>
        <ul class="block-image-text__list mb-18">
          <li class="block-image-text__list-item mt-7">
            <div class="w-13 h-13 border-radius-8 flex flex-justify-center flex-align-center flex-no-shrink bg-color-grey--800">
              <svg class="icon-32 icon-color-primary--500">
                <use href="/svg/32x32/line/credit-card.svg#credit-card-line-32"></use>
              </svg>
            </div>
            <p class="branding-text color-grey--800 font-weight-medium my-auto">Lorem ipsum dolor sit amet consectetur adipisicing elit porro voluptas ratione labore.
            </p>
          </li>
          <li class="block-image-text__list-item mt-7">
            <div class="w-13 h-13 border-radius-8 flex flex-justify-center flex-align-center flex-no-shrink bg-color-grey--800">
              <svg class="icon-32 icon-color-primary--500">
                <use href="/svg/32x32/line/credit-card.svg#credit-card-line-32"></use>
              </svg>
            </div>
            <p class="branding-text color-grey--800 font-weight-medium my-auto">Lorem ipsum dolor sit amet consectetur adipisicing elit porro voluptas ratione labore.
            </p>
          </li>
          <li class="block-image-text__list-item mt-7">
            <div class="w-13 h-13 border-radius-8 flex flex-justify-center flex-align-center flex-no-shrink bg-color-grey--800">
              <svg class="icon-32 icon-color-primary--500">
                <use href="/svg/32x32/line/credit-card.svg#credit-card-line-32"></use>
              </svg>
            </div>
            <p class="branding-text color-grey--800 font-weight-medium my-auto">Lorem ipsum dolor sit amet consectetur adipisicing elit porro voluptas ratione labore.
            </p>
          </li>
        </ul>
        <div class="flex flex-gap-5 flex-wrap block-image-text__buttons">
          <a class="btn btn--lg btn--primary btn--responsive">Lorem ipsum</a>
          <a class="btn btn--lg btn--outlined btn--responsive">Lorem ipsum</a>
        </div>
      </div>
      <div class="block-image-text__visuals max-w-105 w-full"><img class="block-image-text__visual h-auto drop-shadow-branding" src="https://placeimg.com/410/470/animals"/>
      </div>
    </div>
  </div>
</div>
<div class="prismea-content-container">
  <div class="block-image-text border-radius-8 bg-color-primary--50 block-image-text--image-full">
    <div class="block-image-text__wrapper">
      <div class="block-image-text__text">
        <ul class="block-image-text__list mb-18">
          <li class="block-image-text__list-item mt-7">
            <div class="w-13 h-13 border-radius-8 flex flex-justify-center flex-align-center flex-no-shrink bg-color-grey--800">
              <svg class="icon-32 icon-color-primary--500">
                <use href="/svg/32x32/line/credit-card.svg#credit-card-line-32"></use>
              </svg>
            </div>
            <p class="branding-text color-grey--800 font-weight-medium my-auto">Lorem ipsum dolor sit amet consectetur adipisicing elit porro voluptas ratione labore.
            </p>
          </li>
          <li class="block-image-text__list-item mt-7">
            <div class="w-13 h-13 border-radius-8 flex flex-justify-center flex-align-center flex-no-shrink bg-color-grey--800">
              <svg class="icon-32 icon-color-primary--500">
                <use href="/svg/32x32/line/credit-card.svg#credit-card-line-32"></use>
              </svg>
            </div>
            <p class="branding-text color-grey--800 font-weight-medium my-auto">Lorem ipsum dolor sit amet consectetur adipisicing elit porro voluptas ratione labore.
            </p>
          </li>
          <li class="block-image-text__list-item mt-7">
            <div class="w-13 h-13 border-radius-8 flex flex-justify-center flex-align-center flex-no-shrink bg-color-grey--800">
              <svg class="icon-32 icon-color-primary--500">
                <use href="/svg/32x32/line/credit-card.svg#credit-card-line-32"></use>
              </svg>
            </div>
            <p class="branding-text color-grey--800 font-weight-medium my-auto">Lorem ipsum dolor sit amet consectetur adipisicing elit porro voluptas ratione labore.
            </p>
          </li>
        </ul>
      </div>
      <div class="block-image-text__visuals max-w-105 w-full"><img class="block-image-text__visual h-auto drop-shadow-branding" src="https://placeimg.com/410/470/animals"/>
      </div>
    </div>
  </div>
</div>
.prismea-content-container
  .block-image-text.border-radius-8.bg-color-grey--50.block-image-text--illustration
    .block-image-text__wrapper
      .block-image-text__text
        p.branding-text-lg.color-primary--500.text-transform-uppercase.font-weight-bold.mb-4.
          Lorem
          
        h3.branding-title-3.color-grey--800.font-weight-medium.mb-18.
          Lorem ipsum dolor sit amet
          
        .mb-18.wysiwyg
          p.branding-text.color-grey--700.my-4.
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Eos consectetur accusantium ullam voluptate hic nisi omnis porro voluptas ratione labore.
            
          ul.checklist.my-10
            li
              svg.icon-16.icon-color-primary--300.mt-1.flex-no-shrink
                use(href='/projects/landingpage/svg/16x16/bold/checklist.svg#checklist-bold-16')
              span.branding-text.color-grey--800.font-weight-medium.mb-3.
                Lorem ipsum dolor sit amet
                
            li
              svg.icon-16.icon-color-primary--300.mt-1.flex-no-shrink
                use(href='/projects/landingpage/svg/16x16/bold/checklist.svg#checklist-bold-16')
              span.branding-text.color-grey--800.font-weight-medium.mb-3.
                Lorem ipsum dolor sit amet
                
            li
              svg.icon-16.icon-color-primary--300.mt-1.flex-no-shrink
                use(href='/projects/landingpage/svg/16x16/bold/checklist.svg#checklist-bold-16')
              span.branding-text.color-grey--800.font-weight-medium.mb-3.
                Lorem ipsum dolor sit amet
                
        .flex.flex-gap-5.flex-wrap.block-image-text__buttons
          a.btn.btn--lg.btn--outlined.btn--responsive Lorem ipsum
          a.btn.btn--lg.btn--primary.btn--responsive Lorem ipsum
      .block-image-text__visuals.max-w-105.w-full
        lottie-player.block-image-text__visual.w-full.h-auto(src='https://assets8.lottiefiles.com/private_files/lf30_ljlt8fcv.json', background='transparent', loop, autoplay)
        img.block-image-text__illustration(src='/projects/landingpage/images/illustration.svg')
.prismea-content-container
  .block-image-text.border-radius-8.bg-color-primary--50
    .block-image-text__wrapper.block-image-text__wrapper--reverse
      .block-image-text__text
        p.branding-text-lg.color-primary--500.text-transform-uppercase.font-weight-bold.mb-4.
          Lorem
          
        h3.branding-title-3.color-grey--800.font-weight-medium.mb-18.
          Lorem ipsum dolor sit amet
          
        ul.block-image-text__list.mb-18
          li.block-image-text__list-item.mt-7
            .w-13.h-13.border-radius-8.flex.flex-justify-center.flex-align-center.flex-no-shrink.bg-color-grey--800
              svg.icon-32.icon-color-primary--500
                use(href='/svg/32x32/line/credit-card.svg#credit-card-line-32')
            p.branding-text.color-grey--800.font-weight-medium.my-auto.
              Lorem ipsum dolor sit amet consectetur adipisicing elit porro voluptas ratione labore.
              
          li.block-image-text__list-item.mt-7
            .w-13.h-13.border-radius-8.flex.flex-justify-center.flex-align-center.flex-no-shrink.bg-color-grey--800
              svg.icon-32.icon-color-primary--500
                use(href='/svg/32x32/line/credit-card.svg#credit-card-line-32')
            p.branding-text.color-grey--800.font-weight-medium.my-auto.
              Lorem ipsum dolor sit amet consectetur adipisicing elit porro voluptas ratione labore.
              
          li.block-image-text__list-item.mt-7
            .w-13.h-13.border-radius-8.flex.flex-justify-center.flex-align-center.flex-no-shrink.bg-color-grey--800
              svg.icon-32.icon-color-primary--500
                use(href='/svg/32x32/line/credit-card.svg#credit-card-line-32')
            p.branding-text.color-grey--800.font-weight-medium.my-auto.
              Lorem ipsum dolor sit amet consectetur adipisicing elit porro voluptas ratione labore.
              
        .flex.flex-gap-5.flex-wrap.block-image-text__buttons
          a.btn.btn--lg.btn--primary.btn--responsive Lorem ipsum
          a.btn.btn--lg.btn--outlined.btn--responsive Lorem ipsum
      .block-image-text__visuals.max-w-105.w-full
        img.block-image-text__visual.h-auto.drop-shadow-branding(src='https://placeimg.com/410/470/animals')
.prismea-content-container
  .block-image-text.border-radius-8.bg-color-primary--50.block-image-text--image-full
    .block-image-text__wrapper
      .block-image-text__text
        ul.block-image-text__list.mb-18
          li.block-image-text__list-item.mt-7
            .w-13.h-13.border-radius-8.flex.flex-justify-center.flex-align-center.flex-no-shrink.bg-color-grey--800
              svg.icon-32.icon-color-primary--500
                use(href='/svg/32x32/line/credit-card.svg#credit-card-line-32')
            p.branding-text.color-grey--800.font-weight-medium.my-auto.
              Lorem ipsum dolor sit amet consectetur adipisicing elit porro voluptas ratione labore.
              
          li.block-image-text__list-item.mt-7
            .w-13.h-13.border-radius-8.flex.flex-justify-center.flex-align-center.flex-no-shrink.bg-color-grey--800
              svg.icon-32.icon-color-primary--500
                use(href='/svg/32x32/line/credit-card.svg#credit-card-line-32')
            p.branding-text.color-grey--800.font-weight-medium.my-auto.
              Lorem ipsum dolor sit amet consectetur adipisicing elit porro voluptas ratione labore.
              
          li.block-image-text__list-item.mt-7
            .w-13.h-13.border-radius-8.flex.flex-justify-center.flex-align-center.flex-no-shrink.bg-color-grey--800
              svg.icon-32.icon-color-primary--500
                use(href='/svg/32x32/line/credit-card.svg#credit-card-line-32')
            p.branding-text.color-grey--800.font-weight-medium.my-auto.
              Lorem ipsum dolor sit amet consectetur adipisicing elit porro voluptas ratione labore.
              
      .block-image-text__visuals.max-w-105.w-full
        img.block-image-text__visual.h-auto.drop-shadow-branding(src='https://placeimg.com/410/470/animals')

Block Rating

<div class="block-rating">
  <div class="prismea-content-container">
    <div class="block-rating-body mb-6">
      <div class="block-rating-title">
        <p class="prismea-text -font-uppercase -size-14 prismea-color -color-grey-700 ">In gravida diam</p>
        <h4 class="branding-title-4 color-grey--800 font-weight-medium">Lorem ipsum dolor sit amet
        </h4>
      </div>
      <div class="block-rating-content">
        <div class="block-rating-content-store">
          <p class="prismea-text -size-22"><span class="prismea-text -size-36 prismea-color -color-primary-500">4.8</span>/5</p>
          <div class="block-rating-content-store-stars">
            <div class="block-rating-content-store-stars--off">★★★★★</div>
            <div class="block-rating-content-store-stars--on" style="width: 96%">★★★★★</div>
          </div>
          <div class="block-rating-content-store-name mt-4"><span class="prismea-text -size-14">Sur App Store</span></div>
        </div>
        <div class="block-rating-content-store">
          <p class="prismea-text -size-22"><span class="prismea-text -size-36 prismea-color -color-primary-500">4.4</span>/5</p>
          <div class="block-rating-content-store-stars">
            <div class="block-rating-content-store-stars--off">★★★★★</div>
            <div class="block-rating-content-store-stars--on" style="width: 88.00000000000001%">★★★★★</div>
          </div>
          <div class="block-rating-content-store-name mt-4"><span class="prismea-text -size-14">Sur Google Play</span></div>
        </div>
      </div>
    </div>
    <div class="separator w-full bg-color-grey--800"></div>
  </div>
</div>
.block-rating
  .prismea-content-container
    .block-rating-body.mb-6
      .block-rating-title
        p.prismea-text.-font-uppercase.-size-14.prismea-color.-color-grey-700 In gravida diam
        h4.branding-title-4.color-grey--800.font-weight-medium.
          Lorem ipsum dolor sit amet
          
      .block-rating-content
        .block-rating-content-store
          p.prismea-text.-size-22
            span.prismea-text.-size-36.prismea-color.-color-primary-500 4.8
            | /5
          .block-rating-content-store-stars
            .block-rating-content-store-stars--off ★★★★★
            .block-rating-content-store-stars--on(style='width: 96%') ★★★★★
          .block-rating-content-store-name.mt-4
            span.prismea-text.-size-14 Sur App Store
        .block-rating-content-store
          p.prismea-text.-size-22
            span.prismea-text.-size-36.prismea-color.-color-primary-500 4.4
            | /5
          .block-rating-content-store-stars
            .block-rating-content-store-stars--off ★★★★★
            .block-rating-content-store-stars--on(style='width: 88.00000000000001%') ★★★★★
          .block-rating-content-store-name.mt-4
            span.prismea-text.-size-14 Sur Google Play
    .separator.w-full.bg-color-grey--800

Block Press Releases

<div class="prismea-content-container">
  <div class="block-press-releases">
    <div class="press-release-card"><img class="press-release-card__image" src="https://placeimg.com/600/270/animals"/>
      <div class="press-release-card__body">
        <h3 class="prismea-text -size-20 -text-multiline mb-6"><span class="color-primary--500">Lorem ipsum</span>
          dolor sit amet consectetur adipisicing elit
        </h3><a class="prismea-text prismea-link">Lorem ipusm ></a>
      </div>
    </div>
    <div class="press-release-card"><img class="press-release-card__image" src="https://placeimg.com/600/270/animals"/>
      <div class="press-release-card__body">
        <h3 class="prismea-text -size-20 -text-multiline mb-6"><span class="color-primary--500">Lorem ipsum</span>
          dolor sit amet consectetur adipisicing elit
        </h3><a class="prismea-text prismea-link">Lorem ipusm ></a>
      </div>
    </div>
  </div>
</div>
.prismea-content-container
  .block-press-releases
    .press-release-card
      img.press-release-card__image(src='https://placeimg.com/600/270/animals')
      .press-release-card__body
        h3.prismea-text.-size-20.-text-multiline.mb-6
          span.color-primary--500 Lorem ipsum
          | 
dolor sit amet consectetur adipisicing elit

        a.prismea-text.prismea-link Lorem ipusm >
    .press-release-card
      img.press-release-card__image(src='https://placeimg.com/600/270/animals')
      .press-release-card__body
        h3.prismea-text.-size-20.-text-multiline.mb-6
          span.color-primary--500 Lorem ipsum
          | 
dolor sit amet consectetur adipisicing elit

        a.prismea-text.prismea-link Lorem ipusm >

Block Pricing

<div class="block-pricing">
  <div class="prismea-content-container">
    <div class="prismea-fake-swiper">
      <div class="pricing-card">
        <div class="pricing-card-header bg-color-primary--300">
          <p class="prismea-text -font-secondary -size-50 prismea-color -color-gunmetal -text-medium">29€</p>
          <p class="prismea-text -size-14 prismea-color -color-white -text-medium">Lorem ipsum dolor</p>
        </div>
        <div class="pricing-card-body">
          <p class="prismea-text -size-18 prismea-color -color-primary-500 -text-medium">Consectetur</p>
          <p class="prismea-text -size-30 prismea-color -color-gunmetal -text-medium -text-multiline">Lorem ipusm
dolor sit amet</p>
          <div class="prismea-vertical-spacing-25--slot"><img src="/projects/landingpage/images/shape-double-diagonal.svg"/></div>
          <div class="prismea-vertical-spacing-30--slot">
            <p class="prismea-text -size-18 prismea-vertical-spacing-5--slot -text-multiline">Praesentium illum
"accusamus"</p>
            <p class="prismea-text -size-14 prismea-color -color-grey-800 ">Lorem ipsum dolor sit amet consectetur adipisicing elit</p>
          </div>
          <ul class="prismea-vertical-spacing-30--slot">
            <li class="prismea-vertical-spacing-25--slot">
              <p class="prismea-text">Consequuntur neque</p>
            </li>
            <li class="prismea-vertical-spacing-25--slot">
              <p class="prismea-text">Expedita repellat unde</p>
            </li>
            <li class="prismea-vertical-spacing-25--slot">
              <p class="prismea-text">Minima totam atque! Eius illum nemo et</p>
            </li>
          </ul>
        </div>
        <div class="pricing-card-footer"><img src="https://placeimg.com/180/180/animals"/></div>
      </div>
      <div class="pricing-card">
        <div class="pricing-card-header bg-color-grey--800">
          <p class="prismea-text -font-secondary -size-50 prismea-color -color-primary-500 -text-medium">29€</p>
          <p class="prismea-text -size-14 prismea-color -color-white -text-medium">Lorem ipsum dolor</p>
        </div>
        <div class="pricing-card-body">
          <p class="prismea-text -size-18 prismea-color -color-primary-500 -text-medium">Consectetur</p>
          <p class="prismea-text -size-30 prismea-color -color-gunmetal -text-medium -text-multiline">Lorem ipusm
dolor sit amet</p>
          <div class="prismea-vertical-spacing-25--slot"><img src="/projects/landingpage/images/shape-double-diagonal.svg"/></div>
          <div class="prismea-vertical-spacing-30--slot">
            <p class="prismea-text -size-18 prismea-vertical-spacing-5--slot -text-multiline">Praesentium illum
"accusamus"</p>
            <p class="prismea-text -size-14 prismea-color -color-grey-800 ">Lorem ipsum dolor sit amet consectetur adipisicing elit</p>
          </div>
          <ul class="prismea-vertical-spacing-30--slot">
            <li class="prismea-vertical-spacing-25--slot">
              <p class="prismea-text">Consequuntur neque</p>
            </li>
            <li class="prismea-vertical-spacing-25--slot">
              <p class="prismea-text">Expedita repellat unde</p>
            </li>
            <li class="prismea-vertical-spacing-25--slot">
              <p class="prismea-text">Minima totam atque! Eius illum nemo et</p>
            </li>
          </ul>
        </div>
        <div class="pricing-card-footer"><img src="https://placeimg.com/180/180/animals"/></div>
      </div>
      <div class="pricing-card">
        <div class="pricing-card-header bg-color-primary--300">
          <p class="prismea-text -font-secondary -size-50 prismea-color -color-gunmetal -text-medium">29€</p>
          <p class="prismea-text -size-14 prismea-color -color-white -text-medium">Lorem ipsum dolor</p>
        </div>
        <div class="pricing-card-body">
          <p class="prismea-text -size-18 prismea-color -color-primary-500 -text-medium">Consectetur</p>
          <p class="prismea-text -size-30 prismea-color -color-gunmetal -text-medium -text-multiline">Lorem ipusm
dolor sit amet</p>
          <div class="prismea-vertical-spacing-25--slot"><img src="/projects/landingpage/images/shape-double-diagonal.svg"/></div>
          <div class="prismea-vertical-spacing-30--slot">
            <p class="prismea-text -size-18 prismea-vertical-spacing-5--slot -text-multiline">Praesentium illum
"accusamus"</p>
            <p class="prismea-text -size-14 prismea-color -color-grey-800 ">Lorem ipsum dolor sit amet consectetur adipisicing elit</p>
          </div>
          <ul class="prismea-vertical-spacing-30--slot">
            <li class="prismea-vertical-spacing-25--slot">
              <p class="prismea-text">Consequuntur neque</p>
            </li>
            <li class="prismea-vertical-spacing-25--slot">
              <p class="prismea-text">Expedita repellat unde</p>
            </li>
            <li class="prismea-vertical-spacing-25--slot">
              <p class="prismea-text">Minima totam atque! Eius illum nemo et</p>
            </li>
          </ul>
        </div>
        <div class="pricing-card-footer"><img src="https://placeimg.com/180/180/animals"/></div>
      </div>
    </div>
  </div>
</div>
.block-pricing
  .prismea-content-container
    .prismea-fake-swiper
      .pricing-card
        .pricing-card-header.bg-color-primary--300
          p.prismea-text.-font-secondary.-size-50.prismea-color.-color-gunmetal.-text-medium 29€
          p.prismea-text.-size-14.prismea-color.-color-white.-text-medium Lorem ipsum dolor
        .pricing-card-body
          p.prismea-text.-size-18.prismea-color.-color-primary-500.-text-medium Consectetur
          p.prismea-text.-size-30.prismea-color.-color-gunmetal.-text-medium.-text-multiline Lorem ipusm dolor sit amet
          .prismea-vertical-spacing-25--slot
            img(src='/projects/landingpage/images/shape-double-diagonal.svg')
          .prismea-vertical-spacing-30--slot
            p.prismea-text.-size-18.prismea-vertical-spacing-5--slot.-text-multiline Praesentium illum "accusamus"
            p.prismea-text.-size-14.prismea-color.-color-grey-800 Lorem ipsum dolor sit amet consectetur adipisicing elit
          ul.prismea-vertical-spacing-30--slot
            li.prismea-vertical-spacing-25--slot
              p.prismea-text Consequuntur neque
            li.prismea-vertical-spacing-25--slot
              p.prismea-text Expedita repellat unde
            li.prismea-vertical-spacing-25--slot
              p.prismea-text Minima totam atque! Eius illum nemo et
        .pricing-card-footer
          img(src='https://placeimg.com/180/180/animals')
      .pricing-card
        .pricing-card-header.bg-color-grey--800
          p.prismea-text.-font-secondary.-size-50.prismea-color.-color-primary-500.-text-medium 29€
          p.prismea-text.-size-14.prismea-color.-color-white.-text-medium Lorem ipsum dolor
        .pricing-card-body
          p.prismea-text.-size-18.prismea-color.-color-primary-500.-text-medium Consectetur
          p.prismea-text.-size-30.prismea-color.-color-gunmetal.-text-medium.-text-multiline Lorem ipusm dolor sit amet
          .prismea-vertical-spacing-25--slot
            img(src='/projects/landingpage/images/shape-double-diagonal.svg')
          .prismea-vertical-spacing-30--slot
            p.prismea-text.-size-18.prismea-vertical-spacing-5--slot.-text-multiline Praesentium illum "accusamus"
            p.prismea-text.-size-14.prismea-color.-color-grey-800 Lorem ipsum dolor sit amet consectetur adipisicing elit
          ul.prismea-vertical-spacing-30--slot
            li.prismea-vertical-spacing-25--slot
              p.prismea-text Consequuntur neque
            li.prismea-vertical-spacing-25--slot
              p.prismea-text Expedita repellat unde
            li.prismea-vertical-spacing-25--slot
              p.prismea-text Minima totam atque! Eius illum nemo et
        .pricing-card-footer
          img(src='https://placeimg.com/180/180/animals')
      .pricing-card
        .pricing-card-header.bg-color-primary--300
          p.prismea-text.-font-secondary.-size-50.prismea-color.-color-gunmetal.-text-medium 29€
          p.prismea-text.-size-14.prismea-color.-color-white.-text-medium Lorem ipsum dolor
        .pricing-card-body
          p.prismea-text.-size-18.prismea-color.-color-primary-500.-text-medium Consectetur
          p.prismea-text.-size-30.prismea-color.-color-gunmetal.-text-medium.-text-multiline Lorem ipusm dolor sit amet
          .prismea-vertical-spacing-25--slot
            img(src='/projects/landingpage/images/shape-double-diagonal.svg')
          .prismea-vertical-spacing-30--slot
            p.prismea-text.-size-18.prismea-vertical-spacing-5--slot.-text-multiline Praesentium illum "accusamus"
            p.prismea-text.-size-14.prismea-color.-color-grey-800 Lorem ipsum dolor sit amet consectetur adipisicing elit
          ul.prismea-vertical-spacing-30--slot
            li.prismea-vertical-spacing-25--slot
              p.prismea-text Consequuntur neque
            li.prismea-vertical-spacing-25--slot
              p.prismea-text Expedita repellat unde
            li.prismea-vertical-spacing-25--slot
              p.prismea-text Minima totam atque! Eius illum nemo et
        .pricing-card-footer
          img(src='https://placeimg.com/180/180/animals')

Block Services

<div class="block-services bg-color-primary--50">
  <div class="prismea-content-container">
    <div class="text-align-center block-services__title"><img class="mb-5" src="/projects/landingpage/images/symbol-barred-primary.svg"/>
      <h3 class="branding-title-3 color-grey--800 font-weight-medium"><span class="color-primary--500">Des services additionnels</span>
        à la carte
      </h3>
    </div>
    <div class="max-w-125 max-h-125 ma-auto block-services__diagram" style="margin-bottom: 12.7rem;">
      <svg viewBox="-1 -1 2 2">
        <g mask="url(#graph-mask)"><a>
            <path class="icon-color-primary--300" d="M 0 0 L 0 -1 A 1 1 0 0 1 0.9510565162951535 -0.3090169943749474 L 0 0"></path></a><a>
            <path class="icon-color-primary--100" d="M 0 0 L 0.9510565162951535 -0.3090169943749474 A 1 1 0 0 1 0.5877852522924731 0.8090169943749475 L 0 0"></path></a><a>
            <path class="icon-color-grey--800" d="M 0 0 L 0.5877852522924731 0.8090169943749475 A 1 1 0 0 1 -0.587785252292473 0.8090169943749475 L 0 0"></path></a><a>
            <path class="icon-color-primary--500" d="M 0 0 L -0.587785252292473 0.8090169943749475 A 1 1 0 0 1 -0.9510565162951536 -0.3090169943749473 L 0 0"></path></a><a>
            <path class="icon-color-white" d="M 0 0 L -0.9510565162951536 -0.3090169943749473 A 1 1 0 0 1 -1.8369701987210297e-16 -1 L 0 0"></path></a></g>
        <mask id="graph-mask">
          <rect fill="white" x="-1" y="-1" width="2" height="2"></rect>
          <circle r="0.4" fill="black"></circle>
          <line stroke="#000000" stroke-width="0.07" x1="0" y1="0" x2="0.9510565162951535" y2="-0.3090169943749474"></line>
          <line stroke="#000000" stroke-width="0.07" x1="0" y1="0" x2="0.5877852522924731" y2="0.8090169943749475"></line>
          <line stroke="#000000" stroke-width="0.07" x1="0" y1="0" x2="-0.587785252292473" y2="0.8090169943749475"></line>
          <line stroke="#000000" stroke-width="0.07" x1="0" y1="0" x2="-0.9510565162951536" y2="-0.3090169943749473"></line>
          <line stroke="#000000" stroke-width="0.07" x1="0" y1="0" x2="-1.8369701987210297e-16" y2="-1"></line>
        </mask>
        <g>
          <circle r="0.26" fill="#89C9C5"></circle>
          <path class="icon-color-grey--800" transform="translate(-1,-1)" fill-rule="evenodd" clip-rule="evenodd" d="M1.00014 0.907959H0.936523V1.10019H0.952431V0.972032H1.00015C1.00893 0.972032 1.01606 0.979206 1.01606 0.988056C1.01606 0.996899 1.00893 1.00407 1.00015 1.00407H0.984239V1.10019H1.00015V1.06815C1.04406 1.06815 1.07967 1.03229 1.07967 0.988056C1.07967 0.943821 1.04406 0.907959 1.00014 0.907959ZM1.00014 0.923975H0.952431V0.956016H1.00015C1.01771 0.956016 1.03196 0.970364 1.03196 0.988056C1.03196 1.00574 1.01771 1.02009 1.00014 1.02009V1.05213C1.03528 1.05213 1.06376 1.02344 1.06376 0.988056C1.06376 0.952663 1.03527 0.923975 1.00014 0.923975Z"></path>
        </g>
      </svg>
      <div class="block-services__icons w-full h-full">
        <svg class="icon-40 icon-color-primary--50 block-services__icon" style="left: 70.5725%; top: 21.6844%;">
          <use href="/svg/40x40/bold/wallet.svg#wallet-bold-40"></use>
        </svg>
        <svg class="icon-32 icon-color-primary--50 block-services__icon-xs" style="left: 70.5725%; top: 21.6844%;">
          <use href="/svg/32x32/bold/wallet.svg#wallet-bold-32"></use>
        </svg>
        <svg class="icon-40 icon-color-grey--800 block-services__icon" style="left: 83.287%; top: 60.8156%;">
          <use href="/svg/40x40/bold/capital.svg#capital-bold-40"></use>
        </svg>
        <svg class="icon-32 icon-color-grey--800 block-services__icon-xs" style="left: 83.287%; top: 60.8156%;">
          <use href="/svg/32x32/bold/capital.svg#capital-bold-32"></use>
        </svg>
        <svg class="icon-40 icon-color-primary--200 block-services__icon" style="left: 50%; top: 85%;">
          <use href="/svg/40x40/bold/loan.svg#loan-bold-40"></use>
        </svg>
        <svg class="icon-32 icon-color-primary--200 block-services__icon-xs" style="left: 50%; top: 85%;">
          <use href="/svg/32x32/bold/loan.svg#loan-bold-32"></use>
        </svg>
        <svg class="icon-40 icon-color-primary--100 block-services__icon" style="left: 16.713%; top: 60.8156%;">
          <use href="/svg/40x40/bold/headphone.svg#headphone-bold-40"></use>
        </svg>
        <svg class="icon-32 icon-color-primary--100 block-services__icon-xs" style="left: 16.713%; top: 60.8156%;">
          <use href="/svg/32x32/bold/headphone.svg#headphone-bold-32"></use>
        </svg>
        <svg class="icon-40 icon-color-grey--800 block-services__icon" style="left: 29.4275%; top: 21.6844%;">
          <use href="/svg/40x40/bold/user-group.svg#user-group-bold-40"></use>
        </svg>
        <svg class="icon-32 icon-color-grey--800 block-services__icon-xs" style="left: 29.4275%; top: 21.6844%;">
          <use href="/svg/32x32/bold/user-group.svg#user-group-bold-32"></use>
        </svg>
      </div>
      <div class="block-services__captions w-full h-full only-desktop">
        <div class="block-services__caption" style="top: 21.684405196876845%; left: 70.57248383023655%;">
          <div class="block-services__caption-line" style="width: calc(14.713758084881725rem + 6.5rem);"></div>
          <p class="branding-text-lg color-grey--700 block-services__caption-text font-weight-medium">Multicompte
          </p>
        </div>
        <div class="block-services__caption" style="top: 60.81559480312316%; left:83.28697807033036%;">
          <div class="block-services__caption-line" style="width: calc(8.356510964834818rem + 6.5rem);"></div>
          <p class="branding-text-lg color-grey--700 block-services__caption-text font-weight-medium">Centralisation de trésorerie entre holding et filialle (disponible prochainement)
          </p>
        </div>
        <div class="block-services__caption block-services__caption--center" style="top: 85%; left: 50%;">
          <div class="block-services__caption-line" style="height: calc(7.5rem + 5.5rem);"></div>
          <p class="branding-text-lg color-grey--700 block-services__caption-text font-weight-medium">Intégration avec les solutions de comptabilité (disponible prochainement)
          </p>
        </div>
        <div class="block-services__caption block-services__caption--left" style="top: 60.81559480312316%; right: calc(100% - 16.71302192966963%);">
          <div class="block-services__caption-line" style="width: calc(8.356510964834815rem + 6.5rem);"></div>
          <p class="branding-text-lg color-grey--700 block-services__caption-text font-weight-medium">Accompagnement par nos experts
          </p>
        </div>
        <div class="block-services__caption block-services__caption--left" style="top: 21.684405196876845%; right: calc(100% - 29.427516169763436%);">
          <div class="block-services__caption-line" style="width: calc(14.713758084881718rem + 6.5rem);"></div>
          <p class="branding-text-lg color-grey--700 block-services__caption-text font-weight-medium">Gestion avancée des droits d’accès
          </p>
        </div>
      </div>
    </div>
    <ul class="max-w-125 mt-13 mx-auto only-mobile">
      <li class="mt-6 flex flex-column-gap-4">
        <div class="w-8 h-8 border-radius-8 flex flex-justify-center flex-align-center flex-no-shrink bg-color-primary--300">
          <svg class="icon-24 icon-color-primary--50">
            <use href="/svg/24x24/bold/wallet.svg#wallet-bold-24"></use>
          </svg>
        </div>
        <p class="branding-text-md color-grey--700 font-weight-medium my-auto">Multicompte
        </p>
      </li>
      <li class="mt-6 flex flex-column-gap-4">
        <div class="w-8 h-8 border-radius-8 flex flex-justify-center flex-align-center flex-no-shrink bg-color-primary--100">
          <svg class="icon-24 icon-color-grey--800">
            <use href="/svg/24x24/bold/capital.svg#capital-bold-24"></use>
          </svg>
        </div>
        <p class="branding-text-md color-grey--700 font-weight-medium my-auto">Centralisation de trésorerie entre holding et filialle (disponible prochainement)
        </p>
      </li>
      <li class="mt-6 flex flex-column-gap-4">
        <div class="w-8 h-8 border-radius-8 flex flex-justify-center flex-align-center flex-no-shrink bg-color-grey--800">
          <svg class="icon-24 icon-color-primary--200">
            <use href="/svg/24x24/bold/loan.svg#loan-bold-24"></use>
          </svg>
        </div>
        <p class="branding-text-md color-grey--700 font-weight-medium my-auto">Intégration avec les solutions de comptabilité (disponible prochainement)
        </p>
      </li>
      <li class="mt-6 flex flex-column-gap-4">
        <div class="w-8 h-8 border-radius-8 flex flex-justify-center flex-align-center flex-no-shrink bg-color-primary--500">
          <svg class="icon-24 icon-color-primary--100">
            <use href="/svg/24x24/bold/headphone.svg#headphone-bold-24"></use>
          </svg>
        </div>
        <p class="branding-text-md color-grey--700 font-weight-medium my-auto">Accompagnement par nos experts
        </p>
      </li>
      <li class="mt-6 flex flex-column-gap-4">
        <div class="w-8 h-8 border-radius-8 flex flex-justify-center flex-align-center flex-no-shrink bg-color-white">
          <svg class="icon-24 icon-color-grey--800">
            <use href="/svg/24x24/bold/user-group.svg#user-group-bold-24"></use>
          </svg>
        </div>
        <p class="branding-text-md color-grey--700 font-weight-medium my-auto">Gestion avancée des droits d’accès
        </p>
      </li>
    </ul>
  </div>
</div>
.block-services.bg-color-primary--50
  .prismea-content-container
    .text-align-center.block-services__title
      img.mb-5(src='/projects/landingpage/images/symbol-barred-primary.svg')
      h3.branding-title-3.color-grey--800.font-weight-medium
        span.color-primary--500 Des services additionnels
        | 
à la carte

    .max-w-125.max-h-125.ma-auto.block-services__diagram(style='margin-bottom: 12.7rem;')
      svg(viewBox='-1 -1 2 2')
        g(mask='url(#graph-mask)')
          a
            path.icon-color-primary--300(d='M 0 0 L 0 -1 A 1 1 0 0 1 0.9510565162951535 -0.3090169943749474 L 0 0')
          a
            path.icon-color-primary--100(d='M 0 0 L 0.9510565162951535 -0.3090169943749474 A 1 1 0 0 1 0.5877852522924731 0.8090169943749475 L 0 0')
          a
            path.icon-color-grey--800(d='M 0 0 L 0.5877852522924731 0.8090169943749475 A 1 1 0 0 1 -0.587785252292473 0.8090169943749475 L 0 0')
          a
            path.icon-color-primary--500(d='M 0 0 L -0.587785252292473 0.8090169943749475 A 1 1 0 0 1 -0.9510565162951536 -0.3090169943749473 L 0 0')
          a
            path.icon-color-white(d='M 0 0 L -0.9510565162951536 -0.3090169943749473 A 1 1 0 0 1 -1.8369701987210297e-16 -1 L 0 0')
        mask#graph-mask
          rect(fill='white', x='-1', y='-1', width='2', height='2')
          circle(r='0.4', fill='black')
          line(stroke='#000000', stroke-width='0.07', x1='0', y1='0', x2='0.9510565162951535', y2='-0.3090169943749474')
          line(stroke='#000000', stroke-width='0.07', x1='0', y1='0', x2='0.5877852522924731', y2='0.8090169943749475')
          line(stroke='#000000', stroke-width='0.07', x1='0', y1='0', x2='-0.587785252292473', y2='0.8090169943749475')
          line(stroke='#000000', stroke-width='0.07', x1='0', y1='0', x2='-0.9510565162951536', y2='-0.3090169943749473')
          line(stroke='#000000', stroke-width='0.07', x1='0', y1='0', x2='-1.8369701987210297e-16', y2='-1')
        g
          circle(r='0.26', fill='#89C9C5')
          path.icon-color-grey--800(transform='translate(-1,-1)', fill-rule='evenodd', clip-rule='evenodd', d='M1.00014 0.907959H0.936523V1.10019H0.952431V0.972032H1.00015C1.00893 0.972032 1.01606 0.979206 1.01606 0.988056C1.01606 0.996899 1.00893 1.00407 1.00015 1.00407H0.984239V1.10019H1.00015V1.06815C1.04406 1.06815 1.07967 1.03229 1.07967 0.988056C1.07967 0.943821 1.04406 0.907959 1.00014 0.907959ZM1.00014 0.923975H0.952431V0.956016H1.00015C1.01771 0.956016 1.03196 0.970364 1.03196 0.988056C1.03196 1.00574 1.01771 1.02009 1.00014 1.02009V1.05213C1.03528 1.05213 1.06376 1.02344 1.06376 0.988056C1.06376 0.952663 1.03527 0.923975 1.00014 0.923975Z')
      .block-services__icons.w-full.h-full
        svg.icon-40.icon-color-primary--50.block-services__icon(style='left: 70.5725%; top: 21.6844%;')
          use(href='/svg/40x40/bold/wallet.svg#wallet-bold-40')
        svg.icon-32.icon-color-primary--50.block-services__icon-xs(style='left: 70.5725%; top: 21.6844%;')
          use(href='/svg/32x32/bold/wallet.svg#wallet-bold-32')
        svg.icon-40.icon-color-grey--800.block-services__icon(style='left: 83.287%; top: 60.8156%;')
          use(href='/svg/40x40/bold/capital.svg#capital-bold-40')
        svg.icon-32.icon-color-grey--800.block-services__icon-xs(style='left: 83.287%; top: 60.8156%;')
          use(href='/svg/32x32/bold/capital.svg#capital-bold-32')
        svg.icon-40.icon-color-primary--200.block-services__icon(style='left: 50%; top: 85%;')
          use(href='/svg/40x40/bold/loan.svg#loan-bold-40')
        svg.icon-32.icon-color-primary--200.block-services__icon-xs(style='left: 50%; top: 85%;')
          use(href='/svg/32x32/bold/loan.svg#loan-bold-32')
        svg.icon-40.icon-color-primary--100.block-services__icon(style='left: 16.713%; top: 60.8156%;')
          use(href='/svg/40x40/bold/headphone.svg#headphone-bold-40')
        svg.icon-32.icon-color-primary--100.block-services__icon-xs(style='left: 16.713%; top: 60.8156%;')
          use(href='/svg/32x32/bold/headphone.svg#headphone-bold-32')
        svg.icon-40.icon-color-grey--800.block-services__icon(style='left: 29.4275%; top: 21.6844%;')
          use(href='/svg/40x40/bold/user-group.svg#user-group-bold-40')
        svg.icon-32.icon-color-grey--800.block-services__icon-xs(style='left: 29.4275%; top: 21.6844%;')
          use(href='/svg/32x32/bold/user-group.svg#user-group-bold-32')
      .block-services__captions.w-full.h-full.only-desktop
        .block-services__caption(style='top: 21.684405196876845%; left: 70.57248383023655%;')
          .block-services__caption-line(style='width: calc(14.713758084881725rem + 6.5rem);')
          p.branding-text-lg.color-grey--700.block-services__caption-text.font-weight-medium.
            Multicompte
            
        .block-services__caption(style='top: 60.81559480312316%; left:83.28697807033036%;')
          .block-services__caption-line(style='width: calc(8.356510964834818rem + 6.5rem);')
          p.branding-text-lg.color-grey--700.block-services__caption-text.font-weight-medium.
            Centralisation de trésorerie entre holding et filialle (disponible prochainement)
            
        .block-services__caption.block-services__caption--center(style='top: 85%; left: 50%;')
          .block-services__caption-line(style='height: calc(7.5rem + 5.5rem);')
          p.branding-text-lg.color-grey--700.block-services__caption-text.font-weight-medium.
            Intégration avec les solutions de comptabilité (disponible prochainement)
            
        .block-services__caption.block-services__caption--left(style='top: 60.81559480312316%; right: calc(100% - 16.71302192966963%);')
          .block-services__caption-line(style='width: calc(8.356510964834815rem + 6.5rem);')
          p.branding-text-lg.color-grey--700.block-services__caption-text.font-weight-medium.
            Accompagnement par nos experts
            
        .block-services__caption.block-services__caption--left(style='top: 21.684405196876845%; right: calc(100% - 29.427516169763436%);')
          .block-services__caption-line(style='width: calc(14.713758084881718rem + 6.5rem);')
          p.branding-text-lg.color-grey--700.block-services__caption-text.font-weight-medium.
            Gestion avancée des droits d’accès
            
    ul.max-w-125.mt-13.mx-auto.only-mobile
      li.mt-6.flex.flex-column-gap-4
        .w-8.h-8.border-radius-8.flex.flex-justify-center.flex-align-center.flex-no-shrink.bg-color-primary--300
          svg.icon-24.icon-color-primary--50
            use(href='/svg/24x24/bold/wallet.svg#wallet-bold-24')
        p.branding-text-md.color-grey--700.font-weight-medium.my-auto.
          Multicompte
          
      li.mt-6.flex.flex-column-gap-4
        .w-8.h-8.border-radius-8.flex.flex-justify-center.flex-align-center.flex-no-shrink.bg-color-primary--100
          svg.icon-24.icon-color-grey--800
            use(href='/svg/24x24/bold/capital.svg#capital-bold-24')
        p.branding-text-md.color-grey--700.font-weight-medium.my-auto.
          Centralisation de trésorerie entre holding et filialle (disponible prochainement)
          
      li.mt-6.flex.flex-column-gap-4
        .w-8.h-8.border-radius-8.flex.flex-justify-center.flex-align-center.flex-no-shrink.bg-color-grey--800
          svg.icon-24.icon-color-primary--200
            use(href='/svg/24x24/bold/loan.svg#loan-bold-24')
        p.branding-text-md.color-grey--700.font-weight-medium.my-auto.
          Intégration avec les solutions de comptabilité (disponible prochainement)
          
      li.mt-6.flex.flex-column-gap-4
        .w-8.h-8.border-radius-8.flex.flex-justify-center.flex-align-center.flex-no-shrink.bg-color-primary--500
          svg.icon-24.icon-color-primary--100
            use(href='/svg/24x24/bold/headphone.svg#headphone-bold-24')
        p.branding-text-md.color-grey--700.font-weight-medium.my-auto.
          Accompagnement par nos experts
          
      li.mt-6.flex.flex-column-gap-4
        .w-8.h-8.border-radius-8.flex.flex-justify-center.flex-align-center.flex-no-shrink.bg-color-white
          svg.icon-24.icon-color-grey--800
            use(href='/svg/24x24/bold/user-group.svg#user-group-bold-24')
        p.branding-text-md.color-grey--700.font-weight-medium.my-auto.
          Gestion avancée des droits d’accès
          

Block Simple

You can use the following variants :

  • Display or not an icon
  • Display or not a title
  • Display or not a rich text
  • Display or not buttons
  • Display a color in the background: bg-color-primary--50, bg-color-grey--50
  • Change the alignment of each element
<div class="prismea-content-container">
  <div class="block-simple">
    <div class="flex mb-4 flex-justify-left">
      <svg class="icon-40 icon-color-primary--500 bg-color-grey--800 border-radius-8">
        <use href="/svg/40x40/line/prismea.svg#prismea-line-40"></use>
      </svg>
    </div>
    <h3 class="branding-title-3 color-grey--800 font-weight-medium mb-10 text-align-left">Lorem ipsum dolor sit amet
    </h3>
    <div class="my-7 wysiwyg color-grey--700 text-align-left">
      <h5 class="branding-text-xl color-grey--800 mt-5 mb-4">Lorem ipsum dolor sit amet
      </h5>
      <p class="branding-text color-grey--700 my-4">Lorem ipsum dolor sit amet consectetur adipisicing elit. Enim, recusandae laboriosam? Nulla deserunt dolores aliquam est omnis fuga quisquam ut qui ex commodi voluptates delectus qui
      </p>
    </div>
    <div class="flex flex-justify-center flex-gap-5 flex-wrap mt-10">
      <a class="btn btn--lg btn--primary btn--responsive">Lorem ipsum</a>
      <a class="btn btn--lg btn--outlined btn--responsive">Lorem ipsum</a>
    </div><img class="block-simple-illustration" src="/projects/landingpage/images/shape-double-trait.svg"/>
  </div>
</div>
<div class="prismea-content-container">
  <div class="block-simple bg-color-primary--50">
    <h3 class="branding-title-3 color-grey--800 font-weight-medium mb-10 text-align-center">Lorem ipsum dolor sit amet
    </h3>
    <div class="my-7 wysiwyg color-grey--700 text-align-center">
      <h5 class="branding-text-xl color-grey--800 mt-5 mb-4">Lorem ipsum dolor sit amet
      </h5>
      <p class="branding-text color-grey--700 my-4">Lorem ipsum dolor sit amet consectetur adipisicing elit. Enim, recusandae laboriosam? Nulla deserunt dolores aliquam est omnis fuga quisquam ut qui ex commodi voluptates delectus qui
      </p>
    </div><img class="block-simple-illustration" src="/projects/landingpage/images/shape-double-trait.svg"/>
  </div>
</div>
<div class="prismea-content-container">
  <div class="block-simple bg-color-grey--50">
    <h3 class="branding-title-3 color-grey--800 font-weight-medium mb-10 text-align-right">Lorem ipsum dolor sit amet
    </h3>
    <div class="my-7 wysiwyg color-grey--700 text-align-right">
      <h5 class="branding-text-xl color-grey--800 mt-5 mb-4">Lorem ipsum dolor sit amet
      </h5>
      <p class="branding-text color-grey--700 my-4">Lorem ipsum dolor sit amet consectetur adipisicing elit. Enim, recusandae laboriosam? Nulla deserunt dolores aliquam est omnis fuga quisquam ut qui ex commodi voluptates delectus qui
      </p>
    </div>
    <div class="flex flex-justify-center flex-gap-5 flex-wrap mt-10">
      <a class="btn btn--lg btn--primary btn--responsive">Lorem ipsum</a>
      <a class="btn btn--lg btn--outlined btn--responsive">Lorem ipsum</a>
    </div><img class="block-simple-illustration" src="/projects/landingpage/images/shape-double-trait.svg"/>
  </div>
</div>
.prismea-content-container
  .block-simple
    .flex.mb-4.flex-justify-left
      svg.icon-40.icon-color-primary--500.bg-color-grey--800.border-radius-8
        use(href='/svg/40x40/line/prismea.svg#prismea-line-40')
    h3.branding-title-3.color-grey--800.font-weight-medium.mb-10.text-align-left.
      Lorem ipsum dolor sit amet
      
    .my-7.wysiwyg.color-grey--700.text-align-left
      h5.branding-text-xl.color-grey--800.mt-5.mb-4.
        Lorem ipsum dolor sit amet
        
      p.branding-text.color-grey--700.my-4.
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Enim, recusandae laboriosam? Nulla deserunt dolores aliquam est omnis fuga quisquam ut qui ex commodi voluptates delectus qui
        
    .flex.flex-justify-center.flex-gap-5.flex-wrap.mt-10
      a.btn.btn--lg.btn--primary.btn--responsive Lorem ipsum
      a.btn.btn--lg.btn--outlined.btn--responsive Lorem ipsum
    img.block-simple-illustration(src='/projects/landingpage/images/shape-double-trait.svg')
.prismea-content-container
  .block-simple.bg-color-primary--50
    h3.branding-title-3.color-grey--800.font-weight-medium.mb-10.text-align-center.
      Lorem ipsum dolor sit amet
      
    .my-7.wysiwyg.color-grey--700.text-align-center
      h5.branding-text-xl.color-grey--800.mt-5.mb-4.
        Lorem ipsum dolor sit amet
        
      p.branding-text.color-grey--700.my-4.
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Enim, recusandae laboriosam? Nulla deserunt dolores aliquam est omnis fuga quisquam ut qui ex commodi voluptates delectus qui
        
    img.block-simple-illustration(src='/projects/landingpage/images/shape-double-trait.svg')
.prismea-content-container
  .block-simple.bg-color-grey--50
    h3.branding-title-3.color-grey--800.font-weight-medium.mb-10.text-align-right.
      Lorem ipsum dolor sit amet
      
    .my-7.wysiwyg.color-grey--700.text-align-right
      h5.branding-text-xl.color-grey--800.mt-5.mb-4.
        Lorem ipsum dolor sit amet
        
      p.branding-text.color-grey--700.my-4.
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Enim, recusandae laboriosam? Nulla deserunt dolores aliquam est omnis fuga quisquam ut qui ex commodi voluptates delectus qui
        
    .flex.flex-justify-center.flex-gap-5.flex-wrap.mt-10
      a.btn.btn--lg.btn--primary.btn--responsive Lorem ipsum
      a.btn.btn--lg.btn--outlined.btn--responsive Lorem ipsum
    img.block-simple-illustration(src='/projects/landingpage/images/shape-double-trait.svg')

Block Solutions

<div class="prismea-content-container">
  <div class="block-solutions flex flex-gap-7 flex-justify-center flex-wrap">
    <div class="solution-card max-w-92 border-radius-8 ba-color-primary--300 bg-color-white shadow-branding text-align-center flex flex-column flex-justify-space-between">
      <div class="solution-card__icon flex flex-justify-center flex-align-center bg-color-grey--800 border-radius-8">
        <svg class="icon-40 icon-color-primary--300">
          <use href="/svg/40x40/line/chart-bar-line.svg#chart-bar-line-line-40"></use>
        </svg>
      </div>
      <div>
        <p class="branding-title-3 color-grey--800 font-weight-bold">Consectetur
        </p>
        <div class="mb-8 only-desktop"></div>
        <div class="separator w-full bg-color-grey--300 max-w-40 mx-auto my-6"></div>
        <div class="mt-8 only-desktop"></div>
        <p class="branding-text color-grey--700 font-weight-medium mb-6">Lorem ipsum dolor sit amet consectetur adipisicing elit. Iusto molestiae rem tenetur earum ipsa aliquid ex in cum non nesciunt.
        </p>
        <div class="separator w-full bg-color-grey--300 max-w-40 mx-auto mt-8 mb-11 only-desktop"></div>
      </div>
      <div>
        <lottie-player class="w-full max-h-64 h-auto overflow-h" src="https://assets8.lottiefiles.com/private_files/lf30_ljlt8fcv.json" background="transparent" speed="1" loop="loop" autoplay="autoplay"></lottie-player>
        <div class="mt-8 only-desktop"></div><a class="flex flex-align-center flex-justify-center flex-gap-1 mt-6">
          <span class="branding-text color-primary--500 font-weight-bold hover-color-primary--700">Lorem ipsum
          </span>
          <svg class="icon-16 icon-rotate-90 icon-color-grey--800">
            <use href="/svg/16x16/line/chevron-up.svg#chevron-up-line-16"></use>
          </svg></a>
      </div>
    </div>
    <div class="solution-card max-w-92 border-radius-8 ba-color-primary--300 bg-color-white shadow-branding text-align-center flex flex-column flex-justify-space-between">
      <div class="solution-card__icon flex flex-justify-center flex-align-center bg-color-grey--800 border-radius-8">
        <svg class="icon-40 icon-color-primary--300">
          <use href="/svg/40x40/line/chart-bar-line.svg#chart-bar-line-line-40"></use>
        </svg>
      </div>
      <div>
        <p class="branding-title-3 color-grey--800 font-weight-bold">Consectetur
        </p>
        <div class="mb-8 only-desktop"></div>
        <div class="separator w-full bg-color-grey--300 max-w-40 mx-auto my-6"></div>
        <div class="mt-8 only-desktop"></div>
        <p class="branding-text color-grey--700 font-weight-medium mb-6">Lorem ipsum dolor sit amet consectetur adipisicing elit. Iusto molestiae rem tenetur earum ipsa aliquid ex in cum non nesciunt.
        </p>
        <div class="separator w-full bg-color-grey--300 max-w-40 mx-auto mt-8 mb-11 only-desktop"></div>
      </div>
      <div>
        <lottie-player class="w-full max-h-64 h-auto overflow-h" src="https://assets8.lottiefiles.com/private_files/lf30_ljlt8fcv.json" background="transparent" speed="1" loop="loop" autoplay="autoplay"></lottie-player>
        <div class="mt-8 only-desktop"></div><a class="flex flex-align-center flex-justify-center flex-gap-1 mt-6">
          <span class="branding-text color-primary--500 font-weight-bold hover-color-primary--700">Lorem ipsum
          </span>
          <svg class="icon-16 icon-rotate-90 icon-color-grey--800">
            <use href="/svg/16x16/line/chevron-up.svg#chevron-up-line-16"></use>
          </svg></a>
      </div>
    </div>
  </div>
</div>
.prismea-content-container
  .block-solutions.flex.flex-gap-7.flex-justify-center.flex-wrap
    .solution-card.max-w-92.border-radius-8.ba-color-primary--300.bg-color-white.shadow-branding.text-align-center.flex.flex-column.flex-justify-space-between
      .solution-card__icon.flex.flex-justify-center.flex-align-center.bg-color-grey--800.border-radius-8
        svg.icon-40.icon-color-primary--300
          use(href='/svg/40x40/line/chart-bar-line.svg#chart-bar-line-line-40')
      div
        p.branding-title-3.color-grey--800.font-weight-bold.
          Consectetur
          
        .mb-8.only-desktop
        .separator.w-full.bg-color-grey--300.max-w-40.mx-auto.my-6
        .mt-8.only-desktop
        p.branding-text.color-grey--700.font-weight-medium.mb-6.
          Lorem ipsum dolor sit amet consectetur adipisicing elit. Iusto molestiae rem tenetur earum ipsa aliquid ex in cum non nesciunt.
          
        .separator.w-full.bg-color-grey--300.max-w-40.mx-auto.mt-8.mb-11.only-desktop
      div
        lottie-player.w-full.max-h-64.h-auto.overflow-h(src='https://assets8.lottiefiles.com/private_files/lf30_ljlt8fcv.json', background='transparent', speed='1', loop, autoplay)
        .mt-8.only-desktop
        a.flex.flex-align-center.flex-justify-center.flex-gap-1.mt-6
          span.branding-text.color-primary--500.font-weight-bold.hover-color-primary--700.
            Lorem ipsum
            
          svg.icon-16.icon-rotate-90.icon-color-grey--800
            use(href='/svg/16x16/line/chevron-up.svg#chevron-up-line-16')
    .solution-card.max-w-92.border-radius-8.ba-color-primary--300.bg-color-white.shadow-branding.text-align-center.flex.flex-column.flex-justify-space-between
      .solution-card__icon.flex.flex-justify-center.flex-align-center.bg-color-grey--800.border-radius-8
        svg.icon-40.icon-color-primary--300
          use(href='/svg/40x40/line/chart-bar-line.svg#chart-bar-line-line-40')
      div
        p.branding-title-3.color-grey--800.font-weight-bold.
          Consectetur
          
        .mb-8.only-desktop
        .separator.w-full.bg-color-grey--300.max-w-40.mx-auto.my-6
        .mt-8.only-desktop
        p.branding-text.color-grey--700.font-weight-medium.mb-6.
          Lorem ipsum dolor sit amet consectetur adipisicing elit. Iusto molestiae rem tenetur earum ipsa aliquid ex in cum non nesciunt.
          
        .separator.w-full.bg-color-grey--300.max-w-40.mx-auto.mt-8.mb-11.only-desktop
      div
        lottie-player.w-full.max-h-64.h-auto.overflow-h(src='https://assets8.lottiefiles.com/private_files/lf30_ljlt8fcv.json', background='transparent', speed='1', loop, autoplay)
        .mt-8.only-desktop
        a.flex.flex-align-center.flex-justify-center.flex-gap-1.mt-6
          span.branding-text.color-primary--500.font-weight-bold.hover-color-primary--700.
            Lorem ipsum
            
          svg.icon-16.icon-rotate-90.icon-color-grey--800
            use(href='/svg/16x16/line/chevron-up.svg#chevron-up-line-16')

Block Step

<div class="prismea-content-container">
  <div class="block-step bg-color-grey--50"><img class="block-step__image ma-auto" src="https://placeimg.com/250/400/animals"/>
    <div class="block-step__text">
      <ul class="block-step__steps">
        <li class="block-step__step">
          <div class="block-step__step-number font-weight-medium color-primary--500">01</div>
          <div class="branding-text-xl font-weight-medium color-grey--800">Lorem ipsum dolor sit amet consectetur</div>
        </li>
        <li class="block-step__step">
          <div class="block-step__step-number font-weight-medium color-primary--500">02</div>
          <div class="branding-text-xl font-weight-medium color-grey--800">Lorem ipsum dolor sit amet</div>
        </li>
        <li class="block-step__step">
          <div class="block-step__step-number font-weight-medium color-primary--500">03</div>
          <div class="branding-text-xl font-weight-medium color-grey--800">Lorem ipsum dolor sit</div>
        </li>
      </ul>
      <div class="flex">
        <a class="btn btn--lg btn--outlined btn--responsive">Lorem ipsum</a>
      </div>
    </div>
  </div>
</div>
.prismea-content-container
  .block-step.bg-color-grey--50
    img.block-step__image.ma-auto(src='https://placeimg.com/250/400/animals')
    .block-step__text
      ul.block-step__steps
        li.block-step__step
          .block-step__step-number.font-weight-medium.color-primary--500 01
          .branding-text-xl.font-weight-medium.color-grey--800 Lorem ipsum dolor sit amet consectetur
        li.block-step__step
          .block-step__step-number.font-weight-medium.color-primary--500 02
          .branding-text-xl.font-weight-medium.color-grey--800 Lorem ipsum dolor sit amet
        li.block-step__step
          .block-step__step-number.font-weight-medium.color-primary--500 03
          .branding-text-xl.font-weight-medium.color-grey--800 Lorem ipsum dolor sit
      .flex
        a.btn.btn--lg.btn--outlined.btn--responsive Lorem ipsum

Block Testimonials

<div class="block-testimonials">
  <div class="prismea-content-container">
    <div class="prismea-fake-swiper">
      <div class="testimonial-card border-radius-8 ba-color-primary--300 bg-color-white max-w-92 h-full shadow-branding">
        <div class="testimonial-card__header"><img class="testimonial-card__header-image w-22 h-22 border-radius-rounded" src="https://placeimg.com/300/180/animals"/>
          <div class="testimonial-card__header-text">
            <p class="branding-text-lg color-primary--500 font-weight-bold">Lorem ipsum
            </p>
            <p class="branding-text-md color-grey--800 font-weight-bold font-style-italic">Dolor @ Sit amet consectetur
            </p>
            <div class="flex flex-align-center flex-gap-2 mt-3">
              <div class="rating">
                <div class="rating__stars">
                  <div class="rating__stars-off">
                    <svg class="icon-16 icon-color-grey--800 rating__star">
                      <use href="/projects/landingpage/svg/16x16/bold/star.svg#star-bold-16"></use>
                    </svg>
                    <svg class="icon-16 icon-color-grey--800 rating__star">
                      <use href="/projects/landingpage/svg/16x16/bold/star.svg#star-bold-16"></use>
                    </svg>
                    <svg class="icon-16 icon-color-grey--800 rating__star">
                      <use href="/projects/landingpage/svg/16x16/bold/star.svg#star-bold-16"></use>
                    </svg>
                    <svg class="icon-16 icon-color-grey--800 rating__star">
                      <use href="/projects/landingpage/svg/16x16/bold/star.svg#star-bold-16"></use>
                    </svg>
                    <svg class="icon-16 icon-color-grey--800 rating__star">
                      <use href="/projects/landingpage/svg/16x16/bold/star.svg#star-bold-16"></use>
                    </svg>
                  </div>
                  <div class="rating__stars-on" style="width: 0%;">
                    <svg class="icon-16 icon-color-primary--500 rating__star">
                      <use href="/projects/landingpage/svg/16x16/bold/star.svg#star-bold-16"></use>
                    </svg>
                    <svg class="icon-16 icon-color-primary--500 rating__star">
                      <use href="/projects/landingpage/svg/16x16/bold/star.svg#star-bold-16"></use>
                    </svg>
                    <svg class="icon-16 icon-color-primary--500 rating__star">
                      <use href="/projects/landingpage/svg/16x16/bold/star.svg#star-bold-16"></use>
                    </svg>
                    <svg class="icon-16 icon-color-primary--500 rating__star">
                      <use href="/projects/landingpage/svg/16x16/bold/star.svg#star-bold-16"></use>
                    </svg>
                    <svg class="icon-16 icon-color-primary--500 rating__star">
                      <use href="/projects/landingpage/svg/16x16/bold/star.svg#star-bold-16"></use>
                    </svg>
                  </div>
                </div>
              </div>
              <span class="branding-text-md color-grey--800 font-weight-bold">quae magnam
              </span>
            </div>
          </div>
        </div>
        <p class="branding-text color-grey--700 mt-8">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Illo, corrupti quae magnam vero molestiae distinctio libero, praesentium culpa deserunt pariatur odio, obcaecati repellat sint aspernatur accusamus porro nam at nulla! Itaque praesentium rem aliquid fugiat facilis porro quo adipisci harum hic quisquam numquam quam distinctio quas ipsam.
        </p>
      </div>
      <div class="testimonial-card border-radius-8 ba-color-primary--300 bg-color-white max-w-92 h-full shadow-branding">
        <div class="testimonial-card__header"><img class="testimonial-card__header-image w-22 h-22 border-radius-rounded" src="https://placeimg.com/300/180/animals"/>
          <div class="testimonial-card__header-text">
            <p class="branding-text-lg color-primary--500 font-weight-bold">Lorem ipsum
            </p>
            <p class="branding-text-md color-grey--800 font-weight-bold font-style-italic">Dolor @ Sit amet consectetur
            </p>
            <div class="flex flex-align-center flex-gap-2 mt-3">
              <div class="rating">
                <div class="rating__stars">
                  <div class="rating__stars-off">
                    <svg class="icon-16 icon-color-grey--800 rating__star">
                      <use href="/projects/landingpage/svg/16x16/bold/star.svg#star-bold-16"></use>
                    </svg>
                    <svg class="icon-16 icon-color-grey--800 rating__star">
                      <use href="/projects/landingpage/svg/16x16/bold/star.svg#star-bold-16"></use>
                    </svg>
                    <svg class="icon-16 icon-color-grey--800 rating__star">
                      <use href="/projects/landingpage/svg/16x16/bold/star.svg#star-bold-16"></use>
                    </svg>
                    <svg class="icon-16 icon-color-grey--800 rating__star">
                      <use href="/projects/landingpage/svg/16x16/bold/star.svg#star-bold-16"></use>
                    </svg>
                    <svg class="icon-16 icon-color-grey--800 rating__star">
                      <use href="/projects/landingpage/svg/16x16/bold/star.svg#star-bold-16"></use>
                    </svg>
                  </div>
                  <div class="rating__stars-on" style="width: 0%;">
                    <svg class="icon-16 icon-color-primary--500 rating__star">
                      <use href="/projects/landingpage/svg/16x16/bold/star.svg#star-bold-16"></use>
                    </svg>
                    <svg class="icon-16 icon-color-primary--500 rating__star">
                      <use href="/projects/landingpage/svg/16x16/bold/star.svg#star-bold-16"></use>
                    </svg>
                    <svg class="icon-16 icon-color-primary--500 rating__star">
                      <use href="/projects/landingpage/svg/16x16/bold/star.svg#star-bold-16"></use>
                    </svg>
                    <svg class="icon-16 icon-color-primary--500 rating__star">
                      <use href="/projects/landingpage/svg/16x16/bold/star.svg#star-bold-16"></use>
                    </svg>
                    <svg class="icon-16 icon-color-primary--500 rating__star">
                      <use href="/projects/landingpage/svg/16x16/bold/star.svg#star-bold-16"></use>
                    </svg>
                  </div>
                </div>
              </div>
              <span class="branding-text-md color-grey--800 font-weight-bold">quae magnam
              </span>
            </div>
          </div>
        </div>
        <p class="branding-text color-grey--700 mt-8">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Illo, corrupti quae magnam vero molestiae distinctio libero, praesentium culpa deserunt pariatur odio, obcaecati repellat sint aspernatur accusamus porro nam at nulla! Itaque praesentium rem aliquid fugiat facilis porro quo adipisci harum hic quisquam numquam quam distinctio quas ipsam.
        </p>
      </div>
      <div class="testimonial-card border-radius-8 ba-color-primary--300 bg-color-white max-w-92 h-full shadow-branding">
        <div class="testimonial-card__header"><img class="testimonial-card__header-image w-22 h-22 border-radius-rounded" src="https://placeimg.com/300/180/animals"/>
          <div class="testimonial-card__header-text">
            <p class="branding-text-lg color-primary--500 font-weight-bold">Lorem ipsum
            </p>
            <p class="branding-text-md color-grey--800 font-weight-bold font-style-italic">Dolor @ Sit amet consectetur
            </p>
            <div class="flex flex-align-center flex-gap-2 mt-3">
              <div class="rating">
                <div class="rating__stars">
                  <div class="rating__stars-off">
                    <svg class="icon-16 icon-color-grey--800 rating__star">
                      <use href="/projects/landingpage/svg/16x16/bold/star.svg#star-bold-16"></use>
                    </svg>
                    <svg class="icon-16 icon-color-grey--800 rating__star">
                      <use href="/projects/landingpage/svg/16x16/bold/star.svg#star-bold-16"></use>
                    </svg>
                    <svg class="icon-16 icon-color-grey--800 rating__star">
                      <use href="/projects/landingpage/svg/16x16/bold/star.svg#star-bold-16"></use>
                    </svg>
                    <svg class="icon-16 icon-color-grey--800 rating__star">
                      <use href="/projects/landingpage/svg/16x16/bold/star.svg#star-bold-16"></use>
                    </svg>
                    <svg class="icon-16 icon-color-grey--800 rating__star">
                      <use href="/projects/landingpage/svg/16x16/bold/star.svg#star-bold-16"></use>
                    </svg>
                  </div>
                  <div class="rating__stars-on" style="width: 0%;">
                    <svg class="icon-16 icon-color-primary--500 rating__star">
                      <use href="/projects/landingpage/svg/16x16/bold/star.svg#star-bold-16"></use>
                    </svg>
                    <svg class="icon-16 icon-color-primary--500 rating__star">
                      <use href="/projects/landingpage/svg/16x16/bold/star.svg#star-bold-16"></use>
                    </svg>
                    <svg class="icon-16 icon-color-primary--500 rating__star">
                      <use href="/projects/landingpage/svg/16x16/bold/star.svg#star-bold-16"></use>
                    </svg>
                    <svg class="icon-16 icon-color-primary--500 rating__star">
                      <use href="/projects/landingpage/svg/16x16/bold/star.svg#star-bold-16"></use>
                    </svg>
                    <svg class="icon-16 icon-color-primary--500 rating__star">
                      <use href="/projects/landingpage/svg/16x16/bold/star.svg#star-bold-16"></use>
                    </svg>
                  </div>
                </div>
              </div>
              <span class="branding-text-md color-grey--800 font-weight-bold">quae magnam
              </span>
            </div>
          </div>
        </div>
        <p class="branding-text color-grey--700 mt-8">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Illo, corrupti quae magnam vero molestiae distinctio libero, praesentium culpa deserunt pariatur odio, obcaecati repellat sint aspernatur accusamus porro nam at nulla! Itaque praesentium rem aliquid fugiat facilis porro quo adipisci harum hic quisquam numquam quam distinctio quas ipsam.
        </p>
      </div>
    </div>
  </div>
</div>
.block-testimonials
  .prismea-content-container
    .prismea-fake-swiper
      .testimonial-card.border-radius-8.ba-color-primary--300.bg-color-white.max-w-92.h-full.shadow-branding
        .testimonial-card__header
          img.testimonial-card__header-image.w-22.h-22.border-radius-rounded(src='https://placeimg.com/300/180/animals')
          .testimonial-card__header-text
            p.branding-text-lg.color-primary--500.font-weight-bold.
              Lorem ipsum
              
            p.branding-text-md.color-grey--800.font-weight-bold.font-style-italic.
              Dolor @ Sit amet consectetur
              
            .flex.flex-align-center.flex-gap-2.mt-3
              .rating
                .rating__stars
                  .rating__stars-off
                    svg.icon-16.icon-color-grey--800.rating__star
                      use(href='/projects/landingpage/svg/16x16/bold/star.svg#star-bold-16')
                    svg.icon-16.icon-color-grey--800.rating__star
                      use(href='/projects/landingpage/svg/16x16/bold/star.svg#star-bold-16')
                    svg.icon-16.icon-color-grey--800.rating__star
                      use(href='/projects/landingpage/svg/16x16/bold/star.svg#star-bold-16')
                    svg.icon-16.icon-color-grey--800.rating__star
                      use(href='/projects/landingpage/svg/16x16/bold/star.svg#star-bold-16')
                    svg.icon-16.icon-color-grey--800.rating__star
                      use(href='/projects/landingpage/svg/16x16/bold/star.svg#star-bold-16')
                  .rating__stars-on(style='width: 0%;')
                    svg.icon-16.icon-color-primary--500.rating__star
                      use(href='/projects/landingpage/svg/16x16/bold/star.svg#star-bold-16')
                    svg.icon-16.icon-color-primary--500.rating__star
                      use(href='/projects/landingpage/svg/16x16/bold/star.svg#star-bold-16')
                    svg.icon-16.icon-color-primary--500.rating__star
                      use(href='/projects/landingpage/svg/16x16/bold/star.svg#star-bold-16')
                    svg.icon-16.icon-color-primary--500.rating__star
                      use(href='/projects/landingpage/svg/16x16/bold/star.svg#star-bold-16')
                    svg.icon-16.icon-color-primary--500.rating__star
                      use(href='/projects/landingpage/svg/16x16/bold/star.svg#star-bold-16')
              span.branding-text-md.color-grey--800.font-weight-bold.
                quae magnam
                
        p.branding-text.color-grey--700.mt-8.
          Lorem, ipsum dolor sit amet consectetur adipisicing elit. Illo, corrupti quae magnam vero molestiae distinctio libero, praesentium culpa deserunt pariatur odio, obcaecati repellat sint aspernatur accusamus porro nam at nulla! Itaque praesentium rem aliquid fugiat facilis porro quo adipisci harum hic quisquam numquam quam distinctio quas ipsam.
          
      .testimonial-card.border-radius-8.ba-color-primary--300.bg-color-white.max-w-92.h-full.shadow-branding
        .testimonial-card__header
          img.testimonial-card__header-image.w-22.h-22.border-radius-rounded(src='https://placeimg.com/300/180/animals')
          .testimonial-card__header-text
            p.branding-text-lg.color-primary--500.font-weight-bold.
              Lorem ipsum
              
            p.branding-text-md.color-grey--800.font-weight-bold.font-style-italic.
              Dolor @ Sit amet consectetur
              
            .flex.flex-align-center.flex-gap-2.mt-3
              .rating
                .rating__stars
                  .rating__stars-off
                    svg.icon-16.icon-color-grey--800.rating__star
                      use(href='/projects/landingpage/svg/16x16/bold/star.svg#star-bold-16')
                    svg.icon-16.icon-color-grey--800.rating__star
                      use(href='/projects/landingpage/svg/16x16/bold/star.svg#star-bold-16')
                    svg.icon-16.icon-color-grey--800.rating__star
                      use(href='/projects/landingpage/svg/16x16/bold/star.svg#star-bold-16')
                    svg.icon-16.icon-color-grey--800.rating__star
                      use(href='/projects/landingpage/svg/16x16/bold/star.svg#star-bold-16')
                    svg.icon-16.icon-color-grey--800.rating__star
                      use(href='/projects/landingpage/svg/16x16/bold/star.svg#star-bold-16')
                  .rating__stars-on(style='width: 0%;')
                    svg.icon-16.icon-color-primary--500.rating__star
                      use(href='/projects/landingpage/svg/16x16/bold/star.svg#star-bold-16')
                    svg.icon-16.icon-color-primary--500.rating__star
                      use(href='/projects/landingpage/svg/16x16/bold/star.svg#star-bold-16')
                    svg.icon-16.icon-color-primary--500.rating__star
                      use(href='/projects/landingpage/svg/16x16/bold/star.svg#star-bold-16')
                    svg.icon-16.icon-color-primary--500.rating__star
                      use(href='/projects/landingpage/svg/16x16/bold/star.svg#star-bold-16')
                    svg.icon-16.icon-color-primary--500.rating__star
                      use(href='/projects/landingpage/svg/16x16/bold/star.svg#star-bold-16')
              span.branding-text-md.color-grey--800.font-weight-bold.
                quae magnam
                
        p.branding-text.color-grey--700.mt-8.
          Lorem, ipsum dolor sit amet consectetur adipisicing elit. Illo, corrupti quae magnam vero molestiae distinctio libero, praesentium culpa deserunt pariatur odio, obcaecati repellat sint aspernatur accusamus porro nam at nulla! Itaque praesentium rem aliquid fugiat facilis porro quo adipisci harum hic quisquam numquam quam distinctio quas ipsam.
          
      .testimonial-card.border-radius-8.ba-color-primary--300.bg-color-white.max-w-92.h-full.shadow-branding
        .testimonial-card__header
          img.testimonial-card__header-image.w-22.h-22.border-radius-rounded(src='https://placeimg.com/300/180/animals')
          .testimonial-card__header-text
            p.branding-text-lg.color-primary--500.font-weight-bold.
              Lorem ipsum
              
            p.branding-text-md.color-grey--800.font-weight-bold.font-style-italic.
              Dolor @ Sit amet consectetur
              
            .flex.flex-align-center.flex-gap-2.mt-3
              .rating
                .rating__stars
                  .rating__stars-off
                    svg.icon-16.icon-color-grey--800.rating__star
                      use(href='/projects/landingpage/svg/16x16/bold/star.svg#star-bold-16')
                    svg.icon-16.icon-color-grey--800.rating__star
                      use(href='/projects/landingpage/svg/16x16/bold/star.svg#star-bold-16')
                    svg.icon-16.icon-color-grey--800.rating__star
                      use(href='/projects/landingpage/svg/16x16/bold/star.svg#star-bold-16')
                    svg.icon-16.icon-color-grey--800.rating__star
                      use(href='/projects/landingpage/svg/16x16/bold/star.svg#star-bold-16')
                    svg.icon-16.icon-color-grey--800.rating__star
                      use(href='/projects/landingpage/svg/16x16/bold/star.svg#star-bold-16')
                  .rating__stars-on(style='width: 0%;')
                    svg.icon-16.icon-color-primary--500.rating__star
                      use(href='/projects/landingpage/svg/16x16/bold/star.svg#star-bold-16')
                    svg.icon-16.icon-color-primary--500.rating__star
                      use(href='/projects/landingpage/svg/16x16/bold/star.svg#star-bold-16')
                    svg.icon-16.icon-color-primary--500.rating__star
                      use(href='/projects/landingpage/svg/16x16/bold/star.svg#star-bold-16')
                    svg.icon-16.icon-color-primary--500.rating__star
                      use(href='/projects/landingpage/svg/16x16/bold/star.svg#star-bold-16')
                    svg.icon-16.icon-color-primary--500.rating__star
                      use(href='/projects/landingpage/svg/16x16/bold/star.svg#star-bold-16')
              span.branding-text-md.color-grey--800.font-weight-bold.
                quae magnam
                
        p.branding-text.color-grey--700.mt-8.
          Lorem, ipsum dolor sit amet consectetur adipisicing elit. Illo, corrupti quae magnam vero molestiae distinctio libero, praesentium culpa deserunt pariatur odio, obcaecati repellat sint aspernatur accusamus porro nam at nulla! Itaque praesentium rem aliquid fugiat facilis porro quo adipisci harum hic quisquam numquam quam distinctio quas ipsam.
          

Block Title

You can add pretitle, separator and subtitle.

You can change the color of the title

<div class="block-title">
  <div class="prismea-content-container">
    <p class="branding-text-lg color-primary--500 text-transform-uppercase font-weight-bold mb-4">Lorem ipsum
    </p>
    <h2 class="branding-title-2 color-grey--800 font-weight-medium mb-4">
      Lorem ipsum dolor
      <span class="color-primary--500">sit amet consectetur</span>
    </h2>
    <p class="branding-text-lg color-grey--700 font-weight-medium mt-5 text-multiline">
      Lorem, ipsum dolor sit amet consectetur adipisicing elit.
      Illum, dignissimos? Voluptates maiores dolorum impedit maxime?
    </p>
  </div>
</div>
<div class="block-title">
  <div class="prismea-content-container">
    <p class="branding-text-lg color-primary--500 text-transform-uppercase font-weight-bold mb-4">Lorem ipsum
    </p>
    <h2 class="branding-title-2 color-grey--800 font-weight-medium mb-4">
      Lorem ipsum dolor
      <span class="color-primary--500">sit amet consectetur</span>
    </h2>
    <div class="separator w-full bg-color-grey--800 max-w-10 ma-auto"></div>
  </div>
</div>
.block-title
  .prismea-content-container
    p.branding-text-lg.color-primary--500.text-transform-uppercase.font-weight-bold.mb-4.
      Lorem ipsum
      
    h2.branding-title-2.color-grey--800.font-weight-medium.mb-4
      | 
Lorem ipsum dolor

      span.color-primary--500 sit amet consectetur
    p.branding-text-lg.color-grey--700.font-weight-medium.mt-5.text-multiline.
      
      Lorem, ipsum dolor sit amet consectetur adipisicing elit. Illum, dignissimos? Voluptates maiores dolorum impedit maxime?
      
.block-title
  .prismea-content-container
    p.branding-text-lg.color-primary--500.text-transform-uppercase.font-weight-bold.mb-4.
      Lorem ipsum
      
    h2.branding-title-2.color-grey--800.font-weight-medium.mb-4
      | 
Lorem ipsum dolor

      span.color-primary--500 sit amet consectetur
    .separator.w-full.bg-color-grey--800.max-w-10.ma-auto

Blog Advertising

<div class="prismea-landingpage-blog-advertising prismea-content-container--blog">
  <div class="prismea-landingpage-blog-advertising-text">
    <h1 class="branding-title-4 color-grey--800 font-weight-medium font-weight-medium">Lorem ipsum dolor sit amet
    </h1>
    <h1 class="branding-title-4 color-grey--800 font-weight-medium">Lorem ipsum dolor sit amet
    </h1>
    <p class="prismea-text prismea-color -color-grey-700 prismea-vertical-spacing-20--slot">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sucipit voluptates in.</p>
    <div class="prismea-vertical-spacing-20--slot">
      <a class="btn btn--lg btn--primary btn--responsive">Lorem ipsum</a>
    </div>
  </div>
  <div class="prismea-landingpage-blog-advertising-visual"><img src="https://placeimg.com/400/400/animals"/></div>
</div>
.prismea-landingpage-blog-advertising.prismea-content-container--blog
  .prismea-landingpage-blog-advertising-text
    h1.branding-title-4.color-grey--800.font-weight-medium.font-weight-medium.
      Lorem ipsum dolor sit amet
      
    h1.branding-title-4.color-grey--800.font-weight-medium.
      Lorem ipsum dolor sit amet
      
    p.prismea-text.prismea-color.-color-grey-700.prismea-vertical-spacing-20--slot Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sucipit voluptates in.
    .prismea-vertical-spacing-20--slot
      a.btn.btn--lg.btn--primary.btn--responsive Lorem ipsum
  .prismea-landingpage-blog-advertising-visual
    img(src='https://placeimg.com/400/400/animals')

Blog Article

<div class="prismea-landingpage-blog-article prismea-content-container--blog">
  <div class="prismea-landingpage-blog-article-banner"><img class="prismea-landingpage-blog-article-banner" src="https://placeimg.com/1200/350/animals"/></div>
  <div class="prismea-landingpage-blog-article-body">
    <div class="prismea-landingpage-blog-article-body-sharing">
      <div class="prismea-landingpage-blog-article-body-sharing-links"><a class="w-10 h-10 border-radius-rounded flex flex-justify-center flex-align-center bg-color-grey--100 hover-bg-color-grey--200">
          <svg class="icon-24 icon-color-grey--600">
            <use href="/projects/landingpage/svg/24x24/bold/twitter.svg#twitter-bold-24"></use>
          </svg></a><a class="w-10 h-10 border-radius-rounded flex flex-justify-center flex-align-center bg-color-grey--100 hover-bg-color-grey--200">
          <svg class="icon-24 icon-color-grey--600">
            <use href="/projects/landingpage/svg/24x24/bold/facebook.svg#facebook-bold-24"></use>
          </svg></a><a class="w-10 h-10 border-radius-rounded flex flex-justify-center flex-align-center bg-color-grey--100 hover-bg-color-grey--200">
          <svg class="icon-24 icon-color-grey--600">
            <use href="/projects/landingpage/svg/24x24/bold/linkedin.svg#linkedin-bold-24"></use>
          </svg></a>
      </div>
    </div>
    <div class="prismea-vertical-spacing-20--slot prismea-vertical-spacing-20 -flex -middle">
      <div class="prismea-landingpage-category-label">
        <div class="prismea-landingpage-category-label-text">
          <p class="prismea-text -size-14 ">Lorem Ipsum</p>
        </div>
      </div>
    </div>
    <div class="prismea-vertical-spacing-15--slot -center">
      <h1 class="branding-title-3 color-grey--800 font-weight-medium font-weight-medium">Lorem ipsum dolor sit amet consectetur adipisicing elit
      </h1>
    </div>
    <div class="flex flex-column flex-align-center flex-gap-1">
      <div class="avatar avatar--lg border-radius-rounded mx-auto"><img class="avatar__image" src="https://images.unsplash.com/photo-1541298645675-6cc8e127934d"/>
      </div>
      <div class="prismea-text -size-12 prismea-color -color-grey-600">Lorem ipsum dolor sit<span class="prismea-color -color-primary-500"> amet consectetur</span></div>
    </div>
    <div class="mt-16">
      <div class="mb-10 flex flex-align-center flex-wrap flex-gap-1"><a class="branding-link branding-link--secondary font-weight-medium branding-text-md">Lorem ipsum dolor</a>
        <svg class="icon-16 icon-rotate-90 icon-color-primary--500">
          <use href="/svg/16x16/line/chevron-up.svg#chevron-up-line-16"></use>
        </svg><a class="branding-link branding-link--secondary font-weight-medium branding-text-md">Lorem ipsum dolor</a>
        <svg class="icon-16 icon-rotate-90 icon-color-primary--500">
          <use href="/svg/16x16/line/chevron-up.svg#chevron-up-line-16"></use>
        </svg>
        <p class="branding-text-md color-grey--800 font-weight-medium">Lorem ipsum dolor sit amet
        </p>
      </div>
      <div class="wysiwyg color-grey--800">
        <p class="branding-text color-grey--700 my-4">Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolores aliquam optio assumenda. Ullam accusamus tenetur quibusdam? Veniam, tempore qui rerum ex, rem iste voluptas suscipit, porro obcaecati repudiandae excepturi illum!
        </p>
        <h2 class="branding-title-2 color-grey--800 font-weight-medium mt-8 mb-7">Lorem ipsum dolor sit amet
        </h2>
        <p class="branding-text color-grey--700 my-4">Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolores aliquam optio assumenda. Ullam accusamus tenetur quibusdam? Veniam, tempore qui rerum ex, rem iste voluptas suscipit, porro obcaecati repudiandae excepturi illum!
        </p>
        <p class="branding-text color-grey--700 my-4">Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolores aliquam optio assumenda. Ullam accusamus tenetur quibusdam? Veniam, tempore qui rerum ex, rem iste voluptas suscipit, porro obcaecati repudiandae excepturi illum!
        </p><img class="max-w-full h-auto mx-auto my-10" src="https://placeimg.com/800/450/animals"/>
      </div>
    </div>
  </div>
</div>
.prismea-landingpage-blog-article.prismea-content-container--blog
  .prismea-landingpage-blog-article-banner
    img.prismea-landingpage-blog-article-banner(src='https://placeimg.com/1200/350/animals')
  .prismea-landingpage-blog-article-body
    .prismea-landingpage-blog-article-body-sharing
      .prismea-landingpage-blog-article-body-sharing-links
        a.w-10.h-10.border-radius-rounded.flex.flex-justify-center.flex-align-center.bg-color-grey--100.hover-bg-color-grey--200
          svg.icon-24.icon-color-grey--600
            use(href='/projects/landingpage/svg/24x24/bold/twitter.svg#twitter-bold-24')
        a.w-10.h-10.border-radius-rounded.flex.flex-justify-center.flex-align-center.bg-color-grey--100.hover-bg-color-grey--200
          svg.icon-24.icon-color-grey--600
            use(href='/projects/landingpage/svg/24x24/bold/facebook.svg#facebook-bold-24')
        a.w-10.h-10.border-radius-rounded.flex.flex-justify-center.flex-align-center.bg-color-grey--100.hover-bg-color-grey--200
          svg.icon-24.icon-color-grey--600
            use(href='/projects/landingpage/svg/24x24/bold/linkedin.svg#linkedin-bold-24')
    .prismea-vertical-spacing-20--slot.prismea-vertical-spacing-20.-flex.-middle
      .prismea-landingpage-category-label
        .prismea-landingpage-category-label-text
          p.prismea-text.-size-14 Lorem Ipsum
    .prismea-vertical-spacing-15--slot.-center
      h1.branding-title-3.color-grey--800.font-weight-medium.font-weight-medium.
        Lorem ipsum dolor sit amet consectetur adipisicing elit
        
    .flex.flex-column.flex-align-center.flex-gap-1
      .avatar.avatar--lg.border-radius-rounded.mx-auto
        img.avatar__image(src='https://images.unsplash.com/photo-1541298645675-6cc8e127934d')
      .prismea-text.-size-12.prismea-color.-color-grey-600
        | Lorem ipsum dolor sit
        span.prismea-color.-color-primary-500  amet consectetur
    .mt-16
      .mb-10.flex.flex-align-center.flex-wrap.flex-gap-1
        a.branding-link.branding-link--secondary.font-weight-medium.branding-text-md Lorem ipsum dolor
        svg.icon-16.icon-rotate-90.icon-color-primary--500
          use(href='/svg/16x16/line/chevron-up.svg#chevron-up-line-16')
        a.branding-link.branding-link--secondary.font-weight-medium.branding-text-md Lorem ipsum dolor
        svg.icon-16.icon-rotate-90.icon-color-primary--500
          use(href='/svg/16x16/line/chevron-up.svg#chevron-up-line-16')
        p.branding-text-md.color-grey--800.font-weight-medium.
          Lorem ipsum dolor sit amet
          
      .wysiwyg.color-grey--800
        p.branding-text.color-grey--700.my-4.
          Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolores aliquam optio assumenda. Ullam accusamus tenetur quibusdam? Veniam, tempore qui rerum ex, rem iste voluptas suscipit, porro obcaecati repudiandae excepturi illum!
          
        h2.branding-title-2.color-grey--800.font-weight-medium.mt-8.mb-7.
          Lorem ipsum dolor sit amet
          
        p.branding-text.color-grey--700.my-4.
          Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolores aliquam optio assumenda. Ullam accusamus tenetur quibusdam? Veniam, tempore qui rerum ex, rem iste voluptas suscipit, porro obcaecati repudiandae excepturi illum!
          
        p.branding-text.color-grey--700.my-4.
          Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolores aliquam optio assumenda. Ullam accusamus tenetur quibusdam? Veniam, tempore qui rerum ex, rem iste voluptas suscipit, porro obcaecati repudiandae excepturi illum!
          
        img.max-w-full.h-auto.mx-auto.my-10(src='https://placeimg.com/800/450/animals')

Cookie Banner

<div class="prismea-landingpage-cookie prismea-landingpage-cookie-banner">
  <div class="prismea-landingpage-cookie-header prismea-landingpage-cookie-banner-header">
    <h3 class="prismea-landingpage-cookie-header-title prismea-text">Lorem ipsum dolor sit amet</h3>
  </div>
  <div class="prismea-landingpage-cookie-banner-body">
    <div class="prismea-landingpage-cookie-banner-body-description wysiwyg color-grey--700">
      <p class="branding-text-md color-grey--700 my-4">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Laboriosam assumenda porro, a consequuntur, modi sunt quod voluptate unde accusantium beatae quasi ab. Quaerat ea repudiandae ab totam modi animi velit!
      </p>
    </div>
    <div class="prismea-landingpage-cookie-banner-body-list">
      <div class="prismea-vertical-spacing-35--slot">
        <div class="prismea-vertical-spacing-10--slot">
          <p class="prismea-text -size-16 prismea-color -color-primary-500 ">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
        </div>
        <div class="prismea-vertical-spacing-10--slot">
          <p class="prismea-text -size-14 prismea-color -color-grey-700 ">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque bibendum cursus ipsum.</p>
        </div>
      </div>
      <ul class="prismea-vertical-spacing-15--slot">
        <li class="flex flex-gap-5 mt-7">
          <div class="w-15 h-15 bg-color-grey--100 flex flex-justify-center flex-align-center flex-no-shrink">
            <svg class="icon-40 icon-color-primary--500">
              <use href="/svg/40x40/line/chart-bar-line.svg#chart-bar-line-line-40"></use>
            </svg>
          </div>
          <p class="branding-text-md color-grey--700"><span class="color-grey--800 font-weight-medium">Lorem ipsum dolor sit amet, consectetur adipiscing elit :</span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque bibendum cursus ipsum, dictum consequat ipsum tempus quis. Nulla suscipit gravida ultricies.
          </p>
        </li>
        <li class="flex flex-gap-5 mt-7">
          <div class="w-15 h-15 bg-color-grey--100 flex flex-justify-center flex-align-center flex-no-shrink">
            <svg class="icon-40 icon-color-primary--500">
              <use href="/svg/40x40/line/chart-bar-line.svg#chart-bar-line-line-40"></use>
            </svg>
          </div>
          <p class="branding-text-md color-grey--700"><span class="color-grey--800 font-weight-medium">Lorem ipsum dolor sit amet, consectetur adipiscing elit :</span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque bibendum cursus ipsum, dictum consequat ipsum tempus quis. Nulla suscipit gravida ultricies.
          </p>
        </li>
        <li class="flex flex-gap-5 mt-7">
          <div class="w-15 h-15 bg-color-grey--100 flex flex-justify-center flex-align-center flex-no-shrink">
            <svg class="icon-40 icon-color-primary--500">
              <use href="/svg/40x40/line/chart-bar-line.svg#chart-bar-line-line-40"></use>
            </svg>
          </div>
          <p class="branding-text-md color-grey--700"><span class="color-grey--800 font-weight-medium">Lorem ipsum dolor sit amet, consectetur adipiscing elit :</span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque bibendum cursus ipsum, dictum consequat ipsum tempus quis. Nulla suscipit gravida ultricies.
          </p>
        </li>
      </ul>
      <p class="prismea-landingpage-cookie-banner-body-list-footer prismea-vertical-spacing-15--slot prismea-text -size-14"><span class="prismea-color -color-grey-700">Lorem ipsum dolor sit amet, consectetur adipiscing elit</span><a class="prismea-text -underline">Ut nec felis</a></p>
    </div>
  </div>
  <div class="prismea-landingpage-cookie-footer">
    <div class="flex flex-justify-center prismea-vertical-spacing-10--slot">
      <a class="btn btn--md btn--primary">Lorem ipsum</a>
    </div>
    <div class="prismea-landingpage-cookie-footer-links prismea-vertical-spacing-10--slot"><a class="prismea-text -size-14 prismea-color -color-primary-500 -underline">Lorem ipsum dolor sit amet</a><a class="prismea-text -size-14 prismea-color -color-grey-700 -underline">Lorem ipsum dolor</a></div>
  </div>
</div>
.prismea-landingpage-cookie.prismea-landingpage-cookie-banner
  .prismea-landingpage-cookie-header.prismea-landingpage-cookie-banner-header
    h3.prismea-landingpage-cookie-header-title.prismea-text Lorem ipsum dolor sit amet
  .prismea-landingpage-cookie-banner-body
    .prismea-landingpage-cookie-banner-body-description.wysiwyg.color-grey--700
      p.branding-text-md.color-grey--700.my-4.
        Lorem ipsum dolor sit, amet consectetur adipisicing elit. Laboriosam assumenda porro, a consequuntur, modi sunt quod voluptate unde accusantium beatae quasi ab. Quaerat ea repudiandae ab totam modi animi velit!
        
    .prismea-landingpage-cookie-banner-body-list
      .prismea-vertical-spacing-35--slot
        .prismea-vertical-spacing-10--slot
          p.prismea-text.-size-16.prismea-color.-color-primary-500 Lorem ipsum dolor sit amet, consectetur adipiscing elit.
        .prismea-vertical-spacing-10--slot
          p.prismea-text.-size-14.prismea-color.-color-grey-700 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque bibendum cursus ipsum.
      ul.prismea-vertical-spacing-15--slot
        li.flex.flex-gap-5.mt-7
          .w-15.h-15.bg-color-grey--100.flex.flex-justify-center.flex-align-center.flex-no-shrink
            svg.icon-40.icon-color-primary--500
              use(href='/svg/40x40/line/chart-bar-line.svg#chart-bar-line-line-40')
          p.branding-text-md.color-grey--700
            span.color-grey--800.font-weight-medium Lorem ipsum dolor sit amet, consectetur adipiscing elit :
            | Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque bibendum cursus ipsum, dictum consequat ipsum tempus quis. Nulla suscipit gravida ultricies.

        li.flex.flex-gap-5.mt-7
          .w-15.h-15.bg-color-grey--100.flex.flex-justify-center.flex-align-center.flex-no-shrink
            svg.icon-40.icon-color-primary--500
              use(href='/svg/40x40/line/chart-bar-line.svg#chart-bar-line-line-40')
          p.branding-text-md.color-grey--700
            span.color-grey--800.font-weight-medium Lorem ipsum dolor sit amet, consectetur adipiscing elit :
            | Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque bibendum cursus ipsum, dictum consequat ipsum tempus quis. Nulla suscipit gravida ultricies.

        li.flex.flex-gap-5.mt-7
          .w-15.h-15.bg-color-grey--100.flex.flex-justify-center.flex-align-center.flex-no-shrink
            svg.icon-40.icon-color-primary--500
              use(href='/svg/40x40/line/chart-bar-line.svg#chart-bar-line-line-40')
          p.branding-text-md.color-grey--700
            span.color-grey--800.font-weight-medium Lorem ipsum dolor sit amet, consectetur adipiscing elit :
            | Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque bibendum cursus ipsum, dictum consequat ipsum tempus quis. Nulla suscipit gravida ultricies.

      p.prismea-landingpage-cookie-banner-body-list-footer.prismea-vertical-spacing-15--slot.prismea-text.-size-14
        span.prismea-color.-color-grey-700 Lorem ipsum dolor sit amet, consectetur adipiscing elit
        a.prismea-text.-underline Ut nec felis
  .prismea-landingpage-cookie-footer
    .flex.flex-justify-center.prismea-vertical-spacing-10--slot
      a.btn.btn--md.btn--primary Lorem ipsum
    .prismea-landingpage-cookie-footer-links.prismea-vertical-spacing-10--slot
      a.prismea-text.-size-14.prismea-color.-color-primary-500.-underline Lorem ipsum dolor sit amet
      a.prismea-text.-size-14.prismea-color.-color-grey-700.-underline Lorem ipsum dolor

Cookie Modal

<div class="prismea-landingpage-cookie prismea-landingpage-cookie-modal">
  <div class="prismea-landingpage-cookie-header prismea-landingpage-cookie-modal-header">
    <h3 class="prismea-landingpage-cookie-header-title prismea-text">Lorem ipsum dolor sit amet</h3>
    <button class="btn-icon btn-icon--sm">
      <svg class="icon-24">
        <use href="/svg/24x24/line/close.svg#close-line-24"></use>
      </svg>
    </button>
  </div>
  <div class="prismea-landingpage-cookie-modal-body">
    <div class="wysiwyg color-grey--700 mx-8">
      <p class="branding-text-md color-grey--700 my-4">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Laboriosam assumenda porro, a consequuntur, modi sunt quod voluptate unde accusantium beatae quasi ab. Quaerat ea repudiandae ab totam modi animi velit!
      </p>
    </div>
    <ul class="prismea-vertical-spacing-35--slot">
      <li class="flex flex-gap-5 mt-7">
        <div class="w-15 h-15 bg-color-grey--100 flex flex-justify-center flex-align-center flex-no-shrink">
          <svg class="icon-40 icon-color-primary--500">
            <use href="/svg/40x40/line/chart-bar-line.svg#chart-bar-line-line-40"></use>
          </svg>
        </div>
        <div>
          <p class="branding-text-md color-grey--700 mb-5"><span class="color-grey--800 font-weight-medium">Lorem ipsum dolor sit amet, consectetur adipiscing elit :</span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque bibendum cursus ipsum, dictum consequat ipsum tempus quis. Nulla suscipit gravida ultricies.
          </p>
          <button class="prismea-switch -off -with-label" role="switch" aria-checked="false" aria-label="Switch"><span class="prismea-switch--label -color-light">Off</span><i class="prismea-switch--button"></i>
          </button>
        </div>
      </li>
      <li class="flex flex-gap-5 mt-7">
        <div class="w-15 h-15 bg-color-grey--100 flex flex-justify-center flex-align-center flex-no-shrink">
          <svg class="icon-40 icon-color-primary--500">
            <use href="/svg/40x40/line/chart-bar-line.svg#chart-bar-line-line-40"></use>
          </svg>
        </div>
        <div>
          <p class="branding-text-md color-grey--700 mb-5"><span class="color-grey--800 font-weight-medium">Lorem ipsum dolor sit amet, consectetur adipiscing elit :</span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque bibendum cursus ipsum, dictum consequat ipsum tempus quis. Nulla suscipit gravida ultricies.
          </p>
          <button class="prismea-switch -on -with-label" role="switch" aria-checked="true" aria-label="Switch"><span class="prismea-switch--label -color-light">On</span><i class="prismea-switch--button"></i>
          </button>
        </div>
      </li>
      <li class="flex flex-gap-5 mt-7">
        <div class="w-15 h-15 bg-color-grey--100 flex flex-justify-center flex-align-center flex-no-shrink">
          <svg class="icon-40 icon-color-primary--500">
            <use href="/svg/40x40/line/chart-bar-line.svg#chart-bar-line-line-40"></use>
          </svg>
        </div>
        <div>
          <p class="branding-text-md color-grey--700 mb-5"><span class="color-grey--800 font-weight-medium">Lorem ipsum dolor sit amet, consectetur adipiscing elit :</span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque bibendum cursus ipsum, dictum consequat ipsum tempus quis. Nulla suscipit gravida ultricies.
          </p>
          <button class="prismea-switch -off -with-label" role="switch" aria-checked="false" aria-label="Switch"><span class="prismea-switch--label -color-light">Off</span><i class="prismea-switch--button"></i>
          </button>
        </div>
      </li>
    </ul>
  </div>
  <div class="prismea-landingpage-cookie-footer">
    <div class="flex flex-justify-center prismea-vertical-spacing-10--slot">
      <a class="btn btn--md btn--primary">Lorem ipsum</a>
    </div>
    <div class="prismea-landingpage-cookie-footer-links prismea-vertical-spacing-10--slot"><a class="prismea-text -size-14 prismea-color -color-primary-500 -underline">Lorem ipsum dolor sit amet</a><a class="prismea-text -size-14 prismea-color -color-grey-700 -underline">Lorem ipsum dolor</a></div>
  </div>
</div>
.prismea-landingpage-cookie.prismea-landingpage-cookie-modal
  .prismea-landingpage-cookie-header.prismea-landingpage-cookie-modal-header
    h3.prismea-landingpage-cookie-header-title.prismea-text Lorem ipsum dolor sit amet
    button.btn-icon.btn-icon--sm
      svg.icon-24
        use(href='/svg/24x24/line/close.svg#close-line-24')
  .prismea-landingpage-cookie-modal-body
    .wysiwyg.color-grey--700.mx-8
      p.branding-text-md.color-grey--700.my-4.
        Lorem ipsum dolor sit, amet consectetur adipisicing elit. Laboriosam assumenda porro, a consequuntur, modi sunt quod voluptate unde accusantium beatae quasi ab. Quaerat ea repudiandae ab totam modi animi velit!
        
    ul.prismea-vertical-spacing-35--slot
      li.flex.flex-gap-5.mt-7
        .w-15.h-15.bg-color-grey--100.flex.flex-justify-center.flex-align-center.flex-no-shrink
          svg.icon-40.icon-color-primary--500
            use(href='/svg/40x40/line/chart-bar-line.svg#chart-bar-line-line-40')
        div
          p.branding-text-md.color-grey--700.mb-5
            span.color-grey--800.font-weight-medium Lorem ipsum dolor sit amet, consectetur adipiscing elit :
            | Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque bibendum cursus ipsum, dictum consequat ipsum tempus quis. Nulla suscipit gravida ultricies.

          button.prismea-switch.-off.-with-label(role='switch', aria-checked='false', aria-label='Switch')
            span.prismea-switch--label.-color-light Off
            i.prismea-switch--button
      li.flex.flex-gap-5.mt-7
        .w-15.h-15.bg-color-grey--100.flex.flex-justify-center.flex-align-center.flex-no-shrink
          svg.icon-40.icon-color-primary--500
            use(href='/svg/40x40/line/chart-bar-line.svg#chart-bar-line-line-40')
        div
          p.branding-text-md.color-grey--700.mb-5
            span.color-grey--800.font-weight-medium Lorem ipsum dolor sit amet, consectetur adipiscing elit :
            | Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque bibendum cursus ipsum, dictum consequat ipsum tempus quis. Nulla suscipit gravida ultricies.

          button.prismea-switch.-on.-with-label(role='switch', aria-checked='true', aria-label='Switch')
            span.prismea-switch--label.-color-light On
            i.prismea-switch--button
      li.flex.flex-gap-5.mt-7
        .w-15.h-15.bg-color-grey--100.flex.flex-justify-center.flex-align-center.flex-no-shrink
          svg.icon-40.icon-color-primary--500
            use(href='/svg/40x40/line/chart-bar-line.svg#chart-bar-line-line-40')
        div
          p.branding-text-md.color-grey--700.mb-5
            span.color-grey--800.font-weight-medium Lorem ipsum dolor sit amet, consectetur adipiscing elit :
            | Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque bibendum cursus ipsum, dictum consequat ipsum tempus quis. Nulla suscipit gravida ultricies.

          button.prismea-switch.-off.-with-label(role='switch', aria-checked='false', aria-label='Switch')
            span.prismea-switch--label.-color-light Off
            i.prismea-switch--button
  .prismea-landingpage-cookie-footer
    .flex.flex-justify-center.prismea-vertical-spacing-10--slot
      a.btn.btn--md.btn--primary Lorem ipsum
    .prismea-landingpage-cookie-footer-links.prismea-vertical-spacing-10--slot
      a.prismea-text.-size-14.prismea-color.-color-primary-500.-underline Lorem ipsum dolor sit amet
      a.prismea-text.-size-14.prismea-color.-color-grey-700.-underline Lorem ipsum dolor

Error Header

Diplayed only on the error template.

<div class="prismea-landingpage-error-header">
  <div class="prismea-content-container prismea-color -color-white">
    <div class="prismea-vertical-spacing-10 -center">
      <p class="prismea-vertical-spacing-5--slot prismea-text -size-80 -text-medium">404</p>
      <p class="prismea-vertical-spacing-20--slot prismea-text -size-30">La page que vous<br/>recherchez n'existe pas</p>
      <p class="prismea-vertical-spacing-20--slot prismea-text">Nous sommes désolé mais il semblerait que la page à laquelle vous souhaitez accéder n’existe pas.</p>
      <div class="flex flex-justify-center prismea-vertical-spacing-30--slot">
        <a class="btn btn--lg btn--primary btn--responsive">Lorem ipsum</a>
      </div>
    </div>
  </div>
</div>
.prismea-landingpage-error-header
  .prismea-content-container.prismea-color.-color-white
    .prismea-vertical-spacing-10.-center
      p.prismea-vertical-spacing-5--slot.prismea-text.-size-80.-text-medium 404
      p.prismea-vertical-spacing-20--slot.prismea-text.-size-30
        | La page que vous
        br
        | recherchez n'existe pas
      p.prismea-vertical-spacing-20--slot.prismea-text Nous sommes désolé mais il semblerait que la page à laquelle vous souhaitez accéder n’existe pas.
      .flex.flex-justify-center.prismea-vertical-spacing-30--slot
        a.btn.btn--lg.btn--primary.btn--responsive Lorem ipsum

Displayed on bottom of each page.

<footer class="footer">
  <div class="prismea-content-container">
    <div class="footer__navigation">
      <div class="footer__navigation-column"><a>
          <svg class="w-32 h-12">
            <use href="/svg/logo.svg#logo"></use>
          </svg></a>
        <div class="trustpilot-rating mt-7">
          <div class="trustpilot-rating__stars">
            <div class="trustpilot-rating__stars-off">
              <svg class="icon-32 icon-color-grey--800 trustpilot-rating__star">
                <use href="/projects/landingpage/svg/32x32/bold/trustpilot-star.svg#trustpilot-star-bold-32"></use>
              </svg>
              <svg class="icon-32 icon-color-grey--800 trustpilot-rating__star">
                <use href="/projects/landingpage/svg/32x32/bold/trustpilot-star.svg#trustpilot-star-bold-32"></use>
              </svg>
              <svg class="icon-32 icon-color-grey--800 trustpilot-rating__star">
                <use href="/projects/landingpage/svg/32x32/bold/trustpilot-star.svg#trustpilot-star-bold-32"></use>
              </svg>
              <svg class="icon-32 icon-color-grey--800 trustpilot-rating__star">
                <use href="/projects/landingpage/svg/32x32/bold/trustpilot-star.svg#trustpilot-star-bold-32"></use>
              </svg>
              <svg class="icon-32 icon-color-grey--800 trustpilot-rating__star">
                <use href="/projects/landingpage/svg/32x32/bold/trustpilot-star.svg#trustpilot-star-bold-32"></use>
              </svg>
            </div>
            <div class="trustpilot-rating__stars-on" style="width: 88.00000000000001%;">
              <svg class="icon-32 icon-color-primary--600 trustpilot-rating__star">
                <use href="/projects/landingpage/svg/32x32/bold/trustpilot-star.svg#trustpilot-star-bold-32"></use>
              </svg>
              <svg class="icon-32 icon-color-primary--600 trustpilot-rating__star">
                <use href="/projects/landingpage/svg/32x32/bold/trustpilot-star.svg#trustpilot-star-bold-32"></use>
              </svg>
              <svg class="icon-32 icon-color-primary--600 trustpilot-rating__star">
                <use href="/projects/landingpage/svg/32x32/bold/trustpilot-star.svg#trustpilot-star-bold-32"></use>
              </svg>
              <svg class="icon-32 icon-color-primary--600 trustpilot-rating__star">
                <use href="/projects/landingpage/svg/32x32/bold/trustpilot-star.svg#trustpilot-star-bold-32"></use>
              </svg>
              <svg class="icon-32 icon-color-primary--600 trustpilot-rating__star">
                <use href="/projects/landingpage/svg/32x32/bold/trustpilot-star.svg#trustpilot-star-bold-32"></use>
              </svg>
            </div>
          </div>
        </div>
        <p class="branding-text-md color-grey--800 font-weight-medium mt-2"><span class="color-primary--600">4,4</span> sur Trustpilot | 40 avis
        </p>
      </div>
      <div class="footer__navigation-column footer__navigation-dropdown footer__navigation-dropdown--open">
        <div class="flex flex-justify-space-between flex-align-center overflow-h">
          <div class="footer__navigation-dropdown-input">Lorem ipusm</div>
          <svg class="icon-16 icon-rotate-180 icon-color-grey--800 footer__navigation-dropdown-chevron">
            <use href="/svg/16x16/line/chevron-up.svg#chevron-up-line-16"></use>
          </svg>
        </div>
        <ul class="footer__navigation-dropdown-options">
          <li><a class="footer__navigation-dropdown-option color-grey--800 hover-color-grey--900">Lorem ipsum</a></li>
          <li><a class="footer__navigation-dropdown-option color-grey--800 hover-color-grey--900">Lorem ipsum dolor sit</a></li>
          <li><a class="footer__navigation-dropdown-option color-grey--800 hover-color-grey--900">Lorem ipsum dolor</a></li>
        </ul>
      </div>
      <div class="footer__navigation-column footer__navigation-dropdown">
        <div class="flex flex-justify-space-between flex-align-center overflow-h">
          <div class="footer__navigation-dropdown-input">Lorem ipusm</div>
          <svg class="icon-16 icon-rotate-180 icon-color-grey--800 footer__navigation-dropdown-chevron">
            <use href="/svg/16x16/line/chevron-up.svg#chevron-up-line-16"></use>
          </svg>
        </div>
        <ul class="footer__navigation-dropdown-options">
          <li><a class="footer__navigation-dropdown-option color-grey--800 hover-color-grey--900">Lorem ipsum</a></li>
          <li><a class="footer__navigation-dropdown-option color-grey--800 hover-color-grey--900">Lorem ipsum dolor sit</a></li>
          <li><a class="footer__navigation-dropdown-option color-grey--800 hover-color-grey--900">Lorem ipsum dolor</a></li>
        </ul>
      </div>
      <div class="footer__navigation-column footer__navigation-dropdown">
        <div class="flex flex-justify-space-between flex-align-center overflow-h">
          <div class="footer__navigation-dropdown-input">Lorem ipusm</div>
          <svg class="icon-16 icon-rotate-180 icon-color-grey--800 footer__navigation-dropdown-chevron">
            <use href="/svg/16x16/line/chevron-up.svg#chevron-up-line-16"></use>
          </svg>
        </div>
        <ul class="footer__navigation-dropdown-options">
          <li><a class="footer__navigation-dropdown-option color-grey--800 hover-color-grey--900">Lorem ipsum</a></li>
          <li><a class="footer__navigation-dropdown-option color-grey--800 hover-color-grey--900">Lorem ipsum dolor sit</a></li>
          <li><a class="footer__navigation-dropdown-option color-grey--800 hover-color-grey--900">Lorem ipsum dolor</a></li>
        </ul>
      </div>
    </div>
    <div class="footer__slip">
      <div class="footer__copyright">Lorem ipsum dolor sit</div>
      <div class="flex flex-gap-5"><a>
          <svg class="icon-32 icon-color-primary--600 hover-icon-color-primary--700">
            <use href="/projects/landingpage/svg/32x32/bold/twitter.svg#twitter-bold-32"></use>
          </svg></a><a>
          <svg class="icon-32 icon-color-primary--600 hover-icon-color-primary--700">
            <use href="/projects/landingpage/svg/32x32/bold/linkedin.svg#linkedin-bold-32"></use>
          </svg></a><a>
          <svg class="icon-32 icon-color-primary--600 hover-icon-color-primary--700">
            <use href="/projects/landingpage/svg/32x32/bold/facebook.svg#facebook-bold-32"></use>
          </svg></a><a>
          <svg class="icon-32 icon-color-primary--600 hover-icon-color-primary--700">
            <use href="/projects/landingpage/svg/32x32/bold/instagram.svg#instagram-bold-32"></use>
          </svg></a></div>
      <div class="flex flex-gap-2"><a class="prismea-landingpage-store-link" href="https://play.google.com/store/apps/details?id=com.prismea.android&amp;pcampaignid=pcampaignidMKT-Other-global-all-co-prtnr-py-PartBadge-Mar2515-1"><img src="https://lh3.googleusercontent.com/qF9r3ZjtgG-qyHdmjecArtKiulz1gmwL_xl9R3_fzk6igSeoN0wYbJSKEX5d_fxJRwYZJpHbqcLB3i9atl-9dOfUl9an7U43TfZ9PtQ=s0" alt="Disponible sur Google Play"/></a><a class="prismea-landingpage-store-link" href="https://apps.apple.com/fr/app/prismea/id1471623555?itsct=apps_box&amp;amp;itscg=30200"><img src="https://tools.applemediaservices.com/api/badges/download-on-the-app-store/black/fr-fr?size=250x83&amp;amp;releaseDate=1587168000&amp;h=12208210dfd04a56e78e84f453aaabd5" alt="Disponible sur l'App Store"/></a>
      </div>
    </div>
    <div class="footer__mentions">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Molestias eum nam voluptatum quod saepe, qui, blanditiis error sequi voluptatem libero quam facere adipisci sit? Perspiciatis autem eligendi quisquam ex asperiores!</div>
  </div>
</footer>
footer.footer
  .prismea-content-container
    .footer__navigation
      .footer__navigation-column
        a
          svg.w-32.h-12
            use(href='/svg/logo.svg#logo')
        .trustpilot-rating.mt-7
          .trustpilot-rating__stars
            .trustpilot-rating__stars-off
              svg.icon-32.icon-color-grey--800.trustpilot-rating__star
                use(href='/projects/landingpage/svg/32x32/bold/trustpilot-star.svg#trustpilot-star-bold-32')
              svg.icon-32.icon-color-grey--800.trustpilot-rating__star
                use(href='/projects/landingpage/svg/32x32/bold/trustpilot-star.svg#trustpilot-star-bold-32')
              svg.icon-32.icon-color-grey--800.trustpilot-rating__star
                use(href='/projects/landingpage/svg/32x32/bold/trustpilot-star.svg#trustpilot-star-bold-32')
              svg.icon-32.icon-color-grey--800.trustpilot-rating__star
                use(href='/projects/landingpage/svg/32x32/bold/trustpilot-star.svg#trustpilot-star-bold-32')
              svg.icon-32.icon-color-grey--800.trustpilot-rating__star
                use(href='/projects/landingpage/svg/32x32/bold/trustpilot-star.svg#trustpilot-star-bold-32')
            .trustpilot-rating__stars-on(style='width: 88.00000000000001%;')
              svg.icon-32.icon-color-primary--600.trustpilot-rating__star
                use(href='/projects/landingpage/svg/32x32/bold/trustpilot-star.svg#trustpilot-star-bold-32')
              svg.icon-32.icon-color-primary--600.trustpilot-rating__star
                use(href='/projects/landingpage/svg/32x32/bold/trustpilot-star.svg#trustpilot-star-bold-32')
              svg.icon-32.icon-color-primary--600.trustpilot-rating__star
                use(href='/projects/landingpage/svg/32x32/bold/trustpilot-star.svg#trustpilot-star-bold-32')
              svg.icon-32.icon-color-primary--600.trustpilot-rating__star
                use(href='/projects/landingpage/svg/32x32/bold/trustpilot-star.svg#trustpilot-star-bold-32')
              svg.icon-32.icon-color-primary--600.trustpilot-rating__star
                use(href='/projects/landingpage/svg/32x32/bold/trustpilot-star.svg#trustpilot-star-bold-32')
        p.branding-text-md.color-grey--800.font-weight-medium.mt-2
          span.color-primary--600 4,4
          |  sur Trustpilot | 40 avis

      .footer__navigation-column.footer__navigation-dropdown.footer__navigation-dropdown--open
        .flex.flex-justify-space-between.flex-align-center.overflow-h
          .footer__navigation-dropdown-input Lorem ipusm
          svg.icon-16.icon-rotate-180.icon-color-grey--800.footer__navigation-dropdown-chevron
            use(href='/svg/16x16/line/chevron-up.svg#chevron-up-line-16')
        ul.footer__navigation-dropdown-options
          li
            a.footer__navigation-dropdown-option.color-grey--800.hover-color-grey--900 Lorem ipsum
          li
            a.footer__navigation-dropdown-option.color-grey--800.hover-color-grey--900 Lorem ipsum dolor sit
          li
            a.footer__navigation-dropdown-option.color-grey--800.hover-color-grey--900 Lorem ipsum dolor
      .footer__navigation-column.footer__navigation-dropdown
        .flex.flex-justify-space-between.flex-align-center.overflow-h
          .footer__navigation-dropdown-input Lorem ipusm
          svg.icon-16.icon-rotate-180.icon-color-grey--800.footer__navigation-dropdown-chevron
            use(href='/svg/16x16/line/chevron-up.svg#chevron-up-line-16')
        ul.footer__navigation-dropdown-options
          li
            a.footer__navigation-dropdown-option.color-grey--800.hover-color-grey--900 Lorem ipsum
          li
            a.footer__navigation-dropdown-option.color-grey--800.hover-color-grey--900 Lorem ipsum dolor sit
          li
            a.footer__navigation-dropdown-option.color-grey--800.hover-color-grey--900 Lorem ipsum dolor
      .footer__navigation-column.footer__navigation-dropdown
        .flex.flex-justify-space-between.flex-align-center.overflow-h
          .footer__navigation-dropdown-input Lorem ipusm
          svg.icon-16.icon-rotate-180.icon-color-grey--800.footer__navigation-dropdown-chevron
            use(href='/svg/16x16/line/chevron-up.svg#chevron-up-line-16')
        ul.footer__navigation-dropdown-options
          li
            a.footer__navigation-dropdown-option.color-grey--800.hover-color-grey--900 Lorem ipsum
          li
            a.footer__navigation-dropdown-option.color-grey--800.hover-color-grey--900 Lorem ipsum dolor sit
          li
            a.footer__navigation-dropdown-option.color-grey--800.hover-color-grey--900 Lorem ipsum dolor
    .footer__slip
      .footer__copyright Lorem ipsum dolor sit
      .flex.flex-gap-5
        a
          svg.icon-32.icon-color-primary--600.hover-icon-color-primary--700
            use(href='/projects/landingpage/svg/32x32/bold/twitter.svg#twitter-bold-32')
        a
          svg.icon-32.icon-color-primary--600.hover-icon-color-primary--700
            use(href='/projects/landingpage/svg/32x32/bold/linkedin.svg#linkedin-bold-32')
        a
          svg.icon-32.icon-color-primary--600.hover-icon-color-primary--700
            use(href='/projects/landingpage/svg/32x32/bold/facebook.svg#facebook-bold-32')
        a
          svg.icon-32.icon-color-primary--600.hover-icon-color-primary--700
            use(href='/projects/landingpage/svg/32x32/bold/instagram.svg#instagram-bold-32')
      .flex.flex-gap-2
        a.prismea-landingpage-store-link(href='https://play.google.com/store/apps/details?id=com.prismea.android&pcampaignid=pcampaignidMKT-Other-global-all-co-prtnr-py-PartBadge-Mar2515-1')
          img(src='https://lh3.googleusercontent.com/qF9r3ZjtgG-qyHdmjecArtKiulz1gmwL_xl9R3_fzk6igSeoN0wYbJSKEX5d_fxJRwYZJpHbqcLB3i9atl-9dOfUl9an7U43TfZ9PtQ=s0', alt='Disponible sur Google Play')
        a.prismea-landingpage-store-link(href='https://apps.apple.com/fr/app/prismea/id1471623555?itsct=apps_box&amp;itscg=30200')
          img(src='https://tools.applemediaservices.com/api/badges/download-on-the-app-store/black/fr-fr?size=250x83&amp;releaseDate=1587168000&h=12208210dfd04a56e78e84f453aaabd5', alt='Disponible sur l\'App Store')
    .footer__mentions Lorem ipsum dolor, sit amet consectetur adipisicing elit. Molestias eum nam voluptatum quod saepe, qui, blanditiis error sequi voluptatem libero quam facere adipisci sit? Perspiciatis autem eligendi quisquam ex asperiores!

You can use the following variants:

  • -fixed: the menu is fixed at the top of the page
  • -transparent: the menu has no background
  • -minified: only the logo is displayed
  • -open: for mobile devices, the links are displayed
  • Add a search button
<nav class="menu menu--fixed"><a class="menu__logo h-9 mr-16">
    <svg class="w-24 h-9">
      <use href="/svg/logo-sm.svg#logo-sm"></use>
    </svg></a>
  <div class="menu__buttons">
    <div class="menu__button-open">
      <svg class="icon-24 icon-color-grey--800">
        <use href="/projects/landingpage/svg/24x24/bold/burger.svg#burger-bold-24"></use>
      </svg>
    </div>
    <div class="menu__button-close">
      <svg class="icon-24 icon-color-grey--800">
        <use href="/svg/24x24/line/close.svg#close-line-24"></use>
      </svg>
    </div>
  </div>
  <ul class="menu__navigation">
    <li class="menu__navigation-element">
      <div class="menu__navigation-dropdown">
        <div class="flex flex-gap-1 flex-align-center overflow-h">
          <div class="menu__navigation-dropdown-input">Lorem ipusm</div>
          <svg class="icon-16 icon-rotate-180 icon-color-primary--500 menu__navigation-dropdown-chevron">
            <use href="/svg/16x16/line/chevron-up.svg#chevron-up-line-16"></use>
          </svg>
        </div>
        <ul class="menu__navigation-dropdown-options">
          <li><a class="menu__navigation-dropdown-option">Lorem ipsum</a></li>
          <li><a class="menu__navigation-dropdown-option">Lorem ipsum dolor sit</a></li>
          <li><a class="menu__navigation-dropdown-option">Lorem ipsum dolor</a></li>
          <li><a class="menu__navigation-dropdown-option">Lorem ipsum dolor sit amet</a></li>
        </ul>
      </div>
    </li>
    <li class="menu__navigation-element"><a class="menu__navigation-link">Lorem ipsum</a></li>
    <li class="menu__navigation-element">
      <div class="menu__navigation-dropdown">
        <div class="flex flex-gap-1 flex-align-centerr overflow-h">
          <div class="menu__navigation-dropdown-input">Lorem ipusm</div>
          <svg class="icon-16 icon-rotate-180 icon-color-primary--500 menu__navigation-dropdown-chevron">
            <use href="/svg/16x16/line/chevron-up.svg#chevron-up-line-16"></use>
          </svg>
        </div>
        <ul class="menu__navigation-dropdown-options">
          <li><a class="menu__navigation-dropdown-option">Lorem ipsum</a></li>
          <li><a class="menu__navigation-dropdown-option">Lorem ipsum dolor sit</a></li>
        </ul>
      </div>
    </li>
    <li class="menu__navigation-element"><a class="menu__navigation-link">Lorem ipsum</a></li>
    <li class="menu__navigation-element">
      <a class="btn btn--md btn--primary btn--responsive">Lorem ipsum</a>
    </li>
  </ul>
</nav>
<div style="position: relative; top: 90px;">
  <nav class="menu menu--transparent"><a class="menu__logo h-9 mr-16">
      <svg class="w-24 h-9">
        <use href="/svg/logo-sm.svg#logo-sm"></use>
      </svg></a>
    <div class="menu__buttons">
      <div class="menu__button-open">
        <svg class="icon-24 icon-color-grey--800">
          <use href="/projects/landingpage/svg/24x24/bold/burger.svg#burger-bold-24"></use>
        </svg>
      </div>
      <div class="menu__button-close">
        <svg class="icon-24 icon-color-grey--800">
          <use href="/svg/24x24/line/close.svg#close-line-24"></use>
        </svg>
      </div>
    </div>
    <ul class="menu__navigation">
      <li class="menu__navigation-element">
        <div class="menu__navigation-dropdown">
          <div class="flex flex-gap-1 flex-align-center overflow-h">
            <div class="menu__navigation-dropdown-input">Lorem ipusm</div>
            <svg class="icon-16 icon-rotate-180 icon-color-primary--500 menu__navigation-dropdown-chevron">
              <use href="/svg/16x16/line/chevron-up.svg#chevron-up-line-16"></use>
            </svg>
          </div>
          <ul class="menu__navigation-dropdown-options">
            <li><a class="menu__navigation-dropdown-option">Lorem ipsum</a></li>
            <li><a class="menu__navigation-dropdown-option">Lorem ipsum dolor sit</a></li>
            <li><a class="menu__navigation-dropdown-option">Lorem ipsum dolor</a></li>
            <li><a class="menu__navigation-dropdown-option">Lorem ipsum dolor sit amet</a></li>
          </ul>
        </div>
      </li>
      <li class="menu__navigation-element"><a class="menu__navigation-link">Lorem ipsum</a></li>
      <li class="menu__navigation-element">
        <div class="menu__navigation-dropdown">
          <div class="flex flex-gap-1 flex-align-centerr overflow-h">
            <div class="menu__navigation-dropdown-input">Lorem ipusm</div>
            <svg class="icon-16 icon-rotate-180 icon-color-primary--500 menu__navigation-dropdown-chevron">
              <use href="/svg/16x16/line/chevron-up.svg#chevron-up-line-16"></use>
            </svg>
          </div>
          <ul class="menu__navigation-dropdown-options">
            <li><a class="menu__navigation-dropdown-option">Lorem ipsum</a></li>
            <li><a class="menu__navigation-dropdown-option">Lorem ipsum dolor sit</a></li>
          </ul>
        </div>
      </li>
      <li class="menu__navigation-element"><a class="menu__navigation-link">Lorem ipsum</a></li>
      <li class="menu__navigation-element">
        <a class="btn btn--md btn--primary btn--responsive">Lorem ipsum</a>
      </li>
    </ul>
  </nav>
</div>
<div style="position: relative; top: 180px;">
  <nav class="menu menu--transparent menu--minified"><a class="menu__logo h-9 mr-16">
      <svg class="w-24 h-9">
        <use href="/svg/logo-sm.svg#logo-sm"></use>
      </svg></a>
    <div class="menu__buttons">
      <div class="menu__button-open">
        <svg class="icon-24 icon-color-grey--800">
          <use href="/projects/landingpage/svg/24x24/bold/burger.svg#burger-bold-24"></use>
        </svg>
      </div>
      <div class="menu__button-close">
        <svg class="icon-24 icon-color-grey--800">
          <use href="/svg/24x24/line/close.svg#close-line-24"></use>
        </svg>
      </div>
    </div>
    <ul class="menu__navigation">
      <li class="menu__navigation-element">
        <div class="menu__navigation-dropdown">
          <div class="flex flex-gap-1 flex-align-center overflow-h">
            <div class="menu__navigation-dropdown-input">Lorem ipusm</div>
            <svg class="icon-16 icon-rotate-180 icon-color-primary--500 menu__navigation-dropdown-chevron">
              <use href="/svg/16x16/line/chevron-up.svg#chevron-up-line-16"></use>
            </svg>
          </div>
          <ul class="menu__navigation-dropdown-options">
            <li><a class="menu__navigation-dropdown-option">Lorem ipsum</a></li>
            <li><a class="menu__navigation-dropdown-option">Lorem ipsum dolor sit</a></li>
            <li><a class="menu__navigation-dropdown-option">Lorem ipsum dolor</a></li>
            <li><a class="menu__navigation-dropdown-option">Lorem ipsum dolor sit amet</a></li>
          </ul>
        </div>
      </li>
      <li class="menu__navigation-element"><a class="menu__navigation-link">Lorem ipsum</a></li>
      <li class="menu__navigation-element">
        <div class="menu__navigation-dropdown">
          <div class="flex flex-gap-1 flex-align-centerr overflow-h">
            <div class="menu__navigation-dropdown-input">Lorem ipusm</div>
            <svg class="icon-16 icon-rotate-180 icon-color-primary--500 menu__navigation-dropdown-chevron">
              <use href="/svg/16x16/line/chevron-up.svg#chevron-up-line-16"></use>
            </svg>
          </div>
          <ul class="menu__navigation-dropdown-options">
            <li><a class="menu__navigation-dropdown-option">Lorem ipsum</a></li>
            <li><a class="menu__navigation-dropdown-option">Lorem ipsum dolor sit</a></li>
          </ul>
        </div>
      </li>
      <li class="menu__navigation-element"><a class="menu__navigation-link">Lorem ipsum</a></li>
      <li class="menu__navigation-element">
        <a class="btn btn--md btn--primary btn--responsive">Lorem ipsum</a>
      </li>
    </ul>
  </nav>
</div>
<div style="position: relative; top: 270px;">
  <nav class="menu"><a class="menu__logo h-9 mr-16">
      <svg class="w-24 h-9">
        <use href="/svg/logo-sm.svg#logo-sm"></use>
      </svg></a>
    <div class="menu__buttons">
      <div class="menu__button-search">
        <svg class="icon-24 icon-color-grey--800">
          <use href="/svg/24x24/line/search.svg#search-line-24"></use>
        </svg>
      </div>
      <div class="menu__button-open">
        <svg class="icon-24 icon-color-grey--800">
          <use href="/projects/landingpage/svg/24x24/bold/burger.svg#burger-bold-24"></use>
        </svg>
      </div>
      <div class="menu__button-close">
        <svg class="icon-24 icon-color-grey--800">
          <use href="/svg/24x24/line/close.svg#close-line-24"></use>
        </svg>
      </div>
    </div>
    <ul class="menu__navigation">
      <li class="menu__navigation-element">
        <div class="menu__navigation-dropdown">
          <div class="flex flex-gap-1 flex-align-center overflow-h">
            <div class="menu__navigation-dropdown-input">Lorem ipusm</div>
            <svg class="icon-16 icon-rotate-180 icon-color-primary--500 menu__navigation-dropdown-chevron">
              <use href="/svg/16x16/line/chevron-up.svg#chevron-up-line-16"></use>
            </svg>
          </div>
          <ul class="menu__navigation-dropdown-options">
            <li><a class="menu__navigation-dropdown-option">Lorem ipsum</a></li>
            <li><a class="menu__navigation-dropdown-option">Lorem ipsum dolor sit</a></li>
            <li><a class="menu__navigation-dropdown-option">Lorem ipsum dolor</a></li>
            <li><a class="menu__navigation-dropdown-option">Lorem ipsum dolor sit amet</a></li>
          </ul>
        </div>
      </li>
      <li class="menu__navigation-element"><a class="menu__navigation-link">Lorem ipsum</a></li>
      <li class="menu__navigation-element">
        <div class="menu__navigation-dropdown">
          <div class="flex flex-gap-1 flex-align-centerr overflow-h">
            <div class="menu__navigation-dropdown-input">Lorem ipusm</div>
            <svg class="icon-16 icon-rotate-180 icon-color-primary--500 menu__navigation-dropdown-chevron">
              <use href="/svg/16x16/line/chevron-up.svg#chevron-up-line-16"></use>
            </svg>
          </div>
          <ul class="menu__navigation-dropdown-options">
            <li><a class="menu__navigation-dropdown-option">Lorem ipsum</a></li>
            <li><a class="menu__navigation-dropdown-option">Lorem ipsum dolor sit</a></li>
          </ul>
        </div>
      </li>
      <li class="menu__navigation-element"><a class="menu__navigation-link">Lorem ipsum</a></li>
      <li class="menu__navigation-element">
        <a class="btn btn--md btn--primary btn--responsive">Lorem ipsum</a>
      </li>
    </ul>
  </nav>
</div>
<div style="position: relative; top: 360px;">
  <nav class="menu menu--open"><a class="menu__logo h-9 mr-16">
      <svg class="w-24 h-9">
        <use href="/svg/logo-sm.svg#logo-sm"></use>
      </svg></a>
    <div class="menu__buttons">
      <div class="menu__button-open">
        <svg class="icon-24 icon-color-grey--800">
          <use href="/projects/landingpage/svg/24x24/bold/burger.svg#burger-bold-24"></use>
        </svg>
      </div>
      <div class="menu__button-close">
        <svg class="icon-24 icon-color-grey--800">
          <use href="/svg/24x24/line/close.svg#close-line-24"></use>
        </svg>
      </div>
    </div>
    <ul class="menu__navigation">
      <li class="menu__navigation-element">
        <div class="menu__navigation-dropdown">
          <div class="flex flex-gap-1 flex-align-center overflow-h">
            <div class="menu__navigation-dropdown-input">Lorem ipusm</div>
            <svg class="icon-16 icon-rotate-180 icon-color-primary--500 menu__navigation-dropdown-chevron">
              <use href="/svg/16x16/line/chevron-up.svg#chevron-up-line-16"></use>
            </svg>
          </div>
          <ul class="menu__navigation-dropdown-options">
            <li><a class="menu__navigation-dropdown-option">Lorem ipsum</a></li>
            <li><a class="menu__navigation-dropdown-option">Lorem ipsum dolor sit</a></li>
            <li><a class="menu__navigation-dropdown-option">Lorem ipsum dolor</a></li>
            <li><a class="menu__navigation-dropdown-option">Lorem ipsum dolor sit amet</a></li>
          </ul>
        </div>
      </li>
      <li class="menu__navigation-element"><a class="menu__navigation-link">Lorem ipsum</a></li>
      <li class="menu__navigation-element">
        <div class="menu__navigation-dropdown">
          <div class="flex flex-gap-1 flex-align-centerr overflow-h">
            <div class="menu__navigation-dropdown-input">Lorem ipusm</div>
            <svg class="icon-16 icon-rotate-180 icon-color-primary--500 menu__navigation-dropdown-chevron">
              <use href="/svg/16x16/line/chevron-up.svg#chevron-up-line-16"></use>
            </svg>
          </div>
          <ul class="menu__navigation-dropdown-options">
            <li><a class="menu__navigation-dropdown-option">Lorem ipsum</a></li>
            <li><a class="menu__navigation-dropdown-option">Lorem ipsum dolor sit</a></li>
          </ul>
        </div>
      </li>
      <li class="menu__navigation-element"><a class="menu__navigation-link">Lorem ipsum</a></li>
      <li class="menu__navigation-element">
        <a class="btn btn--md btn--primary btn--responsive">Lorem ipsum</a>
      </li>
    </ul>
  </nav>
</div>
nav.menu.menu--fixed
  a.menu__logo.h-9.mr-16
    svg.w-24.h-9
      use(href='/svg/logo-sm.svg#logo-sm')
  .menu__buttons
    .menu__button-open
      svg.icon-24.icon-color-grey--800
        use(href='/projects/landingpage/svg/24x24/bold/burger.svg#burger-bold-24')
    .menu__button-close
      svg.icon-24.icon-color-grey--800
        use(href='/svg/24x24/line/close.svg#close-line-24')
  ul.menu__navigation
    li.menu__navigation-element
      .menu__navigation-dropdown
        .flex.flex-gap-1.flex-align-center.overflow-h
          .menu__navigation-dropdown-input Lorem ipusm
          svg.icon-16.icon-rotate-180.icon-color-primary--500.menu__navigation-dropdown-chevron
            use(href='/svg/16x16/line/chevron-up.svg#chevron-up-line-16')
        ul.menu__navigation-dropdown-options
          li
            a.menu__navigation-dropdown-option Lorem ipsum
          li
            a.menu__navigation-dropdown-option Lorem ipsum dolor sit
          li
            a.menu__navigation-dropdown-option Lorem ipsum dolor
          li
            a.menu__navigation-dropdown-option Lorem ipsum dolor sit amet
    li.menu__navigation-element
      a.menu__navigation-link Lorem ipsum
    li.menu__navigation-element
      .menu__navigation-dropdown
        .flex.flex-gap-1.flex-align-centerr.overflow-h
          .menu__navigation-dropdown-input Lorem ipusm
          svg.icon-16.icon-rotate-180.icon-color-primary--500.menu__navigation-dropdown-chevron
            use(href='/svg/16x16/line/chevron-up.svg#chevron-up-line-16')
        ul.menu__navigation-dropdown-options
          li
            a.menu__navigation-dropdown-option Lorem ipsum
          li
            a.menu__navigation-dropdown-option Lorem ipsum dolor sit
    li.menu__navigation-element
      a.menu__navigation-link Lorem ipsum
    li.menu__navigation-element
      a.btn.btn--md.btn--primary.btn--responsive Lorem ipsum
div(style='position: relative; top: 90px;')
  nav.menu.menu--transparent
    a.menu__logo.h-9.mr-16
      svg.w-24.h-9
        use(href='/svg/logo-sm.svg#logo-sm')
    .menu__buttons
      .menu__button-open
        svg.icon-24.icon-color-grey--800
          use(href='/projects/landingpage/svg/24x24/bold/burger.svg#burger-bold-24')
      .menu__button-close
        svg.icon-24.icon-color-grey--800
          use(href='/svg/24x24/line/close.svg#close-line-24')
    ul.menu__navigation
      li.menu__navigation-element
        .menu__navigation-dropdown
          .flex.flex-gap-1.flex-align-center.overflow-h
            .menu__navigation-dropdown-input Lorem ipusm
            svg.icon-16.icon-rotate-180.icon-color-primary--500.menu__navigation-dropdown-chevron
              use(href='/svg/16x16/line/chevron-up.svg#chevron-up-line-16')
          ul.menu__navigation-dropdown-options
            li
              a.menu__navigation-dropdown-option Lorem ipsum
            li
              a.menu__navigation-dropdown-option Lorem ipsum dolor sit
            li
              a.menu__navigation-dropdown-option Lorem ipsum dolor
            li
              a.menu__navigation-dropdown-option Lorem ipsum dolor sit amet
      li.menu__navigation-element
        a.menu__navigation-link Lorem ipsum
      li.menu__navigation-element
        .menu__navigation-dropdown
          .flex.flex-gap-1.flex-align-centerr.overflow-h
            .menu__navigation-dropdown-input Lorem ipusm
            svg.icon-16.icon-rotate-180.icon-color-primary--500.menu__navigation-dropdown-chevron
              use(href='/svg/16x16/line/chevron-up.svg#chevron-up-line-16')
          ul.menu__navigation-dropdown-options
            li
              a.menu__navigation-dropdown-option Lorem ipsum
            li
              a.menu__navigation-dropdown-option Lorem ipsum dolor sit
      li.menu__navigation-element
        a.menu__navigation-link Lorem ipsum
      li.menu__navigation-element
        a.btn.btn--md.btn--primary.btn--responsive Lorem ipsum
div(style='position: relative; top: 180px;')
  nav.menu.menu--transparent.menu--minified
    a.menu__logo.h-9.mr-16
      svg.w-24.h-9
        use(href='/svg/logo-sm.svg#logo-sm')
    .menu__buttons
      .menu__button-open
        svg.icon-24.icon-color-grey--800
          use(href='/projects/landingpage/svg/24x24/bold/burger.svg#burger-bold-24')
      .menu__button-close
        svg.icon-24.icon-color-grey--800
          use(href='/svg/24x24/line/close.svg#close-line-24')
    ul.menu__navigation
      li.menu__navigation-element
        .menu__navigation-dropdown
          .flex.flex-gap-1.flex-align-center.overflow-h
            .menu__navigation-dropdown-input Lorem ipusm
            svg.icon-16.icon-rotate-180.icon-color-primary--500.menu__navigation-dropdown-chevron
              use(href='/svg/16x16/line/chevron-up.svg#chevron-up-line-16')
          ul.menu__navigation-dropdown-options
            li
              a.menu__navigation-dropdown-option Lorem ipsum
            li
              a.menu__navigation-dropdown-option Lorem ipsum dolor sit
            li
              a.menu__navigation-dropdown-option Lorem ipsum dolor
            li
              a.menu__navigation-dropdown-option Lorem ipsum dolor sit amet
      li.menu__navigation-element
        a.menu__navigation-link Lorem ipsum
      li.menu__navigation-element
        .menu__navigation-dropdown
          .flex.flex-gap-1.flex-align-centerr.overflow-h
            .menu__navigation-dropdown-input Lorem ipusm
            svg.icon-16.icon-rotate-180.icon-color-primary--500.menu__navigation-dropdown-chevron
              use(href='/svg/16x16/line/chevron-up.svg#chevron-up-line-16')
          ul.menu__navigation-dropdown-options
            li
              a.menu__navigation-dropdown-option Lorem ipsum
            li
              a.menu__navigation-dropdown-option Lorem ipsum dolor sit
      li.menu__navigation-element
        a.menu__navigation-link Lorem ipsum
      li.menu__navigation-element
        a.btn.btn--md.btn--primary.btn--responsive Lorem ipsum
div(style='position: relative; top: 270px;')
  nav.menu
    a.menu__logo.h-9.mr-16
      svg.w-24.h-9
        use(href='/svg/logo-sm.svg#logo-sm')
    .menu__buttons
      .menu__button-search
        svg.icon-24.icon-color-grey--800
          use(href='/svg/24x24/line/search.svg#search-line-24')
      .menu__button-open
        svg.icon-24.icon-color-grey--800
          use(href='/projects/landingpage/svg/24x24/bold/burger.svg#burger-bold-24')
      .menu__button-close
        svg.icon-24.icon-color-grey--800
          use(href='/svg/24x24/line/close.svg#close-line-24')
    ul.menu__navigation
      li.menu__navigation-element
        .menu__navigation-dropdown
          .flex.flex-gap-1.flex-align-center.overflow-h
            .menu__navigation-dropdown-input Lorem ipusm
            svg.icon-16.icon-rotate-180.icon-color-primary--500.menu__navigation-dropdown-chevron
              use(href='/svg/16x16/line/chevron-up.svg#chevron-up-line-16')
          ul.menu__navigation-dropdown-options
            li
              a.menu__navigation-dropdown-option Lorem ipsum
            li
              a.menu__navigation-dropdown-option Lorem ipsum dolor sit
            li
              a.menu__navigation-dropdown-option Lorem ipsum dolor
            li
              a.menu__navigation-dropdown-option Lorem ipsum dolor sit amet
      li.menu__navigation-element
        a.menu__navigation-link Lorem ipsum
      li.menu__navigation-element
        .menu__navigation-dropdown
          .flex.flex-gap-1.flex-align-centerr.overflow-h
            .menu__navigation-dropdown-input Lorem ipusm
            svg.icon-16.icon-rotate-180.icon-color-primary--500.menu__navigation-dropdown-chevron
              use(href='/svg/16x16/line/chevron-up.svg#chevron-up-line-16')
          ul.menu__navigation-dropdown-options
            li
              a.menu__navigation-dropdown-option Lorem ipsum
            li
              a.menu__navigation-dropdown-option Lorem ipsum dolor sit
      li.menu__navigation-element
        a.menu__navigation-link Lorem ipsum
      li.menu__navigation-element
        a.btn.btn--md.btn--primary.btn--responsive Lorem ipsum
div(style='position: relative; top: 360px;')
  nav.menu.menu--open
    a.menu__logo.h-9.mr-16
      svg.w-24.h-9
        use(href='/svg/logo-sm.svg#logo-sm')
    .menu__buttons
      .menu__button-open
        svg.icon-24.icon-color-grey--800
          use(href='/projects/landingpage/svg/24x24/bold/burger.svg#burger-bold-24')
      .menu__button-close
        svg.icon-24.icon-color-grey--800
          use(href='/svg/24x24/line/close.svg#close-line-24')
    ul.menu__navigation
      li.menu__navigation-element
        .menu__navigation-dropdown
          .flex.flex-gap-1.flex-align-center.overflow-h
            .menu__navigation-dropdown-input Lorem ipusm
            svg.icon-16.icon-rotate-180.icon-color-primary--500.menu__navigation-dropdown-chevron
              use(href='/svg/16x16/line/chevron-up.svg#chevron-up-line-16')
          ul.menu__navigation-dropdown-options
            li
              a.menu__navigation-dropdown-option Lorem ipsum
            li
              a.menu__navigation-dropdown-option Lorem ipsum dolor sit
            li
              a.menu__navigation-dropdown-option Lorem ipsum dolor
            li
              a.menu__navigation-dropdown-option Lorem ipsum dolor sit amet
      li.menu__navigation-element
        a.menu__navigation-link Lorem ipsum
      li.menu__navigation-element
        .menu__navigation-dropdown
          .flex.flex-gap-1.flex-align-centerr.overflow-h
            .menu__navigation-dropdown-input Lorem ipusm
            svg.icon-16.icon-rotate-180.icon-color-primary--500.menu__navigation-dropdown-chevron
              use(href='/svg/16x16/line/chevron-up.svg#chevron-up-line-16')
          ul.menu__navigation-dropdown-options
            li
              a.menu__navigation-dropdown-option Lorem ipsum
            li
              a.menu__navigation-dropdown-option Lorem ipsum dolor sit
      li.menu__navigation-element
        a.menu__navigation-link Lorem ipsum
      li.menu__navigation-element
        a.btn.btn--md.btn--primary.btn--responsive Lorem ipsum

Pre Footer

Displayed on the top of the breadcrumb and the footer.

<div class="pre-footer bg-color-primary--50 text-align-center">
  <div class="prismea-content-container">
    <h3 class="branding-title-3 color-grey--800 font-weight-medium mb-5">Lorem ipsum dolor sit amet
    </h3>
    <p class="branding-text-lg color-grey--700 font-weight-medium">Lorem ipsum dolor sit amet consectetur adiscipicing elit
    </p>
    <div class="flex flex-justify-center mt-10">
      <a class="btn btn--lg btn--primary">Lorem ipsum</a>
    </div><img class="pre-footer__illustration" src="https://placeimg.com/250/140/animals"/>
  </div>
</div>
.pre-footer.bg-color-primary--50.text-align-center
  .prismea-content-container
    h3.branding-title-3.color-grey--800.font-weight-medium.mb-5.
      Lorem ipsum dolor sit amet
      
    p.branding-text-lg.color-grey--700.font-weight-medium.
      Lorem ipsum dolor sit amet consectetur adiscipicing elit
      
    .flex.flex-justify-center.mt-10
      a.btn.btn--lg.btn--primary Lorem ipsum
    img.pre-footer__illustration(src='https://placeimg.com/250/140/animals')