Atoms

Atoms are the basic building blocks of matter. Applied to web interfaces, atoms are our HTML tags, such as a form label, an input or a button.

Atoms can also include more abstract elements like color palettes, fonts and even more invisible aspects of an interface like animations.

Atomic Design by Brad Frost
<a class="branding-link font-weight-medium">Lorem ipsum dolor</a><a class="branding-link branding-link--secondary font-weight-normal">Lorem ipsum dolor</a>
a.branding-link.font-weight-medium Lorem ipsum dolor
a.branding-link.branding-link--secondary.font-weight-normal Lorem ipsum dolor

Branding Text

<p class="branding-text-xs color-grey--700">Lorem ipsum dolor sit amet
</p>
<p class="branding-text-sm color-grey--700">Lorem ipsum dolor sit amet
</p>
<p class="branding-text-md color-grey--700">Lorem ipsum dolor sit amet
</p>
<p class="branding-text color-grey--700">Lorem ipsum dolor sit amet
</p>
<p class="branding-text-lg color-grey--700">Lorem ipsum dolor sit amet
</p>
<p class="branding-text-xl color-grey--700">Lorem ipsum dolor sit amet
</p>
<p class="branding-text-xxl color-grey--700">Lorem ipsum dolor sit amet
</p>
p.branding-text-xs.color-grey--700.
  Lorem ipsum dolor sit amet
  
p.branding-text-sm.color-grey--700.
  Lorem ipsum dolor sit amet
  
p.branding-text-md.color-grey--700.
  Lorem ipsum dolor sit amet
  
p.branding-text.color-grey--700.
  Lorem ipsum dolor sit amet
  
p.branding-text-lg.color-grey--700.
  Lorem ipsum dolor sit amet
  
p.branding-text-xl.color-grey--700.
  Lorem ipsum dolor sit amet
  
p.branding-text-xxl.color-grey--700.
  Lorem ipsum dolor sit amet

Branding Title

<h1 class="branding-title-1 color-grey--800 font-weight-medium">Lorem ipsum dolor sit amet
</h1>
<h2 class="branding-title-2 color-grey--800 font-weight-medium">Lorem ipsum dolor sit amet
</h2>
<h3 class="branding-title-3 color-grey--800 font-weight-medium">Lorem ipsum dolor sit amet
</h3>
<h4 class="branding-title-4 color-grey--800 font-weight-medium">Lorem ipsum dolor sit amet
</h4>
<h1 class="branding-title-1 color-grey--800 branding-title-1--secondary font-weight-medium">Lorem ipsum dolor sit amet
</h1>
<h2 class="branding-title-2 color-grey--800 branding-title-2--secondary font-weight-medium">Lorem ipsum dolor sit amet
</h2>
<h3 class="branding-title-3 color-grey--800 branding-title-3--secondary font-weight-medium">Lorem ipsum dolor sit amet
</h3>
<h4 class="branding-title-4 color-grey--800 branding-title-4--secondary font-weight-medium">Lorem ipsum dolor sit amet
</h4>
h1.branding-title-1.color-grey--800.font-weight-medium.
  Lorem ipsum dolor sit amet
  
h2.branding-title-2.color-grey--800.font-weight-medium.
  Lorem ipsum dolor sit amet
  
h3.branding-title-3.color-grey--800.font-weight-medium.
  Lorem ipsum dolor sit amet
  
h4.branding-title-4.color-grey--800.font-weight-medium.
  Lorem ipsum dolor sit amet
  
h1.branding-title-1.color-grey--800.branding-title-1--secondary.font-weight-medium.
  Lorem ipsum dolor sit amet
  
h2.branding-title-2.color-grey--800.branding-title-2--secondary.font-weight-medium.
  Lorem ipsum dolor sit amet
  
h3.branding-title-3.color-grey--800.branding-title-3--secondary.font-weight-medium.
  Lorem ipsum dolor sit amet
  
h4.branding-title-4.color-grey--800.branding-title-4--secondary.font-weight-medium.
  Lorem ipsum dolor sit amet

Embed Video

<div class="embed-video">
  <iframe src="https://www.youtube.com/embed/9YffrCViTVk" title="YouTube video player"></iframe>
</div>
.embed-video
  iframe(src='https://www.youtube.com/embed/9YffrCViTVk', title='YouTube video player')

Color (Deprecated)

<p class="prismea-color">black text</p>
<p class="prismea-color -color-primary-500">primary-500 text</p>
<p class="prismea-color -color-secondary">secondary text</p>
<p class="prismea-color -color-white">white text</p>
<p class="prismea-color -color-grey-100">grey-100 text</p>
<p class="prismea-color -color-grey-200">grey-200 text</p>
<p class="prismea-color -color-grey-600">grey-600 text</p>
<p class="prismea-color -color-grey-700">grey-700 text</p>
p.prismea-color black text
p.prismea-color.-color-primary-500 primary-500 text
p.prismea-color.-color-secondary secondary text
p.prismea-color.-color-white white text
p.prismea-color.-color-grey-100 grey-100 text
p.prismea-color.-color-grey-200 grey-200 text
p.prismea-color.-color-grey-600 grey-600 text
p.prismea-color.-color-grey-700 grey-700 text

Icon

Branding Icons, design system icons extension.

<table style="width: 200px;">
  <thead>
    <tr>
      <th colspan="2">40x40</th>
      <th colspan="2">32x32</th>
      <th colspan="2">24x24</th>
      <th colspan="2">16x16</th>
    </tr>
    <tr>
      <th>Bold</th>
      <th>Line</th>
      <th>Bold</th>
      <th>Line</th>
      <th>Bold</th>
      <th>Line</th>
      <th>Bold</th>
      <th>Line</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td>
        <svg class="icon-24">
          <use href="/projects/landingpage/svg/24x24/bold/burger.svg#burger-bold-24"></use>
        </svg>
      </td>
    </tr>
    <tr>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td>
        <svg class="icon-16">
          <use href="/projects/landingpage/svg/16x16/bold/checklist.svg#checklist-bold-16"></use>
        </svg>
      </td>
    </tr>
    <tr>
      <td></td>
      <td></td>
      <td>
        <svg class="icon-32">
          <use href="/projects/landingpage/svg/32x32/bold/facebook.svg#facebook-bold-32"></use>
        </svg>
      </td>
      <td></td>
      <td>
        <svg class="icon-24">
          <use href="/projects/landingpage/svg/24x24/bold/facebook.svg#facebook-bold-24"></use>
        </svg>
      </td>
    </tr>
    <tr>
      <td></td>
      <td></td>
      <td>
        <svg class="icon-32">
          <use href="/projects/landingpage/svg/32x32/bold/instagram.svg#instagram-bold-32"></use>
        </svg>
      </td>
      <td></td>
      <td>
        <svg class="icon-24">
          <use href="/projects/landingpage/svg/24x24/bold/instagram.svg#instagram-bold-24"></use>
        </svg>
      </td>
    </tr>
    <tr>
      <td></td>
      <td></td>
      <td>
        <svg class="icon-32">
          <use href="/projects/landingpage/svg/32x32/bold/linkedin.svg#linkedin-bold-32"></use>
        </svg>
      </td>
      <td></td>
      <td>
        <svg class="icon-24">
          <use href="/projects/landingpage/svg/24x24/bold/linkedin.svg#linkedin-bold-24"></use>
        </svg>
      </td>
    </tr>
    <tr>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td>
        <svg class="icon-16">
          <use href="/projects/landingpage/svg/16x16/bold/star.svg#star-bold-16"></use>
        </svg>
      </td>
    </tr>
    <tr>
      <td></td>
      <td></td>
      <td>
        <svg class="icon-32">
          <use href="/projects/landingpage/svg/32x32/bold/twitter.svg#twitter-bold-32"></use>
        </svg>
      </td>
      <td></td>
      <td>
        <svg class="icon-24">
          <use href="/projects/landingpage/svg/24x24/bold/twitter.svg#twitter-bold-24"></use>
        </svg>
      </td>
    </tr>
    <tr>
      <td></td>
      <td></td>
      <td>
        <svg class="icon-32">
          <use href="/projects/landingpage/svg/32x32/bold/trustpilot-star.svg#trustpilot-star-bold-32"></use>
        </svg>
      </td>
    </tr>
  </tbody>
</table>
table(style='width: 200px;')
  thead
    tr
      th(colspan='2') 40x40
      th(colspan='2') 32x32
      th(colspan='2') 24x24
      th(colspan='2') 16x16
    tr
      th Bold
      th Line
      th Bold
      th Line
      th Bold
      th Line
      th Bold
      th Line
  tbody
    tr
      td
      td
      td
      td
      td
        svg.icon-24
          use(href='/projects/landingpage/svg/24x24/bold/burger.svg#burger-bold-24')
    tr
      td
      td
      td
      td
      td
      td
      td
        svg.icon-16
          use(href='/projects/landingpage/svg/16x16/bold/checklist.svg#checklist-bold-16')
    tr
      td
      td
      td
        svg.icon-32
          use(href='/projects/landingpage/svg/32x32/bold/facebook.svg#facebook-bold-32')
      td
      td
        svg.icon-24
          use(href='/projects/landingpage/svg/24x24/bold/facebook.svg#facebook-bold-24')
    tr
      td
      td
      td
        svg.icon-32
          use(href='/projects/landingpage/svg/32x32/bold/instagram.svg#instagram-bold-32')
      td
      td
        svg.icon-24
          use(href='/projects/landingpage/svg/24x24/bold/instagram.svg#instagram-bold-24')
    tr
      td
      td
      td
        svg.icon-32
          use(href='/projects/landingpage/svg/32x32/bold/linkedin.svg#linkedin-bold-32')
      td
      td
        svg.icon-24
          use(href='/projects/landingpage/svg/24x24/bold/linkedin.svg#linkedin-bold-24')
    tr
      td
      td
      td
      td
      td
      td
      td
        svg.icon-16
          use(href='/projects/landingpage/svg/16x16/bold/star.svg#star-bold-16')
    tr
      td
      td
      td
        svg.icon-32
          use(href='/projects/landingpage/svg/32x32/bold/twitter.svg#twitter-bold-32')
      td
      td
        svg.icon-24
          use(href='/projects/landingpage/svg/24x24/bold/twitter.svg#twitter-bold-24')
    tr
      td
      td
      td
        svg.icon-32
          use(href='/projects/landingpage/svg/32x32/bold/trustpilot-star.svg#trustpilot-star-bold-32')

List

<div class="list">
  <li class="branding-text color-grey--700 mb-3">Lorem ipsum dolor sit amet
  </li>
  <li class="branding-text color-grey--700 mb-3">Lorem ipsum dolor sit amet
  </li>
  <li class="branding-text color-grey--700 mb-3">Lorem ipsum dolor sit amet
  </li>
</div>
<ul class="checklist">
  <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>
.list
  li.branding-text.color-grey--700.mb-3.
    Lorem ipsum dolor sit amet
    
  li.branding-text.color-grey--700.mb-3.
    Lorem ipsum dolor sit amet
    
  li.branding-text.color-grey--700.mb-3.
    Lorem ipsum dolor sit amet
    
ul.checklist
  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

Separator

You can use the following variants:

  • Color: bg-color-${color-name}
  • Size: max-w-${size}
<div class="separator w-full bg-color-grey--800 my-4"></div>
<div class="separator w-full bg-color-primary--500 my-4"></div>
<div class="separator w-full bg-color-grey--800 max-w-10 mx-auto my-4"></div>
<div class="separator w-full bg-color-grey--800 max-w-16 mr-auto my-4"></div>
<div class="separator w-full bg-color-grey--800 max-w-16 ml-auto my-4"></div>
.separator.w-full.bg-color-grey--800.my-4
.separator.w-full.bg-color-primary--500.my-4
.separator.w-full.bg-color-grey--800.max-w-10.mx-auto.my-4
.separator.w-full.bg-color-grey--800.max-w-16.mr-auto.my-4
.separator.w-full.bg-color-grey--800.max-w-16.ml-auto.my-4

Skeleton Shape

You can use the following variants:

  • skeleton-shape--circle
  • skeleton-shape--line
  • skeleton-shape--title
  • skeleton-shape--badge
    You can also use multiple line shapes in a .skeleton-shape-paragraph to create a paragraph.
<div style="width: 300px; height: 200px; margin-bottom: 30px;">
  <div class="skeleton-shape"></div>
</div>
<div style="width: 300px; margin-bottom: 30px;">
  <div class="skeleton-shape skeleton-shape--circle"></div>
</div>
<div style="width: 300px; margin-bottom: 30px;">
  <div class="skeleton-shape skeleton-shape--line"></div>
</div>
<div style="width: 300px; margin-bottom: 30px;">
  <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 style="width: 300px; margin-bottom: 30px;">
  <div class="skeleton-shape skeleton-shape--title"></div>
</div>
<div style="width: 300px;">
  <div class="skeleton-shape skeleton-shape--badge"></div>
</div>
div(style='width: 300px; height: 200px; margin-bottom: 30px;')
  .skeleton-shape
div(style='width: 300px; margin-bottom: 30px;')
  .skeleton-shape.skeleton-shape--circle
div(style='width: 300px; margin-bottom: 30px;')
  .skeleton-shape.skeleton-shape--line
div(style='width: 300px; margin-bottom: 30px;')
  .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
div(style='width: 300px; margin-bottom: 30px;')
  .skeleton-shape.skeleton-shape--title
div(style='width: 300px;')
  .skeleton-shape.skeleton-shape--badge
<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>
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')

Switch

<button class="prismea-switch -on " role="switch" aria-checked="true" aria-label="Switch"><i class="prismea-switch--button"></i>
</button>
<button class="prismea-switch -off " role="switch" aria-checked="false" aria-label="Switch"><i class="prismea-switch--button"></i>
</button>
<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>
<button class="prismea-switch -off -with-label" role="switch" aria-checked="false" aria-label="Switch"><span class="prismea-switch--label -color-light">No</span><i class="prismea-switch--button"></i>
</button>
button.prismea-switch.-on(role='switch', aria-checked='true', aria-label='Switch')
  i.prismea-switch--button
button.prismea-switch.-off(role='switch', aria-checked='false', aria-label='Switch')
  i.prismea-switch--button
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
button.prismea-switch.-off.-with-label(role='switch', aria-checked='false', aria-label='Switch')
  span.prismea-switch--label.-color-light No
  i.prismea-switch--button

Text (Deprecated)

<p class="prismea-text">Default Text</p>
<p class="prismea-text -size-12 ">Text size 12px</p>
<p class="prismea-text -size-18 ">Text size 18px</p>
<p class="prismea-text prismea-color -color-primary-500 ">Primary color text</p>
<p class="prismea-text -font-secondary ">Text font family secondary</p>
<p class="prismea-text -right">Right aligned text</p>
<p class="prismea-text -underline">Underlined text</p>
<p class="prismea-text -uppercase">Text in uppercase</p>
<p class="prismea-text -text-bolder">Very bold text</p>
p.prismea-text Default Text
p.prismea-text.-size-12 Text size 12px
p.prismea-text.-size-18 Text size 18px
p.prismea-text.prismea-color.-color-primary-500 Primary color text
p.prismea-text.-font-secondary Text font family secondary
p.prismea-text.-right Right aligned text
p.prismea-text.-underline Underlined text
p.prismea-text.-uppercase Text in uppercase
p.prismea-text.-text-bolder Very bold text

Wysiwyg

<div class="wysiwyg color-grey--700">
  <p class="branding-text color-grey--700 my-4">Lorem ipsum dolor sit amet
  </p>
  <p class="branding-text-md color-grey--700 my-4">Lorem ipsum dolor sit amet
  </p>
  <p class="branding-text-sm color-grey--700 my-4">Lorem ipsum dolor sit amet
  </p>
  <p class="branding-text color-grey--700 my-4"><strong class="font-weight-medium color-grey--800">Lorem ipsum dolor sit amet</strong>
  </p>
  <p class="branding-text color-grey--700 my-4"><em class="font-style-italic">Lorem ipsum dolor sit amet</em>
  </p>
  <p class="branding-text color-primary--500 my-4">Lorem ipsum dolor sit amet
  </p>
  <p class="branding-text color-grey--600 my-4">Lorem ipsum dolor sit amet
  </p>
  <p class="branding-text color-grey--700 my-4">Lorem ipsum dolor<a class="branding-link font-weight-normal branding-text"> sit amet consectetur</a> adipisicing elit
  </p>
  <h2 class="branding-title-2 color-grey--800 font-weight-medium mt-8 mb-7">Lorem ipsum dolor sit amet
  </h2>
  <h3 class="branding-title-3 color-grey--800 font-weight-medium mt-8 mb-7">Lorem ipsum dolor sit amet
  </h3>
  <h4 class="branding-title-4 color-grey--800 font-weight-medium mt-7 mb-6">Lorem ipsum dolor sit amet
  </h4>
  <h5 class="branding-text-xl color-grey--800 mt-5 mb-4">Lorem ipsum dolor sit amet
  </h5>
  <h6 class="branding-text-lg color-grey--800 mt-5 mb-4">Lorem ipsum dolor sit amet
  </h6><img class="max-w-full h-auto mx-auto my-10" src="https://placeimg.com/200/200/animals"/>
  <div class="list my-8">
    <li class="branding-text color-grey--700 mb-3">Lorem ipsum dolor sit amet
    </li>
    <li class="branding-text color-grey--700 mb-3">Lorem ipsum dolor sit amet
    </li>
    <li class="branding-text color-grey--700 mb-3">Lorem ipsum dolor sit amet
    </li>
  </div>
  <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>
.wysiwyg.color-grey--700
  p.branding-text.color-grey--700.my-4.
    Lorem ipsum dolor sit amet
    
  p.branding-text-md.color-grey--700.my-4.
    Lorem ipsum dolor sit amet
    
  p.branding-text-sm.color-grey--700.my-4.
    Lorem ipsum dolor sit amet
    
  p.branding-text.color-grey--700.my-4
    strong.font-weight-medium.color-grey--800 Lorem ipsum dolor sit amet
  p.branding-text.color-grey--700.my-4
    em.font-style-italic Lorem ipsum dolor sit amet
  p.branding-text.color-primary--500.my-4.
    Lorem ipsum dolor sit amet
    
  p.branding-text.color-grey--600.my-4.
    Lorem ipsum dolor sit amet
    
  p.branding-text.color-grey--700.my-4
    | Lorem ipsum dolor
    a.branding-link.font-weight-normal.branding-text  sit amet consectetur
    |  adipisicing elit

  h2.branding-title-2.color-grey--800.font-weight-medium.mt-8.mb-7.
    Lorem ipsum dolor sit amet
    
  h3.branding-title-3.color-grey--800.font-weight-medium.mt-8.mb-7.
    Lorem ipsum dolor sit amet
    
  h4.branding-title-4.color-grey--800.font-weight-medium.mt-7.mb-6.
    Lorem ipsum dolor sit amet
    
  h5.branding-text-xl.color-grey--800.mt-5.mb-4.
    Lorem ipsum dolor sit amet
    
  h6.branding-text-lg.color-grey--800.mt-5.mb-4.
    Lorem ipsum dolor sit amet
    
  img.max-w-full.h-auto.mx-auto.my-10(src='https://placeimg.com/200/200/animals')
  .list.my-8
    li.branding-text.color-grey--700.mb-3.
      Lorem ipsum dolor sit amet
      
    li.branding-text.color-grey--700.mb-3.
      Lorem ipsum dolor sit amet
      
    li.branding-text.color-grey--700.mb-3.
      Lorem ipsum dolor sit amet
      
  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