[hero banner]: presentation.html#hero banner
Color
The following colors can be applied to card, poster, and banner elements.
Red Text
#c0392b
rgb(192, 57, 43)
Orange Text
#9b5111
rgb(155, 81, 17)
Green Text
#0f6b58
rgb(15, 107, 88)
Blue Text
#1b6597
rgb(27, 101, 151)
Purple Text
#7a3a96
rgb(122, 58, 150)
Gray Text
#3f3f3f
rgb(63, 63, 63)
Red Accent
#e74c3c
rgb(231, 76, 60)
Orange Accent
#e98300
rgb(233, 131, 0)
Green Accent
#009b76
rgb(0, 155, 118)
Blue Accent
#0098db
rgb(0, 152, 219)
Purple Accent
#a96fc0
rgb(169, 111, 192)
Gray Accent
#b3b3b3
rgb(179, 179, 179)
Red Highlight
#ee8073
rgb(238, 128, 115)
Orange Highlight
#ffa32a
rgb(255, 163, 42)
Green Highlight
#00d7a5
rgb(0, 215, 165)
Blue Highlight
#1bbbff
rgb(27, 187, 255)
Purple Highlight
#c299d2
rgb(194, 153, 210)
Gray Highlight
#d2d2d2
rgb(210, 210, 2100)
Typography
Headings
All HTML headings, <h1>
through <h6>
, are available. Start with <h2>
for content headings.
h1. Heading One
h2. Heading Two
h3. Heading Three
h4. Heading Four
h5. Heading Five
h6. Heading Six
<h1>h1. Heading One</h1>
<h2>h2. Heading Two</h2>
<h3>h3. Heading Three</h3>
<h4>h4. Heading Four</h4>
<h5>h5. Heading Five</h5>
<h6>h6. Heading Six</h6>
Table
Title | Description | Icons |
---|---|---|
Table Heading 1 | Integer pulvinar purus ac cursus commodo. Suspendisse egestas porta imperdiet. Quisque accumsan malesuada arcu, a rutrum urna elementum sed. | |
Table Heading 2 | Fusce et magna nec mi lobortis cursus. Phasellus egestas eros massa, vel facilisis lacus tincidunt eu. Proin hendrerit orci suscipit, auctor quam sed, pharetra felis. | |
Table Heading 3 | Proin non nisi sed nisi cursus rutrum sed nec libero. |
<table class="table table-striped">
<thead>
<tr>
<th style="width: 35%">Title</th>
<th style="width: 50%">Description</th>
<th style="width: 15%">Icons</th>
</tr>
</thead>
<tbody>
<tr>
<th>Table Heading 1</th>
<td>Integer pulvinar purus ac cursus commodo. Suspendisse egestas porta imperdiet. Quisque accumsan malesuada arcu, a rutrum urna elementum sed.</td>
<td class="center"><i class="fa fa-check-circle fa-2x"></i></td>
</tr>
<tr>
<th>Table Heading 2</th>
<td>Fusce et magna nec mi lobortis cursus. Phasellus egestas eros massa, vel facilisis lacus tincidunt eu. Proin hendrerit orci suscipit, auctor quam sed, pharetra felis.</td>
<td class="center"><i class="fa fa-times-circle fa-2x"></i></td>
</tr>
<tr>
<th>Table Heading 3</th>
<td>Proin non nisi sed nisi cursus rutrum sed nec libero.</td>
<td class="center"><i class="fa fa-exclamation-circle fa-2x"></i></td>
</tr>
</tbody>
</table>