Elements

Headings

H1 The quick brown fox jumps over the lazy dog

H2 The quick brown fox jumps over the lazy dog

H3 The quick brown fox jumps over the lazy dog

H4 The quick brown fox jumps over the lazy dog

H5 The quick brown fox jumps over the lazy dog
H6 The quick brown fox jumps over the lazy dog

List Types

Ordered List

  1. List Item 1
  2. List Item 2
  3. List Item 3
    1. List Item 3.1
    2. List Item 3.2
      1. List Item 3.2.1
      2. List Item 3.2.2
    3. List Item 3.3
  4. List Item 4

Unordered List

  • List Item 1
  • List Item 2
  • List Item 3
    • List Item 3.1
    • List Item 3.2
      • List Item 3.2.1
      • List Item 3.2.2
    • List Item 3.3
  • List Item 4

Definition List

Definition Term 1
Definition Description 1
Definition Term 2
Definition Description 2

Tables

Table Header 1Table Header 2Table Header 3
Division 1 Division 2 Division 3
Division 1 Division 2 Division 3
Division 1 Division 2 Division 3
A row with a cell spanning all 3 columns
Table Footer Header 1 Table Footer 1
Table Footer Header 2 Table Footer 2
Table Footer Header 3 Table Footer 3
Table Footer Header 4 Table Footer 4
Table Footer Header 5 Table Footer 4

Text Elements

The a element and external a element examples

The abbr element and an abbr element with title examples

The ACRONYM element example

The b element example

The cite element example

The code element example

The data element example

The del element example

The dfn element and dfn element with title examples

The em element example

The i element example

The ins element example

The kbd element example

The mark element example

The q element example

The q element inside a q element example

The s element example

The samp element example

The small element example

The span element example

The strong element example

The sub element example

The sup element example

The example

The u element example

The var element example

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam vehicula, turpis et hendrerit commodo, massa purus pellentesque orci, vulputate blandit ipsum velit nec libero. Nam tristique eleifend enim, a suscipit sem maximus nec. Proin lobortis tortor vel sem suscipit euismod. Cras laoreet mattis libero, in viverra erat volutpat ac. Cras porttitor luctus fringilla. Nullam elementum tortor sed velit luctus, quis egestas urna pretium. Curabitur convallis arcu augue, ut feugiat mi vehicula ac. Nam ac tincidunt diam. Vivamus eu neque commodo metus congue luctus. Vivamus tempor molestie ex, eu mollis metus eleifend id. Sed vel condimentum metus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer metus urna, rutrum a mauris a, luctus pulvinar odio. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Etiam eu scelerisque elit.

Quisque vel fringilla libero, sed ornare nulla. Nulla ac condimentum nisl. Aliquam ac risus ac mauris mattis semper suscipit sit amet nisi. Duis vitae augue ut arcu varius ullamcorper sed a erat. Sed vel ligula at augue maximus dignissim vel ut risus. Sed quis felis pharetra, porta ante ut, malesuada nisi. Pellentesque lacinia turpis ultricies metus bibendum interdum. Mauris vel iaculis quam, eget tincidunt leo. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Pellentesque viverra justo ut auctor mattis. Morbi nec est fermentum, interdum velit id, varius tellus. Praesent et tempor ligula. Mauris nulla felis, viverra fermentum magna nec, egestas condimentum felis. Donec imperdiet ipsum ac urna iaculis molestie. Nam malesuada quis justo vitae tincidunt.

Form Elements

Form Elements

  • 0/250
  • Error message

  • Error message

  • Please select a delivery date

Form List

Form Inline

Form Messages

  • Error message

  • Success message

  • Helper message

Spacing

.spacing
.spacing--smallest
.spacing--smaller
.spacing--small
.spacing--regular
.spacing--medium
.spacing--large
.spacing--larger
.spacing--largest
.spacing--huge

Components

Buttons

Icons

Accordion

Vehicula nec, a vel penatibus amet diam, lobortis semper platea proin scelerisque scelerisque, faucibus pariatur non quis, convallis id inceptos suspendisse nunc bibendum. Id porttitor ac, morbi erat fusce.

Vehicula nec, a vel penatibus amet diam, lobortis semper platea proin scelerisque scelerisque, faucibus pariatur non quis, convallis id inceptos suspendisse nunc bibendum. Id porttitor ac, morbi erat fusce.

Vehicula nec, a vel penatibus amet diam, lobortis semper platea proin scelerisque scelerisque, faucibus pariatur non quis, convallis id inceptos suspendisse nunc bibendum. Id porttitor ac, morbi erat fusce.

Vehicula nec, a vel penatibus amet diam, lobortis semper platea proin scelerisque scelerisque, faucibus pariatur non quis, convallis id inceptos suspendisse nunc bibendum. Id porttitor ac, morbi erat fusce.

Vehicula nec, a vel penatibus amet diam, lobortis semper platea proin scelerisque scelerisque, faucibus pariatur non quis, convallis id inceptos suspendisse nunc bibendum. Id porttitor ac, morbi erat fusce.

Vehicula nec, a vel penatibus amet diam, lobortis semper platea proin scelerisque scelerisque, faucibus pariatur non quis, convallis id inceptos suspendisse nunc bibendum. Id porttitor ac, morbi erat fusce.

Vehicula nec, a vel penatibus amet diam, lobortis semper platea proin scelerisque scelerisque, faucibus pariatur non quis, convallis id inceptos suspendisse nunc bibendum. Id porttitor ac, morbi erat fusce.

Vehicula nec, a vel penatibus amet diam, lobortis semper platea proin scelerisque scelerisque, faucibus pariatur non quis, convallis id inceptos suspendisse nunc bibendum. Id porttitor ac, morbi erat fusce.

Modals

Toggle Dropdown

Menu

Lazy Load Image

Snippet - using the `c-responsive-image` snippet with an Imgix sourced image:

Vue Test