Elements

Fonts

Line Height differences between HelveticaNeue and HelveticaNeueWorld:

HelveticaNeue Font

HelveticaNeue Font Bold

New HelveticNeueWorld Font

New HelveticNeueWorld Bold


Site Fonts:

Primary Font

Primary Font Bold

Secondary Font

HotWheels Font

Barbie Font

Fisher-Price Font

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 1Division 2Division 3
Division 1Division 2Division 3
Division 1Division 2Division 3
A row with a cell spanning all 3 columns
Table Footer 1 Table Footer 2 Table Footer 3

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

  • MM/DD/YYYY

Form List

Form Inline

Form Messages

Error message!

Success message!

Components

Buttons

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.

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 image object:

Custom - using `data-sizes="auto"` with custom widths:

Test lazyload image

Vue Test

Icons

Image Banner

Image Grid

Videos

Video playing inline:

Video playing in popup modal:

Containers

.container

.container.container--large

.container.container--small

.container.container--full

Carousels

Card Touts

Two Up

Newsletter