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 can use the -stretch variant to that it takes all the height of its parent.
You can also create an article card skeleton loader using the -skeleton-loader class and some skeleton shapes

<div class="prismea-landingpage-article-card"><img class="prismea-landingpage-article-card-image" src="https://placeimg.com/380/250/animals"/>
  <div class="prismea-landingpage-article-card-body">
    <div class="prismea-vertical-spacing-10--slot">
      <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">Lorem ipsum dolor sit amet consectetur adipisicing elit</h3>
    <p class="prismea-text prismea-color -color-grey5 prismea-vertical-spacing-20--slot">Lorem ipsum dolor sit amet consectetur adipisicing elit. Culpa perspiciatis numquam consectetur vitae commodi similique exercitationem, lauda.</p>
  </div>
  <div class="prismea-landingpage-article-card-footer"><img class="prismea-landingpage-author-picture" src="https://placeimg.com/100/100/animals"/>
    <p class="prismea-text -size-12 prismea-color -color-grey4"><span>Lorem ipsum dolor sit</span><span class="prismea-color -color-primary"> amet consectetur</span></p>
  </div>
</div>
<div class="prismea-landingpage-article-card -skeleton-loader">
  <div class="prismea-landingpage-article-card-image">
    <div class="prismea-landingpage-skeleton-shape"></div>
  </div>
  <div class="prismea-landingpage-article-card-body">
    <div class="prismea-vertical-spacing-20--slot">
      <div class="prismea-landingpage-skeleton-shape -shape-badge"></div>
    </div>
    <div class="prismea-landingpage-skeleton-shape -shape-title"></div>
    <div class="prismea-vertical-spacing-30--slot">
      <div class="prismea-landingpage-skeleton-shape-paragraph">
        <div class="prismea-landingpage-skeleton-shape -shape-line"></div>
        <div class="prismea-landingpage-skeleton-shape -shape-line"></div>
        <div class="prismea-landingpage-skeleton-shape -shape-line"></div>
        <div class="prismea-landingpage-skeleton-shape -shape-line"></div>
        <div class="prismea-landingpage-skeleton-shape -shape-line"></div>
      </div>
    </div>
  </div>
  <div class="prismea-landingpage-article-card-footer">
    <div class="prismea-landingpage-skeleton-shape -shape-circle"></div>
    <div class="prismea-landingpage-skeleton-shape -shape-line"></div>
  </div>
</div>
.prismea-landingpage-article-card
  img.prismea-landingpage-article-card-image(src='https://placeimg.com/380/250/animals')
  .prismea-landingpage-article-card-body
    .prismea-vertical-spacing-10--slot
      .prismea-landingpage-category-label
        .prismea-landingpage-category-label-text
          p.prismea-text.-size-14 Lorem Ipsum
    h3.prismea-text.-size-18.-text-medium Lorem ipsum dolor sit amet consectetur adipisicing elit
    p.prismea-text.prismea-color.-color-grey5.prismea-vertical-spacing-20--slot Lorem ipsum dolor sit amet consectetur adipisicing elit. Culpa perspiciatis numquam consectetur vitae commodi similique exercitationem, lauda.
  .prismea-landingpage-article-card-footer
    img.prismea-landingpage-author-picture(src='https://placeimg.com/100/100/animals')
    p.prismea-text.-size-12.prismea-color.-color-grey4
      span Lorem ipsum dolor sit
      span.prismea-color.-color-primary  amet consectetur
.prismea-landingpage-article-card.-skeleton-loader
  .prismea-landingpage-article-card-image
    .prismea-landingpage-skeleton-shape
  .prismea-landingpage-article-card-body
    .prismea-vertical-spacing-20--slot
      .prismea-landingpage-skeleton-shape.-shape-badge
    .prismea-landingpage-skeleton-shape.-shape-title
    .prismea-vertical-spacing-30--slot
      .prismea-landingpage-skeleton-shape-paragraph
        .prismea-landingpage-skeleton-shape.-shape-line
        .prismea-landingpage-skeleton-shape.-shape-line
        .prismea-landingpage-skeleton-shape.-shape-line
        .prismea-landingpage-skeleton-shape.-shape-line
        .prismea-landingpage-skeleton-shape.-shape-line
  .prismea-landingpage-article-card-footer
    .prismea-landingpage-skeleton-shape.-shape-circle
    .prismea-landingpage-skeleton-shape.-shape-line

Block title

You can use the following variants:

  • Content: add an icon, a surtitle, a title, a subtitle and a separator
  • Vertical separator: -vertical-separator with -left or -right
  • Alignment: -left, -center, -right
  • Color: -color-primary, -color-secondary, -color-white, -color-white-opacity-70 on each element
<div class="prismea-vertical-spacing-40--slot prismea-landingpage-block-title -center">
  <div class="prismea-vertical-spacing-10--slot"><i class="prismea-icon prismea-landingpage-glyph-42_symbol_floor -color-primary"></i>
  </div>
  <div class="prismea-vertical-spacing-10--slot">
    <h2 class="prismea-title-2">Lorem ipsum dolor sit amet</h2>
  </div>
  <div class="prismea-vertical-spacing-15--slot">
    <hr class="prismea-separator -secondary -center -small"/>
  </div>
  <div class="prismea-vertical-spacing-10--slot">
    <p class="prismea-text -size-18 prismea-color -color-grey4">In gravida diam eu felis pharetra, eget iaculis mauris finibus.</p>
  </div>
</div>
<div class="prismea-vertical-spacing-40--slot prismea-landingpage-block-title -center">
  <div class="prismea-vertical-spacing-10--slot"><i class="prismea-icon prismea-landingpage-glyph-42_symbol_floor -color-secondary"></i>
  </div>
  <div class="prismea-vertical-spacing-10--slot">
    <p class="prismea-text -uppercase prismea-color -color-grey5">In gravida diam eu felis pharetra</p>
  </div>
  <div class="prismea-vertical-spacing-10--slot">
    <h2 class="prismea-title-2 prismea-color -color-primary -text-multiline">Lorem ipsum dolor sit amet</h2>
  </div>
</div>
<div class="prismea-vertical-spacing-40--slot prismea-landingpage-block-title -vertical-separator -left">
  <div class="prismea-vertical-spacing-10--slot"><i class="prismea-icon prismea-landingpage-glyph-42_symbol_floor_left -color-secondary"></i>
  </div>
  <div class="prismea-vertical-spacing-10--slot">
    <p class="prismea-text -uppercase prismea-color -color-grey5">In gravida diam eu felis pharetra</p>
  </div>
  <div class="prismea-vertical-spacing-10--slot">
    <h2 class="prismea-title-2 prismea-color -color-primary -text-multiline">Lorem ipsum dolor sit amet</h2>
  </div>
</div>
<div class="prismea-vertical-spacing-40--slot prismea-landingpage-block-title -vertical-separator -right">
  <div class="prismea-vertical-spacing-10--slot"><i class="prismea-icon prismea-landingpage-glyph-42_symbol_floor_right -color-primary"></i>
  </div>
  <div class="prismea-vertical-spacing-10--slot">
    <h2 class="prismea-title-2 prismea-color -color-primary -text-multiline">Lorem ipsum dolor sit amet</h2>
  </div>
  <div class="prismea-vertical-spacing-10--slot">
    <p class="prismea-text -size-18 prismea-color -color-grey4">In gravida diam eu felis pharetra, eget iaculis mauris finibus.</p>
  </div>
</div>
.prismea-vertical-spacing-40--slot.prismea-landingpage-block-title.-center
  .prismea-vertical-spacing-10--slot
    i.prismea-icon.prismea-landingpage-glyph-42_symbol_floor.-color-primary
  .prismea-vertical-spacing-10--slot
    h2.prismea-title-2 Lorem ipsum dolor sit amet
  .prismea-vertical-spacing-15--slot
    hr.prismea-separator.-secondary.-center.-small
  .prismea-vertical-spacing-10--slot
    p.prismea-text.-size-18.prismea-color.-color-grey4 In gravida diam eu felis pharetra, eget iaculis mauris finibus.
.prismea-vertical-spacing-40--slot.prismea-landingpage-block-title.-center
  .prismea-vertical-spacing-10--slot
    i.prismea-icon.prismea-landingpage-glyph-42_symbol_floor.-color-secondary
  .prismea-vertical-spacing-10--slot
    p.prismea-text.-uppercase.prismea-color.-color-grey5 In gravida diam eu felis pharetra
  .prismea-vertical-spacing-10--slot
    h2.prismea-title-2.prismea-color.-color-primary.-text-multiline Lorem ipsum dolor sit amet
.prismea-vertical-spacing-40--slot.prismea-landingpage-block-title.-vertical-separator.-left
  .prismea-vertical-spacing-10--slot
    i.prismea-icon.prismea-landingpage-glyph-42_symbol_floor_left.-color-secondary
  .prismea-vertical-spacing-10--slot
    p.prismea-text.-uppercase.prismea-color.-color-grey5 In gravida diam eu felis pharetra
  .prismea-vertical-spacing-10--slot
    h2.prismea-title-2.prismea-color.-color-primary.-text-multiline Lorem ipsum dolor sit amet
.prismea-vertical-spacing-40--slot.prismea-landingpage-block-title.-vertical-separator.-right
  .prismea-vertical-spacing-10--slot
    i.prismea-icon.prismea-landingpage-glyph-42_symbol_floor_right.-color-primary
  .prismea-vertical-spacing-10--slot
    h2.prismea-title-2.prismea-color.-color-primary.-text-multiline Lorem ipsum dolor sit amet
  .prismea-vertical-spacing-10--slot
    p.prismea-text.-size-18.prismea-color.-color-grey4 In gravida diam eu felis pharetra, eget iaculis mauris finibus.

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-landingpage-content-container">
  <p class="prismea-text -montserrat -size-18 -uppercase -text-bold prismea-color -color-primary">Lorem Ipsum</p>
  <h1 class="prismea-title-1 prismea-vertical-spacing-10--slot">Lorem Ipusm dolor</h1>
  <p class="prismea-text">Lorem ipsum dolor sit amet consectetur</p>
</header>
header.prismea-landingpage-blog-homepage-header.-search-bar-open.prismea-landingpage-content-container
  p.prismea-text.-montserrat.-size-18.-uppercase.-text-bold.prismea-color.-color-primary Lorem Ipsum
  h1.prismea-title-1.prismea-vertical-spacing-10--slot Lorem Ipusm 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"><i class="prismea-icon prismea-landingpage-glyph-12_arrow-left"></i><span class="prismea-text -underline prismea-color -color-primary">Lorem ipsum dolor sit</span></a></div>
.prismea-landingpage-blog-homepage-reset-filters
  a.prismea-text.-size-14
    i.prismea-icon.prismea-landingpage-glyph-12_arrow-left
    span.prismea-text.-underline.prismea-color.-color-primary Lorem ipsum dolor sit

Blog Post Header

<div class="prismea-landingpage-blog-post-header"><a class="prismea-text -size-14"><i class="prismea-icon prismea-landingpage-glyph-12_arrow-left"></i><span class="prismea-text -underline prismea-color -color-primary">Lorem ipsum dolor sit</span></a></div>
.prismea-landingpage-blog-post-header
  a.prismea-text.-size-14
    i.prismea-icon.prismea-landingpage-glyph-12_arrow-left
    span.prismea-text.-underline.prismea-color.-color-primary Lorem ipsum dolor sit

Blog Post Sharing

<div class="prismea-landingpage-blog-post-sharing prismea-landingpage-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"><i class="prismea-icon prismea-landingpage-glyph-26_twitter"></i></a><a class="prismea-landingpage-share-link -border"><i class="prismea-icon prismea-landingpage-glyph-26_facebook"></i></a><a class="prismea-landingpage-share-link -border"><i class="prismea-icon prismea-landingpage-glyph-26_linkedin"></i></a>
  </div>
</div>
.prismea-landingpage-blog-post-sharing.prismea-landingpage-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
      i.prismea-icon.prismea-landingpage-glyph-26_twitter
    a.prismea-landingpage-share-link.-border
      i.prismea-icon.prismea-landingpage-glyph-26_facebook
    a.prismea-landingpage-share-link.-border
      i.prismea-icon.prismea-landingpage-glyph-26_linkedin

Button position

You can use the following variants: -justify-middle, -justify-start, -justify-end

<div class="prismea-landingpage-button-position -justify-middle">
  <a class="prismea-button -primary" href="#">Default button (centered)</a>
</div>
<div class="prismea-landingpage-button-position -justify-middle">
  <a class="prismea-button -primary" href="#">Default button (centered)</a>
  <a class="prismea-button -primary -outlined" href="#">Outlined button (centered)</a>
</div>
<div class="prismea-landingpage-button-position -justify-start">
  <a class="prismea-button -primary" href="#">Default button (left)</a>
  <a class="prismea-button -primary -outlined" href="#">Outlined button (left)</a>
</div>
<div class="prismea-landingpage-button-position -justify-end">
  <a class="prismea-button -primary" href="#">Default button (right)</a>
  <a class="prismea-button -primary -outlined" href="#">Outlined button (right)</a>
</div>
.prismea-landingpage-button-position.-justify-middle
  a.prismea-button.-primary(href='#') Default button (centered)
.prismea-landingpage-button-position.-justify-middle
  a.prismea-button.-primary(href='#') Default button (centered)
  a.prismea-button.-primary.-outlined(href='#') Outlined button (centered)
.prismea-landingpage-button-position.-justify-start
  a.prismea-button.-primary(href='#') Default button (left)
  a.prismea-button.-primary.-outlined(href='#') Outlined button (left)
.prismea-landingpage-button-position.-justify-end
  a.prismea-button.-primary(href='#') Default button (right)
  a.prismea-button.-primary.-outlined(href='#') Outlined button (right)

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

Company Card

You can use -color-primary or -color-secondary on the icon and the title

<div class="prismea-landingpage-card">
  <div class="prismea-vertical-spacing-40 -center">
    <div class="prismea-vertical-spacing-10--slot"><i class="prismea-icon prismea-landingpage-glyph-42_symbol_sharp -color-secondary"></i>
    </div>
    <div class="prismea-vertical-spacing-5--slot">
      <p class="prismea-text -text-medium -size-18 prismea-color -color-secondary">Lorem ipsum</p>
    </div>
    <div class="prismea-vertical-spacing-5--slot">
      <hr class="prismea-separator -primary -medium"/>
    </div>
    <div class="prismea-vertical-spacing-15--slot">
      <div class="prismea-vertical-spacing-5--slot">
        <p class="prismea-text -text-medium prismea-color -color-grey5">Lorem ipsum dolor</p>
      </div>
      <div class="prismea-vertical-spacing-5--slot"></div>
      <p class="prismea-text prismea-color -color-grey5">Lorem ipsum, dolor sit amet consectetur adipisicing elit. A placeat officia nesciunt eligendi omnis.</p>
    </div>
  </div>
  <div class="prismea-vertical-spacing-40--slot -center">
    <a class="prismea-button -primary" href="#">Lorem ipsum</a>
  </div>
</div>
<div class="prismea-landingpage-card">
  <div class="prismea-vertical-spacing-40 -center">
    <div class="prismea-vertical-spacing-10--slot"><i class="prismea-icon prismea-landingpage-glyph-42_symbol_sharp -color-primary"></i>
    </div>
    <div class="prismea-vertical-spacing-5--slot">
      <p class="prismea-text -text-medium -size-18 prismea-color -color-primary">Lorem ipsum</p>
    </div>
    <div class="prismea-vertical-spacing-5--slot">
      <hr class="prismea-separator -primary -medium"/>
    </div>
    <div class="prismea-vertical-spacing-15--slot">
      <div class="prismea-vertical-spacing-5--slot">
        <p class="prismea-text -text-medium prismea-color -color-grey5">Lorem ipsum dolor</p>
      </div>
      <div class="prismea-vertical-spacing-5--slot"></div>
      <p class="prismea-text prismea-color -color-grey5">Lorem ipsum, dolor sit amet consectetur adipisicing elit. A placeat officia nesciunt eligendi omnis.</p>
    </div>
  </div>
  <div class="prismea-vertical-spacing-40--slot -center">
    <a class="prismea-button -primary" href="#">Lorem ipsum</a>
  </div>
</div>
.prismea-landingpage-card
  .prismea-vertical-spacing-40.-center
    .prismea-vertical-spacing-10--slot
      i.prismea-icon.prismea-landingpage-glyph-42_symbol_sharp.-color-secondary
    .prismea-vertical-spacing-5--slot
      p.prismea-text.-text-medium.-size-18.prismea-color.-color-secondary Lorem ipsum
    .prismea-vertical-spacing-5--slot
      hr.prismea-separator.-primary.-medium
    .prismea-vertical-spacing-15--slot
      .prismea-vertical-spacing-5--slot
        p.prismea-text.-text-medium.prismea-color.-color-grey5 Lorem ipsum dolor
      .prismea-vertical-spacing-5--slot
      p.prismea-text.prismea-color.-color-grey5 Lorem ipsum, dolor sit amet consectetur adipisicing elit. A placeat officia nesciunt eligendi omnis.
  .prismea-vertical-spacing-40--slot.-center
    a.prismea-button.-primary(href='#') Lorem ipsum
.prismea-landingpage-card
  .prismea-vertical-spacing-40.-center
    .prismea-vertical-spacing-10--slot
      i.prismea-icon.prismea-landingpage-glyph-42_symbol_sharp.-color-primary
    .prismea-vertical-spacing-5--slot
      p.prismea-text.-text-medium.-size-18.prismea-color.-color-primary Lorem ipsum
    .prismea-vertical-spacing-5--slot
      hr.prismea-separator.-primary.-medium
    .prismea-vertical-spacing-15--slot
      .prismea-vertical-spacing-5--slot
        p.prismea-text.-text-medium.prismea-color.-color-grey5 Lorem ipsum dolor
      .prismea-vertical-spacing-5--slot
      p.prismea-text.prismea-color.-color-grey5 Lorem ipsum, dolor sit amet consectetur adipisicing elit. A placeat officia nesciunt eligendi omnis.
  .prismea-vertical-spacing-40--slot.-center
    a.prismea-button.-primary(href='#') Lorem ipsum

Form

<form class="prismea-landingpage-form -grey3">
  <div class="prismea-landingpage-input-group">
    <label class="prismea-text -size-14 prismea-color -color-grey5" for="inputName">Lorem ipsum dolor sit</label>
    <input type="text" name="inputName" id="inputName" placeholder="XXXX XXX XXX"/>
  </div>
  <div class="prismea-landingpage-input-group">
    <label class="prismea-text -size-14 prismea-color -color-grey5" for="inputName">Lorem ipsum dolor sit</label>
    <input type="text" name="inputName" id="inputName"/>
  </div>
  <div class="prismea-landingpage-input-group">
    <label class="prismea-text -size-14 prismea-color -color-grey5" for="inputName">Lorem ipsum dolor sit</label>
    <input class="-error" type="text" name="inputName" id="inputName"/><span class="prismea-text -size-14 prismea-color -color-secondary">Lorem ipsum dolor</span>
  </div>
  <div class="prismea-landingpage-input-group">
    <button class="prismea-button -primary" type="submit">Foobar</button>
  </div>
  <div class="prismea-vertical-spacing-20--slot">
    <p class="prismea-text -size-12 prismea-color -color-grey4">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. (12px)</p>
  </div>
</form>
form.prismea-landingpage-form.-grey3
  .prismea-landingpage-input-group
    label.prismea-text.-size-14.prismea-color.-color-grey5(for='inputName') Lorem ipsum dolor sit
    input#inputName(type='text', name='inputName', placeholder='XXXX XXX XXX')
  .prismea-landingpage-input-group
    label.prismea-text.-size-14.prismea-color.-color-grey5(for='inputName') Lorem ipsum dolor sit
    input#inputName(type='text', name='inputName')
  .prismea-landingpage-input-group
    label.prismea-text.-size-14.prismea-color.-color-grey5(for='inputName') Lorem ipsum dolor sit
    input.-error#inputName(type='text', name='inputName')
    span.prismea-text.-size-14.prismea-color.-color-secondary Lorem ipsum dolor
  .prismea-landingpage-input-group
    button.prismea-button.-primary(type='submit') Foobar
  .prismea-vertical-spacing-20--slot
    p.prismea-text.-size-12.prismea-color.-color-grey4 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. (12px)

Offer Card

You can add a banner a the top of the card

<div class="prismea-landingpage-card">
  <div class="prismea-vertical-spacing-40 -center">
    <div class="prismea-vertical-spacing-10--slot"><i class="prismea-icon prismea-landingpage-glyph-42_symbol_vortex -color-secondary"></i>
    </div>
    <div class="prismea-vertical-spacing-5--slot">
      <p class="prismea-text -text-medium -size-18 prismea-color -color-primary">Lorem ipsum</p>
    </div>
    <div class="prismea-vertical-spacing-5--slot">
      <hr class="prismea-separator -primary -medium"/>
    </div>
    <div class="prismea-vertical-spacing-5--slot">
      <div class="prismea-vertical-spacing-5--slot">
        <p class="prismea-text -montserrat -size-52">29€</p>
      </div>
      <div class="prismea-vertical-spacing-5--slot">
        <p class="prismea-text -size-14 prismea-color -color-grey5">Lorem ipsum, dolor sit</p>
      </div>
    </div>
    <div class="prismea-vertical-spacing-10--slot">
      <hr class="prismea-separator -primary -medium"/>
    </div>
    <ul class="prismea-landingpage-checklist -color-grey5 prismea-vertical-spacing-30--slot -left">
      <li class="prismea-text -checklist prismea-color">Lorem ipsum dolor sit amet consectetur</li>
      <li class="prismea-text -checklist prismea-color">Fusce blandit nunc libero</li>
      <li class="prismea-text -checklist prismea-color">Phasellus ac mi</li>
      <li class="prismea-text -checklist prismea-color">Fusce blandit nunc libero</li>
      <li class="prismea-text -checklist prismea-color">Phasellus ac mi fusce blandit nunc libero</li>
      <li class="prismea-text -checklist prismea-color">Phasellus ac mi</li>
      <li class="prismea-text -checklist prismea-color">Fusce blandit nunc libero</li>
    </ul>
  </div>
  <div class="prismea-vertical-spacing-30--slot -center">
    <a class="prismea-button -primary" href="#">Lorem ipsum</a>
  </div>
</div>
<div class="prismea-landingpage-card">
  <div class="prismea-landingpage-card--banner -primary prismea-vertical-spacing-5 -justify-middle -flex -center">
    <p class="prismea-text -uppercase -size-12 prismea-color -color-white">Lorem ipsum</p>
  </div>
  <div class="prismea-vertical-spacing-40 -center">
    <div class="prismea-vertical-spacing-10--slot"><i class="prismea-icon prismea-landingpage-glyph-42_symbol_vortex -color-secondary"></i>
    </div>
    <div class="prismea-vertical-spacing-5--slot">
      <p class="prismea-text -text-medium -size-18 prismea-color -color-primary">Lorem ipsum</p>
    </div>
    <div class="prismea-vertical-spacing-5--slot">
      <hr class="prismea-separator -primary -medium"/>
    </div>
    <div class="prismea-vertical-spacing-5--slot">
      <div class="prismea-vertical-spacing-5--slot">
        <p class="prismea-text -montserrat -size-52">29€</p>
      </div>
      <div class="prismea-vertical-spacing-5--slot">
        <p class="prismea-text -size-14 prismea-color -color-grey5">Lorem ipsum, dolor sit</p>
      </div>
    </div>
    <div class="prismea-vertical-spacing-10--slot">
      <hr class="prismea-separator -primary -medium"/>
    </div>
    <ul class="prismea-landingpage-checklist -color-grey5 prismea-vertical-spacing-30--slot -left">
      <li class="prismea-text -checklist prismea-color">Lorem ipsum dolor sit amet consectetur</li>
      <li class="prismea-text -checklist prismea-color">Fusce blandit nunc libero</li>
      <li class="prismea-text -checklist prismea-color">Phasellus ac mi</li>
      <li class="prismea-text -checklist prismea-color">Fusce blandit nunc libero</li>
      <li class="prismea-text -checklist prismea-color">Phasellus ac mi fusce blandit nunc libero</li>
      <li class="prismea-text -checklist prismea-color">Phasellus ac mi</li>
      <li class="prismea-text -checklist prismea-color">Fusce blandit nunc libero</li>
    </ul>
  </div>
  <div class="prismea-vertical-spacing-30--slot -center">
    <a class="prismea-button -primary" href="#">Lorem ipsum</a>
  </div>
</div>
.prismea-landingpage-card
  .prismea-vertical-spacing-40.-center
    .prismea-vertical-spacing-10--slot
      i.prismea-icon.prismea-landingpage-glyph-42_symbol_vortex.-color-secondary
    .prismea-vertical-spacing-5--slot
      p.prismea-text.-text-medium.-size-18.prismea-color.-color-primary Lorem ipsum
    .prismea-vertical-spacing-5--slot
      hr.prismea-separator.-primary.-medium
    .prismea-vertical-spacing-5--slot
      .prismea-vertical-spacing-5--slot
        p.prismea-text.-montserrat.-size-52 29€
      .prismea-vertical-spacing-5--slot
        p.prismea-text.-size-14.prismea-color.-color-grey5 Lorem ipsum, dolor sit
    .prismea-vertical-spacing-10--slot
      hr.prismea-separator.-primary.-medium
    ul.prismea-landingpage-checklist.-color-grey5.prismea-vertical-spacing-30--slot.-left
      li.prismea-text.-checklist.prismea-color Lorem ipsum dolor sit amet consectetur
      li.prismea-text.-checklist.prismea-color Fusce blandit nunc libero
      li.prismea-text.-checklist.prismea-color Phasellus ac mi
      li.prismea-text.-checklist.prismea-color Fusce blandit nunc libero
      li.prismea-text.-checklist.prismea-color Phasellus ac mi fusce blandit nunc libero
      li.prismea-text.-checklist.prismea-color Phasellus ac mi
      li.prismea-text.-checklist.prismea-color Fusce blandit nunc libero
  .prismea-vertical-spacing-30--slot.-center
    a.prismea-button.-primary(href='#') Lorem ipsum
.prismea-landingpage-card
  .prismea-landingpage-card--banner.-primary.prismea-vertical-spacing-5.-justify-middle.-flex.-center
    p.prismea-text.-uppercase.-size-12.prismea-color.-color-white Lorem ipsum
  .prismea-vertical-spacing-40.-center
    .prismea-vertical-spacing-10--slot
      i.prismea-icon.prismea-landingpage-glyph-42_symbol_vortex.-color-secondary
    .prismea-vertical-spacing-5--slot
      p.prismea-text.-text-medium.-size-18.prismea-color.-color-primary Lorem ipsum
    .prismea-vertical-spacing-5--slot
      hr.prismea-separator.-primary.-medium
    .prismea-vertical-spacing-5--slot
      .prismea-vertical-spacing-5--slot
        p.prismea-text.-montserrat.-size-52 29€
      .prismea-vertical-spacing-5--slot
        p.prismea-text.-size-14.prismea-color.-color-grey5 Lorem ipsum, dolor sit
    .prismea-vertical-spacing-10--slot
      hr.prismea-separator.-primary.-medium
    ul.prismea-landingpage-checklist.-color-grey5.prismea-vertical-spacing-30--slot.-left
      li.prismea-text.-checklist.prismea-color Lorem ipsum dolor sit amet consectetur
      li.prismea-text.-checklist.prismea-color Fusce blandit nunc libero
      li.prismea-text.-checklist.prismea-color Phasellus ac mi
      li.prismea-text.-checklist.prismea-color Fusce blandit nunc libero
      li.prismea-text.-checklist.prismea-color Phasellus ac mi fusce blandit nunc libero
      li.prismea-text.-checklist.prismea-color Phasellus ac mi
      li.prismea-text.-checklist.prismea-color Fusce blandit nunc libero
  .prismea-vertical-spacing-30--slot.-center
    a.prismea-button.-primary(href='#') Lorem ipsum
<div class="prismea-landingpage-prismea-logo"><i class="prismea-icon -x4 prismea-landingpage-glyph-42_prismea_left -color-primary"></i><i class="prismea-icon prismea-landingpage-glyph-18_prismea_text"></i>
</div>
<div style="background-color: #30aca3;">
  <div class="prismea-landingpage-prismea-logo"><i class="prismea-icon -x4 prismea-landingpage-glyph-42_prismea_left -color-white"></i><i class="prismea-icon prismea-landingpage-glyph-18_prismea_text -color-white"></i>
  </div>
</div>
.prismea-landingpage-prismea-logo
  i.prismea-icon.-x4.prismea-landingpage-glyph-42_prismea_left.-color-primary
  i.prismea-icon.prismea-landingpage-glyph-18_prismea_text
div(style='background-color: #30aca3;')
  .prismea-landingpage-prismea-logo
    i.prismea-icon.-x4.prismea-landingpage-glyph-42_prismea_left.-color-white
    i.prismea-icon.prismea-landingpage-glyph-18_prismea_text.-color-white
<form class="prismea-landingpage-search-bar">
  <button class="prismea-landingpage-search-bar-prepend" type="submit"><i class="prismea-icon prismea-landingpage-glyph-12_search -color-primary"></i>
  </button>
  <input class="prismea-landingpage-search-bar-input" type="text" placeholder="Lorem Ipsum"/>
  <button class="prismea-landingpage-search-bar-append" type="submit"><i class="prismea-icon prismea-landingpage-glyph-12_arrow-right -color-primary"></i>
  </button>
</form>
form.prismea-landingpage-search-bar
  button.prismea-landingpage-search-bar-prepend(type='submit')
    i.prismea-icon.prismea-landingpage-glyph-12_search.-color-primary
  input.prismea-landingpage-search-bar-input(type='text', placeholder='Lorem Ipsum')
  button.prismea-landingpage-search-bar-append(type='submit')
    i.prismea-icon.prismea-landingpage-glyph-12_arrow-right.-color-primary

Select Category

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

<div class="prismea-landingpage-select-category prismea-landingpage-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-grey5">Lorem ipsum dolor</span><span class="prismea-landingpage-select-category-input-chevron"><i class="prismea-icon prismea-landingpage-glyph-16_chevron_up -color-grey5"></i></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-landingpage-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-grey5">Lorem ipsum dolor</span><span class="prismea-landingpage-select-category-input-chevron"><i class="prismea-icon prismea-landingpage-glyph-16_chevron_up -color-grey5"></i></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-landingpage-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-grey5 Lorem ipsum dolor
    span.prismea-landingpage-select-category-input-chevron
      i.prismea-icon.prismea-landingpage-glyph-16_chevron_up.-color-grey5
  .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-landingpage-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-grey5 Lorem ipsum dolor
    span.prismea-landingpage-select-category-input-chevron
      i.prismea-icon.prismea-landingpage-glyph-16_chevron_up.-color-grey5
  .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

You can use the -border variant.

<div style="display: flex;"><a class="prismea-landingpage-share-link"><i class="prismea-icon prismea-landingpage-glyph-26_twitter"></i></a><a class="prismea-landingpage-share-link"><i class="prismea-icon prismea-landingpage-glyph-26_facebook"></i></a><a class="prismea-landingpage-share-link"><i class="prismea-icon prismea-landingpage-glyph-26_linkedin"></i></a><a class="prismea-landingpage-share-link -border"><i class="prismea-icon prismea-landingpage-glyph-26_twitter"></i></a><a class="prismea-landingpage-share-link -border"><i class="prismea-icon prismea-landingpage-glyph-26_facebook"></i></a><a class="prismea-landingpage-share-link -border"><i class="prismea-icon prismea-landingpage-glyph-26_linkedin"></i></a>
</div>
div(style='display: flex;')
  a.prismea-landingpage-share-link
    i.prismea-icon.prismea-landingpage-glyph-26_twitter
  a.prismea-landingpage-share-link
    i.prismea-icon.prismea-landingpage-glyph-26_facebook
  a.prismea-landingpage-share-link
    i.prismea-icon.prismea-landingpage-glyph-26_linkedin
  a.prismea-landingpage-share-link.-border
    i.prismea-icon.prismea-landingpage-glyph-26_twitter
  a.prismea-landingpage-share-link.-border
    i.prismea-icon.prismea-landingpage-glyph-26_facebook
  a.prismea-landingpage-share-link.-border
    i.prismea-icon.prismea-landingpage-glyph-26_linkedin

Stepper header

You can change the progression with its width property in percent.

<div class="prismea-landingpage-stepper-header prismea-landingpage-content-container">
  <div class="prismea-vertical-spacing-5--slot">
    <p class="prismea-text -center prismea-color -color-white -text-bold">Step 0/4</p>
    <p class="prismea-text -center prismea-color -color-white">Step title</p>
  </div>
  <div class="prismea-vertical-spacing-5--slot">
    <div class="prismea-progress-bar -white-opacity-20">
      <div class="prismea-progress-bar--progression -white" style="width:0%;"></div>
    </div>
  </div>
</div>
<div class="prismea-landingpage-stepper-header prismea-landingpage-content-container">
  <div class="prismea-vertical-spacing-5--slot">
    <p class="prismea-text -center prismea-color -color-white -text-bold">Step 2/4</p>
    <p class="prismea-text -center prismea-color -color-white">Step title</p>
  </div>
  <div class="prismea-vertical-spacing-5--slot">
    <div class="prismea-progress-bar -white-opacity-20">
      <div class="prismea-progress-bar--progression -white" style="width:50%;"></div>
    </div>
  </div>
</div>
<div class="prismea-landingpage-stepper-header prismea-landingpage-content-container">
  <div class="prismea-vertical-spacing-5--slot">
    <p class="prismea-text -center prismea-color -color-white -text-bold">Step 4/4</p>
    <p class="prismea-text -center prismea-color -color-white">Step title</p>
  </div>
  <div class="prismea-vertical-spacing-5--slot">
    <div class="prismea-progress-bar -white-opacity-20">
      <div class="prismea-progress-bar--progression -white" style="width:100%;"></div>
    </div>
  </div>
</div>
.prismea-landingpage-stepper-header.prismea-landingpage-content-container
  .prismea-vertical-spacing-5--slot
    p.prismea-text.-center.prismea-color.-color-white.-text-bold Step 0/4
    p.prismea-text.-center.prismea-color.-color-white Step title
  .prismea-vertical-spacing-5--slot
    .prismea-progress-bar.-white-opacity-20
      .prismea-progress-bar--progression.-white(style='width:0%;')
.prismea-landingpage-stepper-header.prismea-landingpage-content-container
  .prismea-vertical-spacing-5--slot
    p.prismea-text.-center.prismea-color.-color-white.-text-bold Step 2/4
    p.prismea-text.-center.prismea-color.-color-white Step title
  .prismea-vertical-spacing-5--slot
    .prismea-progress-bar.-white-opacity-20
      .prismea-progress-bar--progression.-white(style='width:50%;')
.prismea-landingpage-stepper-header.prismea-landingpage-content-container
  .prismea-vertical-spacing-5--slot
    p.prismea-text.-center.prismea-color.-color-white.-text-bold Step 4/4
    p.prismea-text.-center.prismea-color.-color-white Step title
  .prismea-vertical-spacing-5--slot
    .prismea-progress-bar.-white-opacity-20
      .prismea-progress-bar--progression.-white(style='width:100%;')

Testimonial Card

<div class="prismea-landingpage-testimonial-card"><img class="prismea-landingpage-testimonial-card--image" src="https://placeimg.com/300/180/animals"/>
  <div class="prismea-landingpage-testimonial-card--content"><em class="prismea-text -center prismea-color -color-grey2">Itaque praesentium rem aliquid fugiat facilis porro quo adipisci harum hic quisquam numquam quam distinctio quas ipsam.</em>
    <div class="prismea-vertical-spacing-35--slot">
      <p class="prismea-text -center -size-14 -text-bold prismea-color -color-grey2">Lorem Ipsum</p>
      <p class="prismea-text -center -size-14 prismea-color -color-grey2">Dolor sit amet (34)</p>
    </div>
  </div>
</div>
.prismea-landingpage-testimonial-card
  img.prismea-landingpage-testimonial-card--image(src='https://placeimg.com/300/180/animals')
  .prismea-landingpage-testimonial-card--content
    em.prismea-text.-center.prismea-color.-color-grey2 Itaque praesentium rem aliquid fugiat facilis porro quo adipisci harum hic quisquam numquam quam distinctio quas ipsam.
    .prismea-vertical-spacing-35--slot
      p.prismea-text.-center.-size-14.-text-bold.prismea-color.-color-grey2 Lorem Ipsum
      p.prismea-text.-center.-size-14.prismea-color.-color-grey2 Dolor sit amet (34)