Editing HTML

Editing HTML

Within the component editor, you can switch from Visual to Text view to lightly edit the HTML markup.

Headline Text

The theme applies the red bar underline automatically.

You can adjust your content by using the following CSS Classes on headings H1 through H3.

Hide the underline on a heading:

<h3 class="hr-none">heading goes here</h3>

Center the underline on a heading:

<h3 class="hr-center">heading goes here</h3>

Steps List

  • First thing

    Details about first thing

  • Second thing

    Descriptive paragraph

  • Third thing

<ul class="steps-list">
<li>
<div>
<strong>First thing</strong>
<p>Details about first thing</p>
</div>
</li>
<li>
<div>
<strong>Second thing</strong>
<p>Descriptive paragraph</p>
</div>
</li>
<li>Third thing</li>
</ul>

Buttons

Regular

<a class="btn" href="#">Regular</a>

Regular Medium

<a class="btn btn-md" href="#">Regular Medium</a>

Regular Small

<a class="btn btn-sm" href="#">Regular Small</a>

Secondary

<a class="btn btn-secondary" href="#">btn</a>

Secondary Medium

<a class="btn btn-md btn-secondary" href="#">Secondary Medium</a>

Secondary Small

<a class="btn btn-sm btn-secondary" href="#">Secondary Small</a>

Red

<a class="btn red" href="#">Red</a>

Red Medium

<a class="btn btn-md red" href="#">Red Medium</a>

Red Small

<a class="btn btn-sm red" href="#">Red Small</a>

Text Size Reference

This is heading h1

This is heading h2 (with the css class class=”hr-none”)

This is heading h3 (with the css class class=”hr-none”)

This is heading h4

This is heading h5
This is heading h6

Paragraph text size

Blockquote Reference

When Dave asks HAL to open the pod bay door, HAL answers:

I’m sorry, Dave. I’m afraid I can’t do that.

<blockquote cite="https://www.imdb.com/title/tt0062622/quotes/qt0396921">I'm sorry, Dave. I'm afraid I can't do that.</blockquote>

Icons

After finding your icon, use HTML markup like this to make icons:
<span class="ea ea-alumni"></span>

Outlined Text

Use HTML markup like this to display outlined text:

<span class="ewu-text-outline">black outlined text</span>

<span class="ewu-text-outline-white">white outlined text</span>

Works best with headings in the Hero component.