Have a 🍪 cookie

Inline Styling Reference

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

Tip: Some folks prefer to use a code editor to visualize their edits. We recommend a nice open-source editor available in Mac, Win, or Linux flavors.

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>