Theme Typography

Components

An overview of how components look with this theme. This intro paragraph is wrapped in our custom .rich-text class and is given Bootstrap's .lead class so we can see how it looks, too.

Note: The other blocks below are not wrapped in .rich-text, since they shouldn't be used that way in the theme.

Table of contents:

Accordion

Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.

Alerts

Badges

In headings

Heading 3 New

Heading 4 New

Heading 5 New

As labels

Contextual variations

Primary Secondary Success Danger Warning Info Light Dark

Links

Primary Secondary Success Danger Warning Info Light Dark

Buttons

Solid

Outline

Link (A Tag) Buttons with Icons and Text

Events (Primary) Events (Secondary) Events (Success, large) Events (Dark, large) 

    <a href="/events" class="btn btn-secondary">
      <i class="fas fa-calendar mr-2" aria-hidden="true"></i>
      <span>Events (Secondary)</span>
    </a>

Round the corners? Use inline styles for one-offs:
Events (Info, large, rounded)

Or add some Bootstrap-style customizations in the theme? 


    .btn-round-lg {
      border-radius: 25px;
    }
    .btn-round {
      border-radius: 15px;
    }

Link (A Tag) Buttons with Icon Only

Note the addition of the title on the <i> tag and the class on the <span>.

That's no moon!! That's no moon!! (Success, large) 

    <a href="/events" class="btn btn-success btn-lg">
      <i class="fal fa-space-station-moon-alt" aria-hidden="true" title="That's no moon!!"></i>
     <span class="sr-only">That's no moon!! (Success, large)</span>
    </a>

Cards

Basic

Card image cap
Card title

Some quick example text to build on the card title and make up the bulk of the card's content.

Go somewhere

Header & Footer

Featured
Special title treatment

With supporting text below as a natural lead-in to additional content.

Go somewhere
2 days ago
Action Another action Something else here

Forms

Default

Basic
We'll never share your email with anyone else.

Custom

Checkbox
Radio
Select
Range

Pagination

Code Samples

Code Samples

HTML Code Sample

[ add (from above) Button, Alert, Alert with Icon, and ?? ]


<div class="alert alert-primary" role="alert">A simple primary alert with <a class="alert-link" href="#">an example link</a>. Give it a click if you like.</div>