Primary

Secondary

Tertiary

Grey

Util

Primary Font - "Rubik", "Lucida Sans Unicode", "Lucida Grande", sans-serif

Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quisquam suscipit ipsa placeat rerum cupiditate perspiciatis in id iste magni ex nostrum aspernatur non doloribus similique eos ipsam, consectetur, saepe tempora sit, dignissimos veniam. Consequuntur, vel quibusdam ipsa quaerat laboriosam repellat mollitia praesentium molestiae sequi accusamus adipisci voluptatum inventore minima deleniti, facere doloremque, numquam aliquam repudiandae! Atque quidem distinctio amet. Esse ullam eius commodi culpa asperiores labore dolores sit ratione error sapiente deleniti amet omnis, unde praesentium laborum porro autem perspiciatis temporibus laudantium alias? Quibusdam velit dolorem, doloremque, quos quo id similique odit reiciendis saepe vero inventore facilis, optio architecto consequuntur nobis asperiores animi aliquam? Ipsam similique ab illum sint accusamus provident qui id iste, aspernatur laudantium corporis doloribus. Quos quisquam corporis laborum, at maiores sequi molestiae tenetur exercitationem architecto est earum consectetur unde minus eos odio labore cum consequatur. Nihil aut voluptates qui corrupti facilis laboriosam accusantium repudiandae deleniti quo eligendi iste beatae magnam rerum totam, optio tempora. Nostrum dolore doloribus cumque dolorum officiis itaque sit? Aut placeat error corrupti eveniet saepe nesciunt excepturi architecto. Nulla dolorem odio nesciunt nobis explicabo tempora, rerum architecto perspiciatis aliquam nam quidem quam consequatur delectus. Iusto, distinctio nam sint reprehenderit debitis ratione possimus cumque.

Secondary Font - "Merriweather", "Palatino Linotype", "Book Antiqua", Palatino, serif

Nam fugit repellat veritatis aut pariatur nobis quibusdam? Quos facere cum totam, architecto consequuntur nam molestias, repudiandae, illo consequatur reprehenderit fugiat explicabo sit fugit eveniet quibusdam nihil non sunt assumenda. Consequuntur recusandae officia sapiente repudiandae excepturi. Perferendis dicta alias maxime minus culpa doloremque soluta veniam placeat unde. Veritatis officiis facilis labore incidunt nulla deserunt hic. Obcaecati corrupti necessitatibus, accusamus explicabo laudantium deserunt. Error voluptatum tempore repudiandae unde amet fugit quibusdam earum excepturi doloribus obcaecati aspernatur labore voluptate, dolorem nemo aut aperiam numquam reiciendis commodi, asperiores velit culpa. Perferendis modi, nemo molestiae animi possimus enim harum dolores magnam adipisci neque mollitia iste earum similique distinctio commodi accusamus esse sunt illo fugit sapiente numquam! Facere, odio ullam. Officia perspiciatis sapiente laboriosam odit aut necessitatibus quasi temporibus nostrum veniam consequuntur, eligendi sint, voluptate assumenda saepe, nesciunt modi fuga nobis id pariatur! Rerum corporis aliquid, accusantium, sint est eos suscipit laboriosam nam, vel amet nihil facere obcaecati tempora? Accusamus, perspiciatis neque. Quis libero corrupti accusantium dolorem, sint at similique quas quasi corporis et odio modi recusandae iusto consequatur, consequuntur dignissimos placeat! Excepturi unde itaque, soluta error totam possimus saepe voluptas recusandae, facere odio labore neque ipsa explicabo ipsum temporibus nemo perferendis aliquam delectus ea.

Code Font - "Lucida Console", Monaco, monospace

Nam fugit repellat veritatis aut pariatur nobis quibusdam? Quos facere cum totam, architecto consequuntur nam molestias, repudiandae, illo consequatur reprehenderit fugiat explicabo sit fugit eveniet quibusdam nihil non sunt assumenda. Consequuntur recusandae officia sapiente repudiandae excepturi. Perferendis dicta alias maxime minus culpa doloremque soluta veniam placeat unde. Veritatis officiis facilis labore incidunt nulla deserunt hic. Obcaecati corrupti necessitatibus, accusamus explicabo laudantium deserunt. Error voluptatum tempore repudiandae unde amet fugit quibusdam earum excepturi doloribus obcaecati aspernatur labore voluptate, dolorem nemo aut aperiam numquam reiciendis commodi, asperiores velit culpa. Perferendis modi, nemo molestiae animi possimus enim harum dolores magnam adipisci neque mollitia iste earum similique distinctio commodi accusamus esse sunt illo fugit sapiente numquam! Facere, odio ullam. Officia perspiciatis sapiente laboriosam odit aut necessitatibus quasi temporibus nostrum veniam consequuntur, eligendi sint, voluptate assumenda saepe, nesciunt modi fuga nobis id pariatur! Rerum corporis aliquid, accusantium, sint est eos suscipit laboriosam nam, vel amet nihil facere obcaecati tempora? Accusamus, perspiciatis neque. Quis libero corrupti accusantium dolorem, sint at similique quas quasi corporis et odio modi recusandae iusto consequatur, consequuntur dignissimos placeat! Excepturi unde itaque, soluta error totam possimus saepe voluptas recusandae, facere odio labore neque ipsa explicabo ipsum temporibus nemo perferendis aliquam delectus ea.

Quibusdam velit dolorem, doloremque, quos quo id similique odit reiciendis saepe vero inventore facilis, optio architecto consequuntur nobis asperiores animi aliquam?

Standard Table

Table Caption
Table Heading 1 Table Heading 2 Table Heading 3 Table Heading 4 Table Heading 5
Table Footer 1 Table Footer 2 Table Footer 3 Table Footer 4 Table Footer 5
Table Cell 1 Table Cell 2 Table Cell 3 Table Cell 4 Table Cell 5
Table Cell 1 Table Cell 2 Table Cell 3 Table Cell 4 Table Cell 5
Table Cell 1 Table Cell 2 Table Cell 3 Table Cell 4 Table Cell 5
Table Cell 1 Table Cell 2 Table Cell 3 Table Cell 4 Table Cell 5

CRUD Table

Table Caption
Table Heading 1 Table Heading 2 Table Heading 3 Table Heading 4 Table Heading 5
Table Footer 1 Table Footer 2 Table Footer 3 Table Footer 4 Table Footer 5
Table Cell 1 Table Cell 2 Table Cell 3 Table Cell 4 Table Cell 5
Table Cell 1 Table Cell 2 Table Cell 3 Table Cell 4 Table Cell 5
Table Cell 1 Table Cell 2 Table Cell 3 Table Cell 4 Table Cell 5
Table Cell 1 Table Cell 2 Table Cell 3 Table Cell 4 Table Cell 5

Row-based Heading Table

Table Caption
Table Heading 1 Table Cell 1 Table Cell 1 Table Cell 1
Table Heading 2 Table Cell 2 Table Cell 2 Table Cell 2
Table Heading 3 Table Cell 3 Table Cell 3 Table Cell 3
Table Heading 4 Table Cell 4 Table Cell 4 Table Cell 4
Table Heading 5 Table Cell 5 Table Cell 5 Table Cell 5
Radio example
Checkbox example

Standard (btn class)

link - class .btn link - class .btn

Secondary (btn & btn--secondary class)

link - class .btn link - class .btn

Large (btn & btn--large class)

link - class .btn btn--large link - class .btn btn--large

Small (btn & btn--small class)

link - class .btn btn--small link - class .btn btn--small

Elements with the btn & btn--flat class

link - class .btn btn--flat link - class .btn btn--flat

Elements with the btn & btn--full-width-mobile class

link - class .btn btn--full-width-mobile link - class .btn btn--full-width-mobile

Elements with the btn btn--small btn--secondary & btn--action class

View Edit Archive Delete

Button Group

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.

Example heading New

Example heading New

Example heading New

Example heading New

Example heading New
Example heading New

Light Dark Disabled Error Info Success Warning Error Dark Info Dark Success Dark Warning Dark

Light Dark Disabled Error Info Success Warning Error Dark Info Dark Success Dark Warning Dark

Heading Level 1

Heading Level 2

Heading Level 3

Heading Level 4

Heading Level 5
Heading Level 6

Heading Level 1 that is very long to simulate wrapping to a second line therefore illustrating the line height

Heading Level 2 that is very long to simulate wrapping to a second line therefore illustrating the line height

Heading Level 3 that is very long to simulate wrapping to a second line therefore illustrating the line height

Heading Level 4 that is very long to simulate wrapping to a second line therefore illustrating the line height

Heading Level 5 that is very long to simulate wrapping to a second line therefore illustrating the line height
Heading Level 6 that is very long to simulate wrapping to a second line therefore illustrating the line height

This is a text link.

This is an external link.

Strong is used to indicate strong importance.

This text has added emphasis.

The b element is stylistically different text from normal text, without any special importance.

The i element is text that is set off from the normal text.

The u element is text with an unarticulated, though explicitly rendered, non-textual annotation.

This text is deleted and This text is inserted.

This text has a strikethrough.

Superscript®.

Subscript for things like H2O.

This small text is small for for fine print, etc..

Abbreviation: HTML.

Keyboard input: Cmd.

This text is a short inline quotation.

This is a citation

The dfn element indicates a definition.

The mark element indicates a highlight.

This is sample output from a computer program.

The variable element, such as x = y.

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.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dignissimos, aspernatur recusandae enim quae doloremque, natus iste nemo placeat quod neque quibusdam soluta ipsa dolor quo aperiam officiis totam quaerat iusto?

A Large Paragraph Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quisquam suscipit ipsa placeat rerum cupiditate perspiciatis in id iste magni ex nostrum aspernatur non doloribus similique eos ipsam, consectetur, saepe tempora sit, dignissimos veniam. Consequuntur, vel quibusdam ipsa quaerat laboriosam repellat mollitia praesentium molestiae sequi accusamus adipisci voluptatum inventore minima deleniti, facere doloremque, numquam aliquam repudiandae! Atque quidem distinctio amet. Esse ullam eius commodi culpa asperiores labore dolores sit ratione error sapiente deleniti amet omnis, unde praesentium laborum porro autem perspiciatis temporibus laudantium alias? Quibusdam velit dolorem, doloremque, quos quo id similique odit reiciendis saepe vero inventore facilis, optio architecto consequuntur nobis asperiores animi aliquam? Ipsam similique ab illum sint accusamus provident qui id iste, aspernatur laudantium corporis doloribus.

Keyboard input: Cmd

Inline code: <div>code</div>

Block code:

<p><strong>Keyboard input:</strong> <kbd>Cmd</kbd></p> <p> <strong>Inline code:</strong> <code><div>code</div></code> </p> <p><strong>Block code:</strong></p> <code class="block"><div>code</div></code> <p> <strong>Sample output:</strong> <samp>This is sample output from a computer program.</samp> </p>

Sample output: This is sample output from a computer program. 

  P R E F O R M A T T E D T E X T
  ! " # $ % & ' ( ) * + , - . /
  0 1 2 3 4 5 6 7 8 9 : ; < = > ?
  @ A B C D E F G H I J K L M N O
  P Q R S T U V W X Y Z [ \ ] ^ _
  \` a b c d e f g h i j k l m n o
  p q r s t u v w x y z | ~