$primary-color
HEX:
$secondary-color
HEX:
$tertiary-color
HEX:
$color-highlight
HEX:
$accent--1
HEX:
$accent--2
HEX:
$accent--3
HEX:
$alert-color
HEX:
$success-color
HEX:
$warning-color
HEX:
$color-default
HEX:
$light-gray
HEX:
$medium-gray
HEX:
$dark-gray
HEX:
View Open Sans and Droid Serif on Google Fonts
Body text
Headings Primary
Headings Secondary
<h2>
in your code, the next heading used should be either <h2>
or <h3>
. If you need a heading to look bigger or smaller to match a specific style, use a CSS custom class to override the default size. Colours can be changed in the editor.
The main page header of this guide is an <h1>
element. Please reserve h1 for individual page titles only.
The header above is an <h2>
element, which may be used for any form of page-level header which falls below the <h1>
header in a document hierarchy. More than one may be used per page.
The header above is an <h3>
element, which may be used for any form of page-level header which falls below the h2 header in a document hierarchy. More than one may be used per page.
The <h4>
elements should always fall below an <h3>
element.
The <h5>
elements should always fall below an <h4>
element.
The <h6>
elements should always fall below an <h5>
element and should be reserved for legalese or fine-print.
.color-primary
.color-secondary
.color-accent-1
.color-accent-2
.color-accent-1
.color-warning
.color-alert
.color-default-reversed
.color-disabled-reversed
.color-darkgray
.color-mediumgray
Those people who think they know everything are a great annoyance to those of us who do. Isaac Asimov
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
p class="title"
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
p class="title-secondary"
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
p class="lead"
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
p class="caption"
This is a calloutLorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. |
<table class="callout--default">
<tbody>
<tr>
<td>content here</td>
</tr>
</tbody>
</table>
This is a calloutLorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. |
<table class="callout--dark">
<tbody>
<tr>
<td>content here</td>
</tr>
</tbody>
</table>
This is a calloutLorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. |
<table class="callout--note">
<tbody>
<tr>
<td>content here</td>
</tr>
</tbody>
</table>
This is a calloutLorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. |
<table class="callout--alert">
<tbody>
<tr>
<td>content here</td>
</tr>
</tbody>
</table>
This is a calloutLorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. |
<table class="callout--success">
<tbody>
<tr>
<td>content here</td>
</tr>
</tbody>
</table>
This is a calloutLorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. |
<table class="callout--warning">
<tbody>
<tr>
<td>content here</td>
</tr>
</tbody>
</table>
<a class="button--small">Primary Sml</a>
<a class="button--default">Primary</a>
<a class="button--large">Primary Lrg</a>
<a class="button--secondary--small">Secondary Sml</a>
<a class="button--secondary--default">Secondary</a>
<a class="button--secondary--large">Secondary Lrg</a>
<a class="button--alternate--small">alternate Sml</a>
<a class="button--alternate--default">alternate</a>
<a class="button--alternate--large">alternate Lrg</a>
REVERSED SML REVERSED REVERSED LRG |
<a class="button--reversed--small">reversed Sml</a>
<a class="button--reversed--default">reversed</a>
<a class="button--reversed--large">reversed Lrg</a>