Typography

Headings

All heading styles from h1 through h6. To use you can &:extend(h1) through &:extend(h6) or apply .h1 through .h6

h1 Heading Level 1

h2 Heading Level 2

h3 Heading Level 3

h4 Heading Level 4

h5 Heading Level 5

h6 Heading Level 6

Standard Copy

All standard paragraphy info and styling including strong, bold, italic and emphasis.

A paragraph (from the Greek paragraphos, “to write beside” or “written beside”) is a self-contained unit of a discourse in writing dealing with a particular point or idea. A paragraph consists of one or more sentences. Though not required by the syntax of any language, paragraphs are usually an expected part of formal writing, used to organize longer prose.

A paragraph (from the Greek paragraphos, “to write beside” or “written beside”) is a self-contained unit of a discourse in writing dealing with a particular point or idea. A paragraph consists of one or more sentences. Though not required by the syntax of any language, paragraphs are usually an expected part of formal writing, used to organize longer prose.

A paragraph (from the Greek paragraphos, “to write beside” or “written beside”) is a self-contained unit of a discourse in writing dealing with a particular point or idea. A paragraph consists of one or more sentences. Though not required by the syntax of any language, paragraphs are usually an expected part of formal writing, used to organize longer prose.

Lists

All standard lists follow browser defaults. There is a .reset-list helper class to remove the bullets and numerals if needed.

• This is a list item in an unordered list
• An unordered list is a list in which the sequence of items is not important. Sometimes, an unordered list is a bulleted list. And this is a long list item in an unordered list that can wrap onto a new line.
• Lists can be nested inside of each other
  • This is a nested list item
  • This is another nested list item in an unordered list
• This is the last list item

Iconography

Messages

• • Success!
• • Invalid password or email address provided.
  • Please check the email address matches the format of john.doe@domain.com

Forms

Individual form controls automatically receive some global styling. All text based input, textarea, and select elements are set to width: 100%; by default. Labels and Placeholders are visible by default. Add the .sr-only helper class to labels that you don’t want to display.

Buttons

Grid

Using the grid system, we can make complex layouts using a minimal amount of markup. Grid columns are based on 12 columns and utilize the same naming convention and functionality as Bootstrap.

Tables

Pagination

2. 1
3. 2
4. 3
5. 4
6. 5

Responsive Embeds