Open/Close Side Menu
Search
Close
vi-VNen-US
Search
Thursday, November 21, 2024

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>

Primary Color

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_primaryColor">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>

Font sizes

Larger Text

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

Large Text

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

Extra Large Text

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

Light text

Nulla luctus maximus fermentum. Quisque vel enim in velit tempus scelerisque nec id tellus. Vivamus turpis lectus, mollis eleifend nibh ac, condimentum eleifend nunc. Aenean bibendum risus orci, sed tempus nisl faucibus vitae. Aliquam aliquet lectus vitae lectus porttitor, sed dapibus dolor cursus. Quisque efficitur id quam in consequat. Suspendisse vehicula sollicitudin neque eu tristique.

<p class="eds_lightText">Nulla luctus maximus fermentum. Quisque vel enim in velit tempus scelerisque nec id tellus. Vivamus turpis lectus, mollis eleifend nibh ac, condimentum eleifend nunc. Aenean bibendum risus orci, sed tempus nisl faucibus vitae. Aliquam aliquet lectus vitae lectus porttitor, sed dapibus dolor cursus. Quisque efficitur id quam in consequat. Suspendisse vehicula sollicitudin neque eu tristique. </p>

Darker Primary Color

Nulla luctus maximus fermentum. Quisque vel enim in velit tempus scelerisque nec id tellus. Vivamus turpis lectus, mollis eleifend nibh ac, condimentum eleifend nunc. Aenean bibendum risus orci, sed tempus nisl faucibus vitae. Aliquam aliquet lectus vitae lectus porttitor, sed dapibus dolor cursus. Quisque efficitur id quam in consequat. Suspendisse vehicula sollicitudin neque eu tristique.

<p class="eds_primaryColorDarker">Nulla luctus maximus fermentum. Quisque vel enim in velit tempus scelerisque nec id tellus. Vivamus turpis lectus, mollis eleifend nibh ac, condimentum eleifend nunc. Aenean bibendum risus orci, sed tempus nisl faucibus vitae. Aliquam aliquet lectus vitae lectus porttitor, sed dapibus dolor cursus. Quisque efficitur id quam in consequat. Suspendisse vehicula sollicitudin neque eu tristique. </p>

Main title

Nullam sed tortor sed sem varius

Nam consequat est sed nibh gravida, eget congue dolor vestibulum.

<div class="eds_mainTitle">
<h2>Nullam sed tortor sed sem varius</h2>
<p>Nam consequat est sed nibh gravida, eget congue dolor vestibulum.</p>
</div>

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>
<ul class="eds_footerList">
	<li>Lorem ipsum dolor sit amet</li>
	<li>Consectetur adipiscing elit</li>
	<li><a href="#">Integer molestie lorem at massa</a></li>
	<li><a href="#">Facilisis in pretium nisl aliquet</a></li>
	<li>Nulla volutpat aliquam velit</li>
</ul>

Dividers

Default


<hr>

Style 2


<hr class="eds_hrStyle2">

Style 3


<hr class="eds_hrStyle3">

Style 4


<hr class="eds_hrStyle4">

Style 5


<hr class="eds_hrStyle5">

Style 6


<hr class="eds_hrStyle6">

Info Messages

Nullam id dolor id nibh ultricies vehicula ut id elit.

<p class="eds_info bg-primary">...</p>

Duis mollis, est non commodo luctus, nisi erat porttitor ligula.

<p class="eds_info bg-success">...</p>

Maecenas sed diam eget risus varius blandit sit amet non magna.

<p class="eds_info bg-info">...</p>

Etiam porta sem malesuada magna mollis euismod.

<p class="eds_info bg-warning">...</p>

Donec ullamcorper nulla non metus auctor fringilla.

<p class="eds_info bg-danger">...</p>

Thumbnails

<a class="eds_thumbnail" href="#"><img alt="" src="/portals/0/Images/image.png" class="img-fluid"></a>
<a class="eds_thumbnail eds_edsCircleThumbnail" href="#"><img alt="" src="/portals/0/Images/image.png" class="img-fluid"></a>
Back To Top