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')

Badge

You can use the following variants:

  • Background Color: -primary, -secondary
<span class="prismea-landingpage-badge prismea-text -size-10 -text-bold -uppercase -secondary">Lorem ipsum dolor</span><span class="prismea-landingpage-badge prismea-text -size-10 -text-bold -uppercase -primary">Lorem ipsum dolor</span>
span.prismea-landingpage-badge.prismea-text.-size-10.-text-bold.-uppercase.-secondary Lorem ipsum dolor
span.prismea-landingpage-badge.prismea-text.-size-10.-text-bold.-uppercase.-primary Lorem ipsum dolor

Button

You can use the following variants:

  • Color: -primary, -white
  • Text color: -color-primary
  • Style: -outlined, -transparent
<p class="prismea-text" style="margin-bottom: 5px;"></p>
<a class="prismea-button -primary" style="margin: 0 5px;" href="#">Default</a>
<a class="prismea-button -primary -outlined" style="margin: 0 5px;" href="#">Outlined</a><span style="display: inline-block; background-color: #30aca3; padding:5px 0;">
  <a class="prismea-button -transparent" style="margin: 0 5px;" href="#">Transparent</a>
  <a class="prismea-button -white prismea-color -color-primary" style="margin: 0 5px;" href="#">White</a></span>
p.prismea-text(style='margin-bottom: 5px;')
a.prismea-button.-primary(style='margin: 0 5px;', href='#') Default
a.prismea-button.-primary.-outlined(style='margin: 0 5px;', href='#') Outlined
span(style='display: inline-block; background-color: #30aca3; padding:5px 0;')
  a.prismea-button.-transparent(style='margin: 0 5px;', href='#') Transparent
  a.prismea-button.-white.prismea-color.-color-primary(style='margin: 0 5px;', href='#') White

Checklist

Renders a checklist

<ul class="prismea-landingpage-checklist -color-grey5">
  <li class="prismea-text prismea-color">Lorem ipsum dolor sit amet consectetur</li>
  <li class="prismea-text prismea-color">Fusce blandit nunc libero</li>
  <li class="prismea-text prismea-color">Phasellus ac mi</li>
</ul>
ul.prismea-landingpage-checklist.-color-grey5
  li.prismea-text.prismea-color Lorem ipsum dolor sit amet consectetur
  li.prismea-text.prismea-color Fusce blandit nunc libero
  li.prismea-text.prismea-color Phasellus ac mi

Color

Colors used in the landing page design.

<p class="prismea-color">black text</p>
<p class="prismea-color -color-primary">primary 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-grey1">grey1 text</p>
<p class="prismea-color -color-grey2">grey2 text</p>
<p class="prismea-color -color-grey3">grey3 text</p>
<p class="prismea-color -color-grey4">grey4 text</p>
<p class="prismea-color -color-grey5">grey5 text</p>
p.prismea-color black text
p.prismea-color.-color-primary primary text
p.prismea-color.-color-secondary secondary text
p.prismea-color.-color-white white text
p.prismea-color.-color-grey1 grey1 text
p.prismea-color.-color-grey2 grey2 text
p.prismea-color.-color-grey3 grey3 text
p.prismea-color.-color-grey4 grey4 text
p.prismea-color.-color-grey5 grey5 text

Icon

You can use the following variants:

  • Glyph: Glyphs librairy
  • Size: -x1, -x2, -x3, -x4
  • Color: -color-primary, -color-secondary, -color-white, -color-white-opacity-70
<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"></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.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
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

Input Group

You can use the following variants:

  • Add a placeholder
  • Add the -error class and a error message at the bottom
<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 type="text" name="inputName" id="inputName" placeholder="XXX XXX XXXX"/>
</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>
.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#inputName(type='text', name='inputName', placeholder='XXX XXX XXXX')
.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

List item

Renders a list item. Used in block-... organisms.

<ul class="prismea-list-item">
  <li class="prismea-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. In quis egestas ex, ut vehicula felis. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</li>
  <li class="prismea-text">Fusce blandit nunc libero, in ultricies massa faucibus nec. Proin metus odio, ultricies quis libero vitae, tempor tempus est. Phasellus ac mi sed nulla molestie auctor.</li>
</ul>
ul.prismea-list-item
  li.prismea-text Lorem ipsum dolor sit amet, consectetur adipiscing elit. In quis egestas ex, ut vehicula felis. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
  li.prismea-text Fusce blandit nunc libero, in ultricies massa faucibus nec. Proin metus odio, ultricies quis libero vitae, tempor tempus est. Phasellus ac mi sed nulla molestie auctor.

Progress Bar

Progress bar used for user journey stepper header.

<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 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 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>
.prismea-vertical-spacing-5--slot
  .prismea-progress-bar.-white-opacity-20
    .prismea-progress-bar--progression.-white(style='width:0%;')
.prismea-vertical-spacing-5--slot
  .prismea-progress-bar.-white-opacity-20
    .prismea-progress-bar--progression.-white(style='width:50%;')
.prismea-vertical-spacing-5--slot
  .prismea-progress-bar.-white-opacity-20
    .prismea-progress-bar--progression.-white(style='width:100%;')

Separator

You can use the following variants:

  • Color: -primary, -secondary, -white
  • Alignement: -left
  • Size: -medium, -large
<div style="margin: 10px;">
  <hr class="prismea-separator"/>
</div>
<div style="margin: 10px;">
  <hr class="prismea-separator -primary"/>
</div>
<div style="margin: 10px;">
  <hr class="prismea-separator -secondary"/>
</div>
<div style="margin: 10px;">
  <hr class="prismea-separator -white"/>
</div>
<div style="margin: 10px;">
  <hr class="prismea-separator -left"/>
</div>
<div style="margin: 10px;">
  <hr class="prismea-separator -primary -left"/>
</div>
<div style="margin: 10px;">
  <hr class="prismea-separator -secondary -left"/>
</div>
<div style="margin: 10px;">
  <hr class="prismea-separator -white -left"/>
</div>
<div style="margin: 10px;">
  <hr class="prismea-separator -medium"/>
</div>
<div style="margin: 10px;">
  <hr class="prismea-separator -large"/>
</div>
div(style='margin: 10px;')
  hr.prismea-separator
div(style='margin: 10px;')
  hr.prismea-separator.-primary
div(style='margin: 10px;')
  hr.prismea-separator.-secondary
div(style='margin: 10px;')
  hr.prismea-separator.-white
div(style='margin: 10px;')
  hr.prismea-separator.-left
div(style='margin: 10px;')
  hr.prismea-separator.-primary.-left
div(style='margin: 10px;')
  hr.prismea-separator.-secondary.-left
div(style='margin: 10px;')
  hr.prismea-separator.-white.-left
div(style='margin: 10px;')
  hr.prismea-separator.-medium
div(style='margin: 10px;')
  hr.prismea-separator.-large

Skeleton Shape

You can use the following variants:

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

You can use the following variants:

  • Alignment: -left, -right, -center
  • Size: -size-10, -size-12, -size-14, -size-16, -size-18
  • Font: montserrat
  • Weight: -text-lighter, -text-normal, -text-bold, -text-bolder
  • Word break: -break-text
  • Decoration: -line-through, -underline
  • Transforms: -uppercase, -capitalize

To make line return visible, you can use -text-multiline

<p class="prismea-title-2">Roboto</p>
<p class="prismea-text -size-10">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. (10px)</p>
<p class="prismea-text -size-12">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>
<p class="prismea-text -size-14">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. (14px)</p>
<p class="prismea-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque bibendum cursus ipsum, dictum consequat ipsum tempus quis. Nulla suscipit gravida ultricies. Ut nec felis at sapien condimentum faucibus. Pellentesque tempus nec est eu iaculis. (16px)</p>
<p class="prismea-text prismea-color -color-primary">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque bibendum cursus ipsum, dictum consequat ipsum tempus quis. Nulla suscipit gravida ultricies. Ut nec felis at sapien condimentum faucibus. Pellentesque tempus nec est eu iaculis. (16px)</p>
<p class="prismea-text -size-18">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. (18px)</p>
<p class="prismea-title-2">Montserrat</p>
<p class="prismea-text -montserrat -size-10">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. (10px)</p>
<p class="prismea-text -montserrat -size-12">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>
<p class="prismea-text -montserrat -size-14">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. (14px)</p>
<p class="prismea-text -montserrat">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque bibendum cursus ipsum, dictum consequat ipsum tempus quis. Nulla suscipit gravida ultricies. Ut nec felis at sapien condimentum faucibus. Pellentesque tempus nec est eu iaculis. (16px)</p>
<p class="prismea-text -montserrat -size-18">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. (18px)</p>
p.prismea-title-2 Roboto
p.prismea-text.-size-10 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. (10px)
p.prismea-text.-size-12 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.prismea-text.-size-14 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. (14px)
p.prismea-text Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque bibendum cursus ipsum, dictum consequat ipsum tempus quis. Nulla suscipit gravida ultricies. Ut nec felis at sapien condimentum faucibus. Pellentesque tempus nec est eu iaculis. (16px)
p.prismea-text.prismea-color.-color-primary Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque bibendum cursus ipsum, dictum consequat ipsum tempus quis. Nulla suscipit gravida ultricies. Ut nec felis at sapien condimentum faucibus. Pellentesque tempus nec est eu iaculis. (16px)
p.prismea-text.-size-18 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. (18px)
p.prismea-title-2 Montserrat
p.prismea-text.-montserrat.-size-10 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. (10px)
p.prismea-text.-montserrat.-size-12 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.prismea-text.-montserrat.-size-14 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. (14px)
p.prismea-text.-montserrat Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque bibendum cursus ipsum, dictum consequat ipsum tempus quis. Nulla suscipit gravida ultricies. Ut nec felis at sapien condimentum faucibus. Pellentesque tempus nec est eu iaculis. (16px)
p.prismea-text.-montserrat.-size-18 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. (18px)

Title

You can use the following variants:

  • Tag Name: h1, h2, h3, p
  • Colors: -color-primary, -color-secondary, -color-white
  • Transforms: -uppercase, -capitalize
<h1 class="prismea-title-1 prismea-color -color-primary -text-multiline">Lorem ipsum dolor sit amet (Title 1 with h1)</h1>
<h1 class="prismea-title-1 prismea-color -color-white -text-multiline">Lorem ipsum dolor sit amet (Title 1 with h1)</h1>
<p class="prismea-title-1">Lorem ipsum dolor sit amet (Title 1 with p)</p>
<h2 class="prismea-title-2 prismea-color -color-primary -text-multiline">Lorem ipsum dolor sit amet (Title 2 with h2)</h2>
<h2 class="prismea-title-2 prismea-color -color-white -text-multiline">Lorem ipsum dolor sit amet (Title 2 with h2)</h2>
<p class="prismea-title-2">Lorem ipsum dolor sit amet (Title 2 with p)</p>
h1.prismea-title-1.prismea-color.-color-primary.-text-multiline Lorem ipsum dolor sit amet (Title 1 with h1)
h1.prismea-title-1.prismea-color.-color-white.-text-multiline Lorem ipsum dolor sit amet (Title 1 with h1)
p.prismea-title-1 Lorem ipsum dolor sit amet (Title 1 with p)
h2.prismea-title-2.prismea-color.-color-primary.-text-multiline Lorem ipsum dolor sit amet (Title 2 with h2)
h2.prismea-title-2.prismea-color.-color-white.-text-multiline Lorem ipsum dolor sit amet (Title 2 with h2)
p.prismea-title-2 Lorem ipsum dolor sit amet (Title 2 with p)