global

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

Foo 3
  • $color-brand-green
    #5C832F
  • $color-brand-green-dark
    #3b4a20
  • #ffffff
  • #cccccc
  • #999999
  • #666666
  • #333333
  • #000000
  • rgb(255,64,129)
  • #b3d4fc
  • rgb(63,81,181)
  • #46B6AC
Primary font: "HelveticaNeue", "Helvetica", "Arial", sans-serif;
Primary font italic: "HelveticaNeue", "Helvetica", "Arial", sans-serif;
Primary font bold: "HelveticaNeue", "Helvetica", "Arial", sans-serif;
Secondary font: Georgia, Times, "Times New Roman", serif;
Secondary font italic: Georgia, Times, "Times New Roman", serif;
Secondary font bold; Georgia, Times, "Times New Roman", serif;
  • $color-white
    #ffffff
  • $color-gray-02
    #f7f9f9
  • $color-gray-15
    #d9d9d9
  • $color-gray-35
    #a5a5a5
  • $color-gray-50
    #808080
  • $color-gray-65
    #595959
  • $color-gray-73
    #444444
  • $color-gray-87
    #222222
  • $color-black
    #000000
Fade: Duration: 0.3s Easing: ease-out (Hover to see effect)
Movement: Duration: 0.8s Easing: ease-in-out; (Hover to see effect)
  • $color-utility-positive
    #03804d
  • $color-utility-positive-subtle
    #d4f3e6
  • $color-utility-caution
    #a59b15
  • $color-utility-caution-subtle
    #fffecf
  • $color-utility-negative
    #b12a0b
  • $color-utility-negative-subtle
    #fdded8
  • $color-utility-neutral
    #0192d0
  • $color-utility-neutral-subtle
    #d3f2ff

Heading Level 1

Heading Level 2

Heading Level 3

Heading Level 4

Heading Level 5
Heading Level 6

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

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

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

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

  • 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
  1. This is a list item in an ordered list
  2. An ordered list is a list in which the sequence of items is important. An ordered list does not necessarily contain sequence characters.
  3. Lists can be nested inside of each other
    1. This is a nested list item
    2. This is another nested list item in an ordered list
  4. This is the last list item
Definition List
A number of connected items or names written or printed consecutively, typically one below the other.
This is a term.
This is the definition of that term, which both live in a dl.
Here is another term.
And it gets a definition too, which is this line.
Here is term that shares a definition with the term below.
And it gets a definition too, which is this line.



















Avatar

Page Header

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Welcome

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris sagittis pellentesque lacus eleifend lacinia...

Update

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenan convallis.
Image.jpg

Featured event:
May 24, 2016
7-11pm

Pattern Lab






Title
Title
Title
Title
Pattern Lab
Pattern Lab
Pattern Lab
Pattern Lab
Pattern Lab
Pattern Lab
1 Column
1 Column
1 Column
1 Column
1 Column
1 Column
4 Columns
4 Columns
4 Columns
6 columns
4 columns
2 columns
6 (8 tablet)
4 (6 tablet)
2 (4 phone)
  • Eddard
  • Catelyn
  • Robb
  • Sansa
  • Brandon
  • Arya
  • Rickon
  • Tywin
  • Cersei
  • Jamie
  • Tyrion
  • Viserys
  • Daenerys
  • Some Action
  • Another Action
  • Disabled Action
  • Yet Another Action

  • Some Action
  • Another Action
  • Disabled Action
  • Yet Another Action

  • Some Action
  • Another Action
  • Disabled Action
  • Yet Another Action
Table Heading 1 Table Heading 2 Table Heading 3 Table Heading 4
row 1 cell 1 row 1 cell 2 row 1 cell 3 row 1 cell 4
Input is not a number!
Input is not a number!
add
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
print
Print
cloud_upload
Upload file.zip
share
Share your content
via social media
1/1
This is an example of an image with a caption. Photo captions, also known as cutlines, are a few lines of text used to explain or elaborate on published photographs.