Examples

Text

Headings

Headings
Copy Pug
Copy HTML
Open in playground
Show code
Hide code

<h1>
  H1&nbsp;-&nbspAmet consectetur nostrud consectetur ut 
</h1>
<h2>
  H2&nbsp;-&nbspEnim irure dolore magna sint 
</h2>
<h3>
  H3&nbsp;-&nbspNostrud velit officia sint labore 
</h3>

<h1>
  H1&nbsp;-&nbspLorem excepteur aliquip sunt pariatur 
</h1>
<h2>
  H2&nbsp;-&nbspEiusmod in amet incididunt nulla 
</h2>
<h3>
  H3&nbsp;-&nbspOfficia aute aliquip tempor ut 
</h3>

H1 - Et aute sed magna magna

H2 - Dolore irure elit qui cupidatat

H3 - Laboris cillum aute dolore quis

Small header segment

Small header segment
Copy Pug
Copy HTML
Open in playground
Show code
Hide code
70% font size

<h1>
  H1&nbsp;-&nbsp
  <small>
    Reprehenderit eu ipsum dolore elit enim lorem reprehenderit 
  </small>
</h1>
<h2>
  H2&nbsp;-&nbsp
  <small>
    Dolore tempor ullamco commodo incididunt exercitation esse enim 
  </small>
</h2>
<h3>
  H3&nbsp;-&nbsp
  <small>
    Cillum sint ad sit non dolore do aute 
  </small>
</h3>

<h1>
  H1&nbsp;-&nbsp
  <small>
    Labore consequat sed in laborum dolor velit ut 
  </small>
</h1>
<h2>
  H2&nbsp;-&nbsp
  <small>
    Do consectetur ullamco cupidatat adipiscing in in eiusmod 
  </small>
</h2>
<h3>
  H3&nbsp;-&nbsp
  <small>
    Nostrud aliqua esse consectetur mollit ut amet aliquip 
  </small>
</h3>

H1 - Irure duis id irure laborum sit adipiscing sunt

H2 - Ea ut sint aliquip ipsum aliqua sit cupidatat

H3 - Lorem excepteur aliqua anim in occaecat ipsum fugiat

Content text

Paragraph
Copy Pug
Copy HTML
Open in playground
Show code
Hide code

<p>
  Cillum cillum ipsum ex ea cupidatat consequat eiusmod aliqua ut ut deserunt aliquip mollit aute dolor officia minim id duis ad labore et in lorem nisi deserunt consequat minim veniam in et mollit labore sit tempor velit in do incididunt nulla cillum ut dolor aliqua culpa ullamco duis non ex culpa esse ipsum laboris voluptate culpa ea duis ipsum lorem sunt reprehenderit sint dolore dolor incididunt consectetur cillum aute commodo ut aute minim non elit id in dolore culpa eiusmod ad ut veniam et sed irure consectetur proident veniam voluptate consectetur consequat pariatur ad sed eiusmod ut ea adipiscing esse 
</p>

<p>
  Mollit ex officia veniam ea mollit exercitation id nulla ex deserunt cillum sed sint id dolor anim cupidatat sit minim consequat nulla nulla esse in pariatur est id aliqua aliquip ea qui magna id sit ad mollit sint cupidatat velit ullamco nulla irure cillum lorem culpa ipsum sit elit pariatur quis ipsum velit cillum magna ad non fugiat duis minim nisi aliqua nisi dolore consequat sed in dolor anim in minim dolore laborum anim aliquip ut amet velit ut elit dolor amet eiusmod duis qui ad tempor dolore non officia dolore in consectetur amet commodo magna velit fugiat tempor tempor 
</p>

Dolor esse culpa quis reprehenderit ullamco officia est ex ut excepteur voluptate laboris laborum dolor ullamco qui ea occaecat ea dolor consectetur ullamco exercitation officia id veniam minim consequat tempor nisi est dolore tempor dolore nulla velit velit laborum fugiat fugiat tempor et in aute voluptate anim reprehenderit magna in aliqua mollit sed proident voluptate excepteur voluptate cillum dolor enim ea aute in velit in laborum enim consequat qui ex ut officia laborum ad lorem dolore adipiscing consequat laboris lorem nostrud id et amet in minim labore ut non veniam sint minim excepteur adipiscing qui non excepteur eiusmod mollit incididunt

Link
Copy Pug
Copy HTML
Open in playground
Show code
Hide code

<p>
  Do minim occaecat dolor dolor dolor ex 
  <a href="#">
    Nostrud veniam nostrud 
  </a>
  Anim occaecat excepteur sunt 
</p>

<p>
  Fugiat irure dolor quis aliquip in est 
  <a href="#">
    Proident ea ex 
  </a>
  Fugiat enim dolor quis 
</p>

Reprehenderit excepteur incididunt adipiscing enim eu cillum Aliqua do in Et nisi proident voluptate

Sup
Copy Pug
Copy HTML
Open in playground
Show code
Hide code

<p>
  Consectetur sit labore tempor veniam minim eiusmod 
  <sup>
    Veniam sit voluptate 
  </sup>
  Aliquip pariatur adipiscing sint 
</p>

<p>
  Eu ut consequat quis amet sit mollit 
  <sup>
    Dolore eiusmod nulla 
  </sup>
  Tempor aute sed et 
</p>

Duis culpa ex labore ad sit aliquip ^{Voluptate eu duis}Aliquip irure nulla officia

Sub
Copy Pug
Copy HTML
Open in playground
Show code
Hide code

<p>
  Quis ut duis do dolor aliquip dolore 
  <sub>
    Sit nisi ullamco 
  </sub>
  Nulla dolore nisi exercitation 
</p>

<p>
  Ad adipiscing consectetur ea lorem ut qui 
  <sub>
    Anim occaecat reprehenderit 
  </sub>
  Ea eiusmod elit eu 
</p>

Ut sed exercitation minim dolore cillum velit _{Anim cupidatat elit}Incididunt culpa sit duis

List
Copy Pug
Copy HTML
Open in playground
Show code
Hide code

<ul>
  <li>
    Lorem aliquip 
  </li>
  <li>
    Ut officia 
  </li>
  <li>
    Dolor ut 
    <ul>
      <li>
        Pariatur reprehenderit 
      </li>
      <li>
        Ut minim 
      </li>
    </ul>
  </li>
  <li>
    Eiusmod voluptate 
  </li>
</ul>

<ul>
  <li>
    Proident aute 
  </li>
  <li>
    Aute excepteur 
  </li>
  <li>
    Ut labore 
    <ul>
      <li>
        Lorem labore 
      </li>
      <li>
        Eiusmod aliquip 
      </li>
    </ul>
  </li>
  <li>
    Dolore lorem 
  </li>
</ul>

Tempor enim
Id dolor
Sit dolor
- Cupidatat id
- Eu eiusmod
Elit consequat

Text align left.text-align-left

.text-align-left {
  text-align: left;
}

Text align center.text-align-center

.text-align-center {
  text-align: center;
}

Text align right.text-align-right

.text-align-right {
  text-align: right;
}

Text underline.text-underline

.text-underline {
  text-decoration: underline !important;
}

Font weights.font-weight-*

Aa.font-weight-thin

Aa.font-weight-normal

Aa.font-weight-bold

Text sizes.text-size-*

Consectetur quis lorem ipsum nulla pariatur nisi lorem amet irure .text-size-headline

In eiusmod eu velit pariatur deserunt quis ut consequat incididunt .text-size-title

Occaecat nostrud fugiat dolore nisi velit ipsum reprehenderit incididunt ut .text-size-subheader

Exercitation dolor dolore dolore et sint cillum in eu cillum .text-size-button

Veniam dolor non elit irure quis ullamco amet laborum cillum .text-size-body

Exercitation duis aliqua velit cillum ea velit velit ex ut .text-size-small

Text overflow
Copy Pug
Copy HTML
Open in playground
Show code
Hide code
.text-overflow

<div class="text-overflow">
  Ut enim cupidatat sint magna ex lorem enim culpa ex minim qui dolore fugiat excepteur incididunt laborum exercitation fugiat ad do excepteur ullamco lorem nulla ex reprehenderit ut ut dolore nisi ut labore est occaecat deserunt laborum ipsum qui laborum 
</div>

<div class="text-overflow">
  Sunt dolore id culpa nisi incididunt in in lorem id esse commodo voluptate in eiusmod ut proident ut culpa anim sint ad commodo commodo duis amet proident esse adipiscing amet ut adipiscing ullamco consequat qui minim excepteur laboris mollit in 
</div>

Id consectetur commodo ut tempor ea voluptate minim dolore reprehenderit adipiscing fugiat in et id in pariatur et anim dolor ex elit in sint ad laboris dolore commodo duis dolor nulla occaecat aliqua in lorem irure lorem cupidatat consectetur cupidatat