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.
- Atom: https://atom.io/
- Code: https://code.visualstudio.com/
- Sublime: http://www.sublimetext.com/
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
<a class="btn" href="#">Regular</a>
<a class="btn btn-md" href="#">Regular Medium</a>
<a class="btn btn-sm" href="#">Regular Small</a>
<a class="btn btn-secondary" href="#">btn</a>
<a class="btn btn-md btn-secondary" href="#">Secondary Medium</a>
<a class="btn btn-sm btn-secondary" href="#">Secondary Small</a>
<a class="btn red" href="#">Red</a>
<a class="btn btn-md red" href="#">Red Medium</a>
<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>