Molecules

Molecules are groups of atoms bonded together and are the smallest fundamental units of a compound. These molecules take on their own properties and serve as the backbone of our design systems.

For example, a form label, input or button aren’t too useful by themselves, but combine them together as a form and now they can actually do something together.

Atomic Design by Brad Frost

Article Card

You need to add the article-card--swiper and h-full classes if you are using the cards in a swiper.

<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">
    <div class="mr-4"><img class="prismea-landingpage-author-picture" src="https://placeimg.com/100/100/animals"/>
    </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">
  <div class="article-card__image">
    <div class="skeleton-shape h-52"></div>
  </div>
  <div class="article-card__body">
    <div class="skeleton-shape skeleton-shape--badge mb-3"></div>
    <div class="skeleton-shape skeleton-shape--title mb-5"></div>
    <div class="skeleton-shape-paragraph">
      <div class="skeleton-shape skeleton-shape--line"></div>
      <div class="skeleton-shape skeleton-shape--line"></div>
      <div class="skeleton-shape skeleton-shape--line"></div>
      <div class="skeleton-shape skeleton-shape--line"></div>
      <div class="skeleton-shape skeleton-shape--line"></div>
    </div>
  </div>
  <div class="article-card__footer flex flex-align-center flex-column-gap-4">
    <div class="skeleton-shape skeleton-shape--circle"></div>
    <div class="skeleton-shape skeleton-shape--line"></div>
  </div>
</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
    .mr-4
      img.prismea-landingpage-author-picture(src='https://placeimg.com/100/100/animals')
    p.prismea-text.-size-12.color-grey--600
      span Lorem ipsum dolor sit
      span.color-primary--500  amet consectetur
.article-card
  .article-card__image
    .skeleton-shape.h-52
  .article-card__body
    .skeleton-shape.skeleton-shape--badge.mb-3
    .skeleton-shape.skeleton-shape--title.mb-5
    .skeleton-shape-paragraph
      .skeleton-shape.skeleton-shape--line
      .skeleton-shape.skeleton-shape--line
      .skeleton-shape.skeleton-shape--line
      .skeleton-shape.skeleton-shape--line
      .skeleton-shape.skeleton-shape--line
  .article-card__footer.flex.flex-align-center.flex-column-gap-4
    .skeleton-shape.skeleton-shape--circle
    .skeleton-shape.skeleton-shape--line

Blog Homepage Header

You can use the -search-bar-open variant on mobile device.

<header class="prismea-landingpage-blog-homepage-header -search-bar-open prismea-content-container">
  <p class="prismea-text -size-18 -uppercase -text-bold prismea-color -color-primary-500">Lorem Ipsum</p>
  <h1 class="branding-title-1 color-grey--800 prismea-vertical-spacing-10--slot">Lorem Ipsum dolor
  </h1>
  <p class="prismea-text">Lorem ipsum dolor sit amet consectetur</p>
</header>
header.prismea-landingpage-blog-homepage-header.-search-bar-open.prismea-content-container
  p.prismea-text.-size-18.-uppercase.-text-bold.prismea-color.-color-primary-500 Lorem Ipsum
  h1.branding-title-1.color-grey--800.prismea-vertical-spacing-10--slot.
    Lorem Ipsum dolor
    
  p.prismea-text Lorem ipsum dolor sit amet consectetur

Blog Homepage Reset Filters

<div class="prismea-landingpage-blog-homepage-reset-filters"><a class="prismea-text -size-14">
    <svg class="icon-16 icon-rotate-270">
      <use href="/svg/16x16/line/arrow-up.svg#arrow-up-line-16"></use>
    </svg><span class="prismea-text -underline prismea-color -color-primary-500">Lorem ipsum dolor sit</span></a></div>
.prismea-landingpage-blog-homepage-reset-filters
  a.prismea-text.-size-14
    svg.icon-16.icon-rotate-270
      use(href='/svg/16x16/line/arrow-up.svg#arrow-up-line-16')
    span.prismea-text.-underline.prismea-color.-color-primary-500 Lorem ipsum dolor sit

Blog Post Header

<div class="prismea-landingpage-blog-post-header"><a class="prismea-text -size-14">
    <svg class="icon-16 icon-rotate-270 icon-color-black">
      <use href="/svg/16x16/line/arrow-up.svg#arrow-up-line-16"></use>
    </svg><span class="prismea-text -underline prismea-color -color-primary-500">Lorem ipsum dolor sit</span></a></div>
.prismea-landingpage-blog-post-header
  a.prismea-text.-size-14
    svg.icon-16.icon-rotate-270.icon-color-black
      use(href='/svg/16x16/line/arrow-up.svg#arrow-up-line-16')
    span.prismea-text.-underline.prismea-color.-color-primary-500 Lorem ipsum dolor sit

Blog Post Sharing

<div class="prismea-landingpage-blog-post-sharing prismea-content-container--blog">
  <p class="prismea-text">Lorem ipsum dolor sit ? Amet consectetur adipisicing elit</p>
  <div class="prismea-vertical-spacing-25--slot prismea-landingpage-blog-post-sharing-links"><a class="prismea-landingpage-share-link -border">
      <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="prismea-landingpage-share-link -border">
      <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="prismea-landingpage-share-link -border">
      <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>
.prismea-landingpage-blog-post-sharing.prismea-content-container--blog
  p.prismea-text Lorem ipsum dolor sit ? Amet consectetur adipisicing elit
  .prismea-vertical-spacing-25--slot.prismea-landingpage-blog-post-sharing-links
    a.prismea-landingpage-share-link.-border
      svg.icon-24.icon-color-grey--600
        use(href='/projects/landingpage/svg/24x24/bold/twitter.svg#twitter-bold-24')
    a.prismea-landingpage-share-link.-border
      svg.icon-24.icon-color-grey--600
        use(href='/projects/landingpage/svg/24x24/bold/facebook.svg#facebook-bold-24')
    a.prismea-landingpage-share-link.-border
      svg.icon-24.icon-color-grey--600
        use(href='/projects/landingpage/svg/24x24/bold/linkedin.svg#linkedin-bold-24')
<div class="breadcrumb bg-color-primary--300 py-5">
  <div class="prismea-content-container">
    <div class="flex flex-align-center flex-justify-center flex-wrap flex-column-gap-2 flex-row-gap-1 text-align-center">
      <a class="branding-text-md color-primary--100 font-weight-medium hover-color-primary--50">Lorem ipsum
      </a>
      <svg class="icon-16 icon-rotate-90 icon-color-primary--100">
        <use href="/svg/16x16/line/chevron-up.svg#chevron-up-line-16"></use>
      </svg>
      <a class="branding-text-md color-primary--100 font-weight-medium hover-color-primary--50">Lorem ipsum
      </a>
      <svg class="icon-16 icon-rotate-90 icon-color-primary--100">
        <use href="/svg/16x16/line/chevron-up.svg#chevron-up-line-16"></use>
      </svg>
      <span class="branding-text-md color-white font-weight-medium">Lorem ipsum
      </span>
    </div>
  </div>
</div>
.breadcrumb.bg-color-primary--300.py-5
  .prismea-content-container
    .flex.flex-align-center.flex-justify-center.flex-wrap.flex-column-gap-2.flex-row-gap-1.text-align-center
      a.branding-text-md.color-primary--100.font-weight-medium.hover-color-primary--50.
        Lorem ipsum
        
      svg.icon-16.icon-rotate-90.icon-color-primary--100
        use(href='/svg/16x16/line/chevron-up.svg#chevron-up-line-16')
      a.branding-text-md.color-primary--100.font-weight-medium.hover-color-primary--50.
        Lorem ipsum
        
      svg.icon-16.icon-rotate-90.icon-color-primary--100
        use(href='/svg/16x16/line/chevron-up.svg#chevron-up-line-16')
      span.branding-text-md.color-white.font-weight-medium.
        Lorem ipsum
        

Button

Design system buttons extension.

<div class="flex flex-gap-2 flex-wrap">
  <a class="btn btn--lg btn--primary">Lorem ipsum</a>
  <a class="btn btn--lg btn--primary btn--responsive">Lorem ipsum</a>
</div>
.flex.flex-gap-2.flex-wrap
  a.btn.btn--lg.btn--primary Lorem ipsum
  a.btn.btn--lg.btn--primary.btn--responsive Lorem ipsum

Category Label

You may or may not use a prepend. You can also use the -disabled class to remove the hover event.

<div style="display: flex; gap: 5px; flex-wrap: wrap; padding: 5px;">
  <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 class="prismea-landingpage-category-label">
    <div class="prismea-landingpage-category-label-prepend">#</div>
    <div class="prismea-landingpage-category-label-text">
      <p class="prismea-text -size-14 ">Lorem Ipsum</p>
    </div>
  </div>
</div>
div(style='display: flex; gap: 5px; flex-wrap: wrap; padding: 5px;')
  .prismea-landingpage-category-label
    .prismea-landingpage-category-label-text
      p.prismea-text.-size-14 Lorem Ipsum
  .prismea-landingpage-category-label
    .prismea-landingpage-category-label-prepend #
    .prismea-landingpage-category-label-text
      p.prismea-text.-size-14 Lorem Ipsum

Press Release Card

<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>
.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 >

Pricing card

You can use bg-color-primary--300 or bg-color-grey--800 classes on the header.

<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>
.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')
<form class="prismea-landingpage-search-bar">
  <button class="prismea-landingpage-search-bar-prepend" type="submit">
    <svg class="icon-24 icon-color-primary--500">
      <use href="/svg/24x24/line/search.svg#search-line-24"></use>
    </svg>
  </button>
  <input class="prismea-landingpage-search-bar-input" type="text" placeholder="Lorem Ipsum"/>
  <button class="prismea-landingpage-search-bar-append" type="submit">
    <svg class="icon-16 icon-color-primary--500 icon-rotate-90">
      <use href="/svg/16x16/line/arrow-up.svg#arrow-up-line-16"></use>
    </svg>
  </button>
</form>
form.prismea-landingpage-search-bar
  button.prismea-landingpage-search-bar-prepend(type='submit')
    svg.icon-24.icon-color-primary--500
      use(href='/svg/24x24/line/search.svg#search-line-24')
  input.prismea-landingpage-search-bar-input(type='text', placeholder='Lorem Ipsum')
  button.prismea-landingpage-search-bar-append(type='submit')
    svg.icon-16.icon-color-primary--500.icon-rotate-90
      use(href='/svg/16x16/line/arrow-up.svg#arrow-up-line-16')

Select Category

On a mobile device you can use the -closed class to close the selector.

<div class="prismea-landingpage-select-category prismea-content-container--blog">
  <div class="prismea-landingpage-select-category-input">
    <div class="prismea-landingpage-select-category-input-prepend">#</div><span class="prismea-landingpage-select-category-input-label prismea-text -size-14 prismea-color -color-grey-700">Lorem ipsum dolor</span><span class="prismea-landingpage-select-category-input-chevron">
      <svg class="icon-24 icon-color-grey--700">
        <use href="/svg/24x24/line/chevron-up.svg#chevron-up-line-24"></use>
      </svg></span>
  </div>
  <div class="prismea-landingpage-select-category-categories">
    <div class="prismea-landingpage-category-label">
      <div class="prismea-landingpage-category-label-prepend">#</div>
      <div class="prismea-landingpage-category-label-text">
        <p class="prismea-text -size-14 ">Lorem Ipsum</p>
      </div>
    </div>
    <div class="prismea-landingpage-category-label">
      <div class="prismea-landingpage-category-label-prepend">#</div>
      <div class="prismea-landingpage-category-label-text">
        <p class="prismea-text -size-14 ">Lorem Ipsum</p>
      </div>
    </div>
    <div class="prismea-landingpage-category-label">
      <div class="prismea-landingpage-category-label-prepend">#</div>
      <div class="prismea-landingpage-category-label-text">
        <p class="prismea-text -size-14 ">Lorem Ipsum</p>
      </div>
    </div>
    <div class="prismea-landingpage-category-label">
      <div class="prismea-landingpage-category-label-prepend">#</div>
      <div class="prismea-landingpage-category-label-text">
        <p class="prismea-text -size-14 ">Lorem Ipsum</p>
      </div>
    </div>
  </div>
</div>
<div class="prismea-landingpage-select-category prismea-content-container--blog -closed">
  <div class="prismea-landingpage-select-category-input">
    <div class="prismea-landingpage-select-category-input-prepend">#</div><span class="prismea-landingpage-select-category-input-label prismea-text -size-14 prismea-color -color-grey-700">Lorem ipsum dolor</span><span class="prismea-landingpage-select-category-input-chevron">
      <svg class="icon-24 icon-color-grey--700">
        <use href="/svg/24x24/line/chevron-up.svg#chevron-up-line-24"></use>
      </svg></span>
  </div>
  <div class="prismea-landingpage-select-category-categories">
    <div class="prismea-landingpage-category-label">
      <div class="prismea-landingpage-category-label-prepend">#</div>
      <div class="prismea-landingpage-category-label-text">
        <p class="prismea-text -size-14 ">Lorem Ipsum</p>
      </div>
    </div>
    <div class="prismea-landingpage-category-label">
      <div class="prismea-landingpage-category-label-prepend">#</div>
      <div class="prismea-landingpage-category-label-text">
        <p class="prismea-text -size-14 ">Lorem Ipsum</p>
      </div>
    </div>
    <div class="prismea-landingpage-category-label">
      <div class="prismea-landingpage-category-label-prepend">#</div>
      <div class="prismea-landingpage-category-label-text">
        <p class="prismea-text -size-14 ">Lorem Ipsum</p>
      </div>
    </div>
    <div class="prismea-landingpage-category-label">
      <div class="prismea-landingpage-category-label-prepend">#</div>
      <div class="prismea-landingpage-category-label-text">
        <p class="prismea-text -size-14 ">Lorem Ipsum</p>
      </div>
    </div>
  </div>
</div>
.prismea-landingpage-select-category.prismea-content-container--blog
  .prismea-landingpage-select-category-input
    .prismea-landingpage-select-category-input-prepend #
    span.prismea-landingpage-select-category-input-label.prismea-text.-size-14.prismea-color.-color-grey-700 Lorem ipsum dolor
    span.prismea-landingpage-select-category-input-chevron
      svg.icon-24.icon-color-grey--700
        use(href='/svg/24x24/line/chevron-up.svg#chevron-up-line-24')
  .prismea-landingpage-select-category-categories
    .prismea-landingpage-category-label
      .prismea-landingpage-category-label-prepend #
      .prismea-landingpage-category-label-text
        p.prismea-text.-size-14 Lorem Ipsum
    .prismea-landingpage-category-label
      .prismea-landingpage-category-label-prepend #
      .prismea-landingpage-category-label-text
        p.prismea-text.-size-14 Lorem Ipsum
    .prismea-landingpage-category-label
      .prismea-landingpage-category-label-prepend #
      .prismea-landingpage-category-label-text
        p.prismea-text.-size-14 Lorem Ipsum
    .prismea-landingpage-category-label
      .prismea-landingpage-category-label-prepend #
      .prismea-landingpage-category-label-text
        p.prismea-text.-size-14 Lorem Ipsum
.prismea-landingpage-select-category.prismea-content-container--blog.-closed
  .prismea-landingpage-select-category-input
    .prismea-landingpage-select-category-input-prepend #
    span.prismea-landingpage-select-category-input-label.prismea-text.-size-14.prismea-color.-color-grey-700 Lorem ipsum dolor
    span.prismea-landingpage-select-category-input-chevron
      svg.icon-24.icon-color-grey--700
        use(href='/svg/24x24/line/chevron-up.svg#chevron-up-line-24')
  .prismea-landingpage-select-category-categories
    .prismea-landingpage-category-label
      .prismea-landingpage-category-label-prepend #
      .prismea-landingpage-category-label-text
        p.prismea-text.-size-14 Lorem Ipsum
    .prismea-landingpage-category-label
      .prismea-landingpage-category-label-prepend #
      .prismea-landingpage-category-label-text
        p.prismea-text.-size-14 Lorem Ipsum
    .prismea-landingpage-category-label
      .prismea-landingpage-category-label-prepend #
      .prismea-landingpage-category-label-text
        p.prismea-text.-size-14 Lorem Ipsum
    .prismea-landingpage-category-label
      .prismea-landingpage-category-label-prepend #
      .prismea-landingpage-category-label-text
        p.prismea-text.-size-14 Lorem Ipsum

Solution Card

<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-2 color-grey--800">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>
.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-2.color-grey--800.
      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')

You can use the -border variant.

<div style="display: flex;"><a class="prismea-landingpage-share-link">
    <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="prismea-landingpage-share-link">
    <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="prismea-landingpage-share-link">
    <svg class="icon-24 icon-color-grey--600">
      <use href="/projects/landingpage/svg/24x24/bold/linkedin.svg#linkedin-bold-24"></use>
    </svg></a><a class="prismea-landingpage-share-link -border">
    <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="prismea-landingpage-share-link -border">
    <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="prismea-landingpage-share-link -border">
    <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(style='display: flex;')
  a.prismea-landingpage-share-link
    svg.icon-24.icon-color-grey--600
      use(href='/projects/landingpage/svg/24x24/bold/twitter.svg#twitter-bold-24')
  a.prismea-landingpage-share-link
    svg.icon-24.icon-color-grey--600
      use(href='/projects/landingpage/svg/24x24/bold/facebook.svg#facebook-bold-24')
  a.prismea-landingpage-share-link
    svg.icon-24.icon-color-grey--600
      use(href='/projects/landingpage/svg/24x24/bold/linkedin.svg#linkedin-bold-24')
  a.prismea-landingpage-share-link.-border
    svg.icon-24.icon-color-grey--600
      use(href='/projects/landingpage/svg/24x24/bold/twitter.svg#twitter-bold-24')
  a.prismea-landingpage-share-link.-border
    svg.icon-24.icon-color-grey--600
      use(href='/projects/landingpage/svg/24x24/bold/facebook.svg#facebook-bold-24')
  a.prismea-landingpage-share-link.-border
    svg.icon-24.icon-color-grey--600
      use(href='/projects/landingpage/svg/24x24/bold/linkedin.svg#linkedin-bold-24')

Rating

You can modify the rating with the width of the .rating__stars-on element

<div class="rating">
  <div class="rating__score mb-1">0</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: 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 class="rating__description color-grey--800 mt-1">Lorem ipusm</div>
</div>
<div class="rating">
  <div class="rating__score mb-1">4.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: 88.00000000000001%;">
      <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>
.rating
  .rating__score.mb-1 0
  .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')
  .rating__description.color-grey--800.mt-1 Lorem ipusm
.rating
  .rating__score.mb-1 4.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: 88.00000000000001%;')
      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

Testimonial Card

<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>
.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.
    

Trustpilot Rating

<div class="trustpilot-rating">
  <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: 0%;">
      <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>
<div class="trustpilot-rating">
  <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>
.trustpilot-rating
  .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: 0%;')
      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')
.trustpilot-rating
  .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')

Design System

QR Code

<div class="qr-code"><img src="https://image-charts.com/chart?chs=160x160&amp;cht=qr&amp;chl=https://prismea.fr&amp;choe=UTF-8&amp;icqrb=282e38&amp;icqrf=ffffff"/></div>
.qr-code
  img(src='https://image-charts.com/chart?chs=160x160&cht=qr&chl=https://prismea.fr&choe=UTF-8&icqrb=282e38&icqrf=ffffff')