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

Author picture

<img class="prismea-landingpage-author-picture" src="https://placeimg.com/100/100/animals"/>

img.prismea-landingpage-author-picture(src='https://placeimg.com/100/100/animals')

Branding Link

<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">Lorem ipsum dolor sit amet
</h1>
<h2 class="branding-title-2 color-grey--800">Lorem ipsum dolor sit amet
</h2>
<h3 class="branding-title-3 color-grey--800">Lorem ipsum dolor sit amet
</h3>
<h4 class="branding-title-4 color-grey--800">Lorem ipsum dolor sit amet
</h4>

h1.branding-title-1.color-grey--800.
  Lorem ipsum dolor sit amet
  
h2.branding-title-2.color-grey--800.
  Lorem ipsum dolor sit amet
  
h3.branding-title-3.color-grey--800.
  Lorem ipsum dolor sit amet
  
h4.branding-title-4.color-grey--800.
  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

Colors used in the landing page design.

<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

Icons

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>
        <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>
        <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></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/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
        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
        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
      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/trustpilot-star.svg#trustpilot-star-bold-32')

Icon

You can use the following variants:

Glyph: Glyphs librairy
Size: -x1, -x2, -x3, -x4
Color: -color-primary-500, -color-white
Circle Background: -circle and -primary-500, -white, etc.

<i class="prismea-icon prismea-landingpage-glyph-42_prismea"></i><i class="prismea-icon -x1 prismea-landingpage-glyph-42_prismea"></i><i class="prismea-icon -x2 prismea-landingpage-glyph-42_prismea"></i><i class="prismea-icon -x3 prismea-landingpage-glyph-42_prismea"></i><i class="prismea-icon -x4 prismea-landingpage-glyph-42_prismea"></i><i class="prismea-icon -x3 prismea-landingpage-glyph-42_symbol_sharp_right -color-primary-500"></i><i class="prismea-icon -x3 prismea-landingpage-glyph-42_symbol_sharp_right -color-secondary"></i>
<div style="background-color: #30aca3;"><i class="prismea-icon -x3 prismea-landingpage-glyph-42_symbol_sharp_right -color-white"></i><i class="prismea-icon -x3 prismea-landingpage-glyph-42_symbol_sharp_right -color-white-opacity-70"></i>
</div><i class="prismea-icon -x3 prismea-landingpage-glyph-42_prismea -color-white -circle -primary-500"></i><i class="prismea-icon -x3 prismea-landingpage-glyph-42_prismea -color-white -rounded -primary-500"></i>

i.prismea-icon.prismea-landingpage-glyph-42_prismea
i.prismea-icon.-x1.prismea-landingpage-glyph-42_prismea
i.prismea-icon.-x2.prismea-landingpage-glyph-42_prismea
i.prismea-icon.-x3.prismea-landingpage-glyph-42_prismea
i.prismea-icon.-x4.prismea-landingpage-glyph-42_prismea
i.prismea-icon.-x3.prismea-landingpage-glyph-42_symbol_sharp_right.-color-primary-500
i.prismea-icon.-x3.prismea-landingpage-glyph-42_symbol_sharp_right.-color-secondary
div(style='background-color: #30aca3;')
  i.prismea-icon.-x3.prismea-landingpage-glyph-42_symbol_sharp_right.-color-white
  i.prismea-icon.-x3.prismea-landingpage-glyph-42_symbol_sharp_right.-color-white-opacity-70
i.prismea-icon.-x3.prismea-landingpage-glyph-42_prismea.-color-white.-circle.-primary-500
i.prismea-icon.-x3.prismea-landingpage-glyph-42_prismea.-color-white.-rounded.-primary-500

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 class="branding-text color-grey--800 font-weight-medium mb-4">Lorem ipsum dolor sit amet
  </li>
  <li class="branding-text color-grey--800 font-weight-medium mb-4">Lorem ipsum dolor sit amet
  </li>
  <li class="branding-text color-grey--800 font-weight-medium mb-4">Lorem ipsum dolor sit amet
  </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.branding-text.color-grey--800.font-weight-medium.mb-4.
    Lorem ipsum dolor sit amet
    
  li.branding-text.color-grey--800.font-weight-medium.mb-4.
    Lorem ipsum dolor sit amet
    
  li.branding-text.color-grey--800.font-weight-medium.mb-4.
    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

App Store and Google Store links

<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

You can use the following variants:

Font size: -size-10, -size-12, -size-14, -size-16, -size-18, -size-30, -size-50, -size-80
Alignment: -left, -right, -center
White spaces: -text-multiline
Word break: -break-text
Text decoration: -line-through, -underline
Text transform: -lowercase, -uppercase, -capitalize, -no-transform
Font weight: -text-lighter, -text-normal, -text-medium, -text-bold, -text-bolder

<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 mt-8 mb-7">Lorem ipsum dolor sit amet
  </h2>
  <h3 class="branding-title-3 color-grey--800 mt-8 mb-7">Lorem ipsum dolor sit amet
  </h3>
  <h4 class="branding-title-4 color-grey--800 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="embed-video">
    <iframe src="https://www.youtube.com/embed/9YffrCViTVk" title="YouTube video player"></iframe>
  </div>
  <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 class="branding-text color-grey--800 font-weight-medium mb-4">Lorem ipsum dolor sit amet
    </li>
    <li class="branding-text color-grey--800 font-weight-medium mb-4">Lorem ipsum dolor sit amet
    </li>
    <li class="branding-text color-grey--800 font-weight-medium mb-4">Lorem ipsum dolor sit amet
    </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.mt-8.mb-7.
    Lorem ipsum dolor sit amet
    
  h3.branding-title-3.color-grey--800.mt-8.mb-7.
    Lorem ipsum dolor sit amet
    
  h4.branding-title-4.color-grey--800.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')
  .embed-video
    iframe(src='https://www.youtube.com/embed/9YffrCViTVk', title='YouTube video player')
  .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.branding-text.color-grey--800.font-weight-medium.mb-4.
      Lorem ipsum dolor sit amet
      
    li.branding-text.color-grey--800.font-weight-medium.mb-4.
      Lorem ipsum dolor sit amet
      
    li.branding-text.color-grey--800.font-weight-medium.mb-4.
      Lorem ipsum dolor sit amet