Search
× Search

Custom Typography Elements

Custom Font

Etiam condimentum ultrices est, eu dapibus magna mollis at. Donec sit amet sem ut ex gravida scelerisque at in nulla. Nulla rhoncus tortor id risus tempus egestas. Pellentesque libero diam, venenatis ac magna a, pretium blandit tortor. Vestibulum in vulputate eros.
<span class="eds_customFont">Etiam condimentum ultrices est, eu dapibus magna mollis at. Donec sit amet sem ut ex gravida scelerisque at in nulla. Nulla rhoncus tortor id risus tempus egestas. Pellentesque libero diam, venenatis ac magna a, pretium blandit tortor. Vestibulum in vulputate eros.</span>

Text Color

Primary Color
<span class="eds_primaryColor">Primary Color</span>
Primary Color Darker
<span class="eds_primaryColorDarker">Primary Color Darker</span>
Secondary Color
<span class="eds_secondaryColor">Secondary Color</span>
Secondary Color Darker
<span class="eds_secondaryColorDarker">Secondary Color Darker</span>
Light Text
<span class="eds_lightText">Light Text</span>
White Color
<span class="eds_whiteColor">White Color</span>
Dark Color
<span class="eds_darkColor">Dark Color</span>

Text sizes

Larger Text

<p class="eds_largerText">Larger Text</p>

Large Text

<p class="eds_largeText">Large Text</p>

Medium Large Text

<p class="eds_mediumLargeText">Medium Large Text</p>

Extra Large Text

<p class="eds_extraLargeText">Extra Large Text</p>

Anchor

Etiam condimentum ultrices est, eu dapibus magna mollis at. Donec sit amet sem ut ex gravida scelerisque at in nulla. Nulla rhoncus tortor id risus tempus egestas. Pellentesque libero diam, venenatis ac magna a, pretium blandit tortor. Vestibulum in vulputate eros.

Custom list styles

  • Lorem ipsum dolor sit amet
  • Consectetur adipiscing elit
  • Integer molestie lorem at massa
  • Facilisis in pretium nisl aliquet
  • Nulla volutpat aliquam velit
<ul class="eds_listCircle">
	<li>Lorem ipsum dolor sit amet</li>
	<li>Consectetur adipiscing elit</li>
	<li>Integer molestie lorem at massa</li>
	<li>Facilisis in pretium nisl aliquet</li>
	<li>Nulla volutpat aliquam velit</li>
</ul>
  • Lorem ipsum dolor sit amet
  • Consectetur adipiscing elit
  • Integer molestie lorem at massa
  • Facilisis in pretium nisl aliquet
  • Nulla volutpat aliquam velit
<ul class="eds_listStar">
	<li>Lorem ipsum dolor sit amet</li>
	<li>Consectetur adipiscing elit</li>
	<li>Integer molestie lorem at massa</li>
	<li>Facilisis in pretium nisl aliquet</li>
	<li>Nulla volutpat aliquam velit</li>
</ul>
  • Lorem ipsum dolor sit amet
  • Consectetur adipiscing elit
  • Integer molestie lorem at massa
  • Facilisis in pretium nisl aliquet
  • Nulla volutpat aliquam velit
<ul class="eds_listCheckSquare">
	<li>Lorem ipsum dolor sit amet</li>
	<li>Consectetur adipiscing elit</li>
	<li>Integer molestie lorem at massa</li>
	<li>Facilisis in pretium nisl aliquet</li>
	<li>Nulla volutpat aliquam velit</li>
</ul>
  • Lorem ipsum dolor sit amet
  • Consectetur adipiscing elit
  • Integer molestie lorem at massa
  • Facilisis in pretium nisl aliquet
  • Nulla volutpat aliquam velit
<ul class="eds_listChevronCircle">
	<li>Lorem ipsum dolor sit amet</li>
	<li>Consectetur adipiscing elit</li>
	<li>Integer molestie lorem at massa</li>
	<li>Facilisis in pretium nisl aliquet</li>
	<li>Nulla volutpat aliquam velit</li>
</ul>
  • Lorem ipsum dolor sit amet
  • Consectetur adipiscing elit
  • Integer molestie lorem at massa
  • Facilisis in pretium nisl aliquet
  • Nulla volutpat aliquam velit
<ul class="eds_listCircleO">
	<li>Lorem ipsum dolor sit amet</li>
	<li>Consectetur adipiscing elit</li>
	<li>Integer molestie lorem at massa</li>
	<li>Facilisis in pretium nisl aliquet</li>
	<li>Nulla volutpat aliquam velit</li>
</ul>
  • Lorem ipsum dolor sit amet
  • Consectetur adipiscing elit
  • Integer molestie lorem at massa
  • Facilisis in pretium nisl aliquet
  • Nulla volutpat aliquam velit
<ul class="eds_listCheck">
	<li>Lorem ipsum dolor sit amet</li>
	<li>Consectetur adipiscing elit</li>
	<li>Integer molestie lorem at massa</li>
	<li>Facilisis in pretium nisl aliquet</li>
	<li>Nulla volutpat aliquam velit</li>
</ul>
  • Lorem ipsum dolor sit amet
  • Consectetur adipiscing elit
  • Integer molestie lorem at massa
  • Facilisis in pretium nisl aliquet
  • Nulla volutpat aliquam velit
<ul class="eds_listCheckSquareO">
	<li>Lorem ipsum dolor sit amet</li>
	<li>Consectetur adipiscing elit</li>
	<li>Integer molestie lorem at massa</li>
	<li>Facilisis in pretium nisl aliquet</li>
	<li>Nulla volutpat aliquam velit</li>
</ul>
  • Lorem ipsum dolor sit amet
  • Consectetur adipiscing elit
  • Integer molestie lorem at massa
  • Facilisis in pretium nisl aliquet
  • Nulla volutpat aliquam velit
<ul class="eds_listPaperclip">
	<li>Lorem ipsum dolor sit amet</li>
	<li>Consectetur adipiscing elit</li>
	<li>Integer molestie lorem at massa</li>
	<li>Facilisis in pretium nisl aliquet</li>
	<li>Nulla volutpat aliquam velit</li>
</ul>

Horizontal rules


<hr>

<hr class="eds_style2">

<hr class="eds_style3">

<hr class="eds_style4">

<hr class="eds_style5">

Main Title

Heading 2

Heading 3

Paragraph In id diam non dolor bibendum ornare a at sapien. Curabitur interdum, purus a tristique consectetur, urna mi facilisis mauris, at hendrerit ex lectus ac tortor.

<div class="eds_mainTitle">
	<h2>Heading 2</h2>
	<h3>Heading 3</h3>
	<p>Paragraph In id diam non dolor bibendum ornare a at sapien. Curabitur interdum, purus a tristique consectetur, urna mi facilisis mauris, at hendrerit ex lectus ac tortor.</p>
</div>

Title Border

H1 Title Border

<h1 class="eds_titleBorder">H1 Title Border</h1>

H2 Title Border

<h2 class="eds_titleBorder">H2 Title Border</h2>

H3 Title Border

<h3 class="eds_titleBorder">H3 Title Border</h3>

H4 Title Border

<h4 class="eds_titleBorder">H4 Title Border</h4>
H5 Title Border
<h5 class="eds_titleBorder">H5 Title Border</h5>
H6 Title Border
<h6 class="eds_titleBorder">H6 Title Border</h6>

Thin Text

<h1 class="eds_thinText">Thin Text</h1>