Font Family

You have two sets of font-family available to use in Elixir.

<div class="font-1">Montserrat</div>
<div class="font-2">Open Sans</div>

Headings

Elixir has all the html headings, <h1> through <h6>, styled for you. Also you can use.h1 through .h6 classes when you want to match the font styling of a heading but still want your text to be displayed inline.

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6

<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>

Paragraphs

This is a paragraph text. Following text are dummy copy text. Donec feugiat lorem dolor, eu fringilla urna tincidunt quis. In vitae dignissim lectus. Maecenas varius libero non metus rhoncus sagittis. Proin posuere iaculis auctor. Vivamus orci lorem, sollicitudin at convallis in, feugiat eget felis. Integer maximus, metus sit amet imperdiet semper, erat felis vulputate odio, nec malesuada metus.

<p>
	Your paragraph text goes here.
</p>

Lead Paragraph and Drop cap

Make a paragraph stand out by adding .lead and for drop cap, use .dropcap class.

Aliquam a fermentum tortor, nec fringilla eros. Donec molestie lorem elit, eget eleifend neque dignissim nec. Suspendisse ullamcorper dapibus dolor eget auctor. Etiam tempor dui nec eros blandit tincidunt.

Curabitur ut sapien pretium nulla porttitor porta sit amet eu neque. Nunc nec erat odio. Praesent tristique pulvinar erat, quis cursus sem ultricies sed. Suspendisse ullamcorper dapibus dolor eget auctor. Ut quis egestas nibh. Aliquam a fermentum tortor, nec fringilla eros. Donec molestie lorem elit, eget eleifend neque dignissim nec. Etiam tempor dui nec eros blandit tincidunt.

<p class="dropcap lead">
	Your paragraph goes here.
</p>
<p class="lead">
	Your paragraph goes here.
</p>

Font styles

Font weights

.fw-100{font-weight: 100 !important;}
.fw-200{font-weight: 200 !important;}
.fw-300{font-weight: 300 !important;}
.fw-400{font-weight: 400 !important;}
.fw-500{font-weight: 500 !important;}
.fw-600{font-weight: 600 !important;}
.fw-700{font-weight: 700 !important;}
.fw-800{font-weight: 800 !important;}
.fw-900{font-weight: 900 !important;}

Colors

Use the folloing classes to change the text color.

.color-primary

.color-info

.color-success

.color-warning

.color-danger

.color-black

.color-1

.color-2

.color-3

.color-4

.color-5

.color-6

.color-7

.color-8

.color-9

.color-10

.color-11

.color-white

<h5 class="color-primary">.color-primary</h5>

Sizes

If you want different sizes of fonts, you may use the folloing classes.

.fs--1

.fs-0

.fs-1

.fs-2

.fs-3

.fs-4

.fs-5

.fs-6

.fs-7

.fs-8

<h6 class="fs--1">.fs--1</h6>
<h6 class="fs-0">.fs-0</h6>

Alignments

<p class="text-left">
	Your paragraph goes here.
</p>
<p class="text-right">
	Your paragraph goes here.
</p>
<p class="text-center">
	Your paragraph goes here.
</p>
<p class="text-justify">
	Your paragraph goes here.
</p>

Transformation

Lowercased text

Uppercased text

Capitalized text

<h5 class="text-lowercase">Lowercased text.</h5>
<h5 class="text-uppercase">Uppercased text.</h5>
<h5 class="text-capitalize">Capitalized text.</h5>

Inline styles

Use these tags for inline styling. Feel free to use <b> and <em> tags insted of <strong> and <i> tags.

<mark>mark</mark> text
<del>Deleted text</del>
<u>Underlined text</u>
<small>Small text</small>
<strong>Bold text</strong>
<i>Italic text</i>

Blockquotes

If you want to get laid, go to college. If you want an education, go to the library.”

<blockquote class="blockquote my-5 font-2">
	<p class="fs-2 color-4 lh-2 font-italic">If you want to get laid, go to college. If you want an education, go to the library.”</p>
	<footer class="blockquote-footer">Frank Zappa</footer>
</blockquote>

Alternate displays

Add .blockquote-reverse for a blockquote with right-aligned content.

If you want to get laid, go to college. If you want an education, go to the library.”

<blockquote class="blockquote-reverse my-5 font-2">
	<p class="fs-2 color-4 lh-2 font-italic">If you want to get laid, go to college. If you want an education, go to the library.”</p>
	<footer class="blockquote-footer">Frank Zappa</footer>
</blockquote>

Lists

Unordered

A list of items in which the order does not explicitly matter.

• Lorem ipsum dolor sit amet
• Consectetur adipiscing elit
• Nulla volutpat aliquam velit
  • Phasellus iaculis neque
  • Purus sodales ultricies
• Faucibus porta lacus fringilla vel

<ul>
	<li>Lorem ipsum dolor sit amet</li>
	<li>Consectetur adipiscing elit</li>
	<li>Nulla volutpat aliquam velit
		<ul>
			<li>Phasellus iaculis neque</li>
			<li>Purus sodales ultricies</li>
		</ul>
	</li>
	<li>Faucibus porta lacus fringilla vel</li>
</ul>

Ordered

A list of items in which the order does explicitly matter.

1. Lorem ipsum dolor sit amet
2. Consectetur adipiscing elit
3. Nulla volutpat aliquam velit
   1. Phasellus iaculis neque
   2. Purus sodales ultricies
4. Faucibus porta lacus fringilla vel

<ol>
	<li>Lorem ipsum dolor sit amet</li>
	<li>Consectetur adipiscing elit</li>
	<li>Nulla volutpat aliquam velit
		<ol>
			<li>Phasellus iaculis neque</li>
			<li>Purus sodales ultricies</li>
		</ol>
	</li>
	<li>Faucibus porta lacus fringilla vel</li>
</ol>

No Style

A list of items in which the order does not explicitly matter.

• Lorem ipsum dolor sit amet
• Consectetur adipiscing elit
• Nulla volutpat aliquam velit
  • Phasellus iaculis neque
  • Purus sodales ultricies
• Faucibus porta lacus fringilla vel

Styled Checkmark

A list of items in which the order does not explicitly matter.

• Lorem ipsum dolor sit amet
• Consectetur adipiscing elit
• Nulla volutpat aliquam velit
  • Phasellus iaculis neque
  • Purus sodales ultricies
• Faucibus porta lacus fringilla vel