Global

The global category defines visual elements such as colour, font families, and motion. While not technically UI components, these elements are critical to document in the pattern library.

  • $cape-code
    rgb(63, 80, 76)
  • $wild-watermelon
    rgb(255, 81, 115)
  • $fire-bush
    rgb(237, 160, 52)
  • $bitter-lemon
    rgb(198, 225, 0)
  • $cerulean
    rgb(36, 165, 212)
  • $color-white
    #fff
  • $colour-grey-lightest
  • $colour-grey-lighter
  • $colour-grey-light
  • $colour-grey
    #55595c
  • $colour-grey-dark
  • $colour-black
    #000
  • $colour-utility-alert
  • $colour-utility-error
  • $colour-utility-notice
  • $colour-utility-sucess
  • $colour-corp-facebook
  • $colour-corp-twitter
  • $colour-corp-google-plus
  • $colour-corp-linkedin
  • $colour-corp-pinterest
  • $colour-corp-tumblr
  • $colour-corp-youtube
  • $colour-corp-instagram
The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog.
Sans Serif font: "Proxima Nova", "Lato", "Helvetica Neue", Helvetica, Arial, sans-serif;
Sans Serif font italic: "Proxima Nova", "Lato", "Helvetica Neue", Helvetica, Arial, sans-serif;
Sans Serif font bold: "Proxima Nova", "Lato", "Helvetica Neue", Helvetica, Arial, sans-serif;
Serif font: "Baskerville", "Libre Baskerville", Georgia, "Times New Roman", Times, serif;
Serif font italic: "Baskerville", "Libre Baskerville", Georgia, "Times New Roman", Times, serif;
Serif font bold: "Baskerville", "Libre Baskerville", Georgia, "Times New Roman", Times, serif;
Monospace font: "Hack", Menlo, Monaco, Consolas, "Courier New", monospace;
Serif font italic: "Hack", Menlo, Monaco, Consolas, "Courier New", monospace;
Serif font bold: "Hack", Menlo, Monaco, Consolas, "Courier New", monospace;
Slab font: "Sigmar One";
TODO

Default Alert This is a default alert. Link

Error Alert

This is an error alert.

Link

Notice Alert This is a notice alert. Link

Sucess Alert This is a sucess alert. Link

Avatar
Hero Image
Landscape Image
Square Image

Heading Level 1

Heading Level 2

Heading Level 3

Heading Level 4

Heading Level 5
Heading Level 6
Display One
Display Two
Display Three
Display Four

This is a text 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 or SCUBA

Keybord 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 what inline code looks like.

This is sample output from a computer program

The variarble 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.

  	
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 { | } ~

d = {}
for c in (65, 97):
    for i in range(26):
        d[chr(i+c)] = chr((i+13) % 26 + c)

print("".join([d.get(c, c) for c in s]))

.grid

.l-column .l-column--6

.l-column .l-column--6

1

l-column l-column--11 l-column--omega

l-column--2

l-column l-column--10 l-column--omega

l-column l-column--3

l-column l-column--9 l-column--omega

l-column l-column--4

l-column l-column--8 l-column--omega

l-column l-column--5

l-column l-column--7 l-column--omega

l-column l-column--6

l-column l-column--6 l-column--omega

.l-column .l-column--4

.l-column .l-column--8

.l-nest .l-nest--4-of-8

.l-nest .l-nest--4-of-8

.l-column .l-column--6 .l-shift--3

l-column--4 l-column--pad

l-column--8 l-column--reset-display l-column--pad

svg

A block quotation (also known as a long quotation or extract) is a quotation in a written document, that is set off from the main text as a paragraph, or block of text, and typically distinguished visually using indentation and a different typeface or smaller size quotation.

A block quotation (also known as a long quotation or extract) is a quotation in a written document, that is set off from the main text as a paragraph, or block of text, and typically distinguished visually using indentation and a different typeface or smaller size quotation.