Skip to content Skip to navigation

[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>