[ux_banner height="400px" bg="17" bg_overlay="rgba(0, 0, 0, 0.66)"]

[text_box]

<h3 class="uppercase"><strong>Text Elements</strong></h3>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>

[/text_box]

[/ux_banner]
[section bg_color="rgb(255, 255, 255)"]

[title style="center" text="Typography"]

[row]

[col span="3"]

<h1>Headline h1</h1>
<h2>Headline h2</h2>
<h3>Headline h3</h3>
<h4>Headline h4</h4>
<h5>Headline h5</h5>
<h6>Headline h6</h6>

[/col]
[col span="3"]

<h1 class="uppercase">headline h1</h1>
<h2 class="uppercase">headline h2</h2>
<h3 class="uppercase">headline h3</h3>
<h4 class="uppercase">headline H4</h4>
<h5 class="uppercase">headline H5</h5>
<h6 class="uppercase">headline H6</h6>

[/col]
[col span="3"]

<h3 class="uppercase" data-text-color="primary">primary color</h3>
<h3 class="uppercase" data-text-color="secondary">secondary color</h3>
<h3 class="uppercase" data-text-color="alert">alert color</h3>
<h3 class="uppercase" data-text-color="success">SUCCESS COLOR</h3>
<h3 class="uppercase">DEFAULT COLOR</h3>

[/col]
[col span="3"]

<p><a href="#">Default link<br />
<strong>Bold link</strong></a><br />
<strong>Bold text<br />
</strong><em>Italic text<br />
</em><del>Strikethrough<br />
</del><span style="text-decoration: underline;">Underline</span></p>

[/col]

[/row]
[row]

[col span="4"]

<p class="lead"><strong>Lead paragraph</strong>. dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>

[/col]
[col span="4"]

<p><strong>Bold Text.</strong> sit amet, consectetuer <em>italic text  </em>elit, sed diam nonummy nibh euismod tincidunt ut laoreet <span style="text-decoration: underline;">underline text</span> magna aliquam erat volutpat. <del>Strike throught</del>. ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea. <a href="#">A simple link.</a></p>

[/col]
[col span="4"]

<p>Normal Paragraph. sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequa</p>

[/col]
[col span="3"]

<h2 class="lead">Default font</h2>
<p class="lead">Dolor sit amet, consectetuer adipiscing elit, sed diam nonummy.</p>

[/col]
[col span="3"]

<h2 class="lead alt-font"><b>Alternative Font</b>.</h2>
<p class="lead alt-font">Dolor sit amet, consectetuer <strong>adipiscing</strong> elit, sed diam nonummy.</p>

[/col]
[col span="3"]

<h2 class="lead">Thin text</h2>
<p class="lead">Dolor sit amet, consectetuer adipiscing elit, sed diam nonummy.</p>

[/col]
[col span="3"]

<h2 class="lead uppercase">UPPERCASE</h2>
<p class="lead uppercase">Dolor sit amet, consectetuer adipiscing elit, sed diam nonummy.</p>

[/col]
[col span="6"]

<h2 class="lead">This is a <span class="fancy-underline">Fancy Text Underline</span></h2>
<p class="lead">Dolor sit amet, consectetuer adipiscing elit, sed diam nonummy.</p>

[/col]
[col span="6"]

<h2 class="lead">This a count up number <span class="count-up"><strong>5000</strong></span></h2>
<p class="lead">Count up number can be added anywhere.</p>

[/col]

[/row]

[/section]
[section label="Media Right" bg_color="rgb(193, 193, 193)" bg_overlay="rgba(255, 255, 255, 0.85)"]

[row style="large" v_align="middle"]

[col span="6" span__sm="12" align="left"]

<h6>Flatsome Tip</h6>
<h2>You can find many text options in the "Format" dropdown in text editor.</h2>
<p class="lead">You see the changes live if you use the Page Builder</p>

[/col]
[col span="6" span__sm="12"]

[ux_image id="16" depth="3"]


[/col]

[/row]

[/section]
[section bg_color="rgb(255, 255, 255)" bg_overlay="rgb(34, 34, 34)" dark="true" padding="60px"]

[title style="center" text="Typography on Dark background"]

[row]

[col span="3"]

<h1>Headline h1</h1>
<h2>Headline h2</h2>
<h3>Headline h3</h3>
<h4>Headline h4</h4>
<h5>Headline h5</h5>
<h6>Headline h6</h6>

[/col]
[col span="3"]

<h1 class="uppercase">headline h1</h1>
<h2 class="uppercase">headline h2</h2>
<h3 class="uppercase">headline h3</h3>
<h4 class="uppercase">headline H4</h4>
<h5 class="uppercase">headline H5</h5>
<h6 class="uppercase">headline H6</h6>

[/col]
[col span="3"]

<h3 class="uppercase" data-text-color="primary">primary color</h3>
<h3 class="uppercase" data-text-color="secondary">secondary color</h3>
<h3 class="uppercase" data-text-color="alert">alert color</h3>
<h3 class="uppercase" data-text-color="success">SUCCESS COLOR</h3>
<h3 class="uppercase">DEFAULT COLOR</h3>

[/col]
[col span="3"]

<p><a href="#">Default link<br />
<strong>Bold link</strong></a><br />
<strong>Bold text<br />
</strong><em>Italic text<br />
</em><del>Strikethrough<br />
</del><span style="text-decoration: underline;">Underline</span></p>

[/col]

[/row]
[row]

[col span="4"]

<p class="lead"><strong>Lead paragraph</strong>. dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>

[/col]
[col span="4"]

<p><strong>Bold Text.</strong> sit amet, consectetuer <em>italic text  </em>elit, sed diam nonummy nibh euismod tincidunt ut laoreet <span style="text-decoration: underline;">underline text</span> magna aliquam erat volutpat. <del>Strike throught</del>. ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea. <a href="#">A simple link.</a></p>

[/col]
[col span="4"]

<p>Normal Paragraph. sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequa</p>

[/col]
[col span="7"]

<h2 class="lead">This is a<span class="fancy-underline"> Fancy Text Underline</span></h2>
<p class="lead">Dolor sit amet, consectetuer adipiscing elit, sed diam nonummy.</p>

[/col]
[col span="5"]

<h2 class="lead">This a count up number <span class="count-up"><strong>5000</strong></span></h2>
<p class="lead">Count up number can be added anywhere.</p>

[/col]

[/row]

[/section]
[section padding="60px"]

[title style="center" text="Quote"]

[row]

[col]

<blockquote>
<p class="lead"><strong>Quote</strong>. dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
</blockquote>
<p class="lead">Normal Paragraph. sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequa. Horizontal Line:</p>
[title style="center" text="Lists"]


[/col]
[col span="2"]

<ul>
<li>Simple List</li>
<li>List item 1</li>
<li>List Item 2</li>
<li>List item 3</li>
<li>List Item 4</li>
<li>List Item 5</li>
</ul>

[/col]
[col span="2"]

<ol>
<li>Numbered List</li>
<li>List item 1</li>
<li>List Item 2</li>
<li>List item 3</li>
<li>List Item 4</li>
<li>List Item 5</li>
</ol>

[/col]
[col span="2"]

<ul>
<li class="bullet-checkmark">Checkmark list</li>
<li class="bullet-checkmark">List Item 2</li>
<li class="bullet-checkmark">List item 3</li>
<li class="bullet-checkmark">List Item 4</li>
<li class="bullet-checkmark">List Item 5</li>
</ul>

[/col]
[col span="2"]

<ul>
<li class="bullet-star">Star list</li>
<li class="bullet-star">List Item 2</li>
<li class="bullet-star">List item 3</li>
<li class="bullet-star">List Item 4</li>
<li class="bullet-star">List Item 5</li>
</ul>

[/col]
[col span="2"]

<ul>
<li class="bullet-arrow">Arrow List</li>
<li class="bullet-arrow">List Item 2</li>
<li class="bullet-arrow">List item 3</li>
<li class="bullet-arrow">List Item 4</li>
<li class="bullet-arrow">List Item 5</li>
</ul>

[/col]

[/row]

[/section]