Colors

We use a subset of all colors to create a smaller color palette for generating color schemes, also available as Sass variables. This enables more comprehensive customization and extension for any project.

Theme colors

Gray colors

Each gray color has a specific use in our themes. Some of them are used for backgrounds, some of them are used for component properties or text colors.

Typography

Headings

All HTML headings, <h1> through <h6>, are available.

<h1>h1. This is a heading</h1>
<h2>h2. This is a heading</h2>
<h3>h3. This is a heading</h3>
<h4>h4. This is a heading</h4>
<h5>h5. This is a heading</h5>
<h6>h6. This is a heading</h6>

.h1 through .h6 classes are also available, for when you want to match the font styling of a heading but cannot use the associated HTML element.

<p class="h1">h1. This is a heading</p>
<p class="h2">h2. This is a heading</p>
<p class="h3">h3. This is a heading</p>
<p class="h4">h4. This is a heading</p>
<p class="h5">h5. This is a heading</p>
<p class="h6">h6. This is a heading</p>

Display headings

Traditional heading elements are designed to work best in the meat of your page content. When you need a heading to stand out, consider using a display heading—a larger, slightly more opinionated heading style.

<h1 class="display-1">Display heading</h1>
<h1 class="display-2">Display heading</h1>
<h1 class="display-3">Display heading</h1>
<h1 class="display-4">Display heading</h1>
<h1 class="display-5">Display heading</h1>
<h1 class="display-6">Display heading</h1>

Lead

Make a paragraph stand out by adding .lead.

<p class="lead">
    This is a lead paragraph. It stands out from regular paragraphs.
</p>