Style guides

Buttons

Default    Info     Primary     Success    

General HTML tags

(There should be an HR tag visible between each section)

 

The <h1> tag

This is an Headline of type H1

h1 > strong

h1 > em

h1 > u

h1 > s

h1 > a

The <h2> tag

This is an Headline of type H2

h2 > strong

h2 > em

h2 > u

h2 > s

h2 > a

The <h3> tag

This is an Headline of type H3

h3 > strong

h3 > em

h3 > u

h3 > s

h3 > a

The <h4> tag

This is an Headline of type H4

h4 > strong

h4 > em

h4 > u

h4 > s

h4 > a

The <a> tag

a

a > strong | strong > a

a > em | em > a

a > u | u > a

a > s | s > a

The <ul> and <li> tags

  • ul > li:first-child
    • ul > li:first-child > ul > li:first-child
      • ul > li:first-child > ul > li:first-child > ul > li:first-child
      • ul > li:first-child > ul > li:first-child > ul > li
      • ul > li:first-child > ul > li:first-child > ul > li:last-child
    • ul > li:first-child > ul > li
      • ul > li:first-child > ul > li > ul > li:first-child
      • ul > li:first-child > ul > li > ul > li
      • ul > li:first-child > ul > li > ul > li:last-child
    • ul > li:first-child > ul > li:last-child
      • ul > li:first-child > ul > li:last-child > ul > li:first-child
      • ul > li:first-child > ul > li:last-child > ul > li
      • ul > li:first-child > ul > li:last-child > ul > li:last-child
  • ul > li
    • ul > li > ul > li:first-child
      • ul > li > ul > li:first-child > ul > li:first-child
      • ul > li > ul > li:first-child > ul > li
      • ul > li > ul > li:first-child > ul > li:last-child
    • ul > li > ul > li
      • ul > li > ul > li > ul > li:first-child
      • ul > li > ul > li > ul > li
      • ul > li > ul > li > ul > li:last-child
    • ul > li > ul > li:last-child
      • ul > li > ul > li:last-child > ul > li:first-child
      • ul > li > ul > li:last-child > ul > li
      • ul > li > ul > li:last-child > ul > li:last-child
  • ul > li:last-child
    • ul > li:last-child > ul > li:first-child
      • ul > li:last-child > ul > li:first-child > ul > li:first-child
      • ul > li:last-child > ul > li:first-child > ul > li
      • ul > li:last-child > ul > li:first-child > ul > li:last-child
    • ul > li:last-child > ul > li
      • ul > li:last-child > ul > li > ul > li:first-child
      • ul > li:last-child > ul > li > ul > li
      • ul > li:last-child > ul > li > ul > li:last-child
    • ul > li:last-child > ul > li:last-child
      • ul > li:last-child > ul > li:last-child > ul > li:first-child
      • ul > li:last-child > ul > li:last-child > ul > li
      • ul > li:last-child > ul > li:last-child > ul > li:last-child

The <ol> and <li> tags

  1. ol > li:first-child
    1. ol > li:first-child > ol > li:first-child
      1. ol > li:first-child > ol > li:first-child > ol > li:first-child
      2. ol > li:first-child > ol > li:first-child > ol > li
      3. ol > li:first-child > ol > li:first-child > ol > li:last-child
    2. ol > li:first-child > ol > li
      1. ol > li:first-child > ol > li > ol > li:first-child
      2. ol > li:first-child > ol > li > ol > li
      3. ol > li:first-child > ol > li > ol > li:last-child
    3. ol > li:first-child > ol > li:last-child
      1. ol > li:first-child > ol > li:last-child > ol > li:first-child
      2. ol > li:first-child > ol > li:last-child > ol > li
      3. ol > li:first-child > ol > li:last-child > ol > li:last-child
  2. ol > li
    1. ol > li > ol > li:first-child
      1. ol > li > ol > li:first-child > ol > li:first-child
      2. ol > li > ol > li:first-child > ol > li
      3. ol > li > ol > li:first-child > ol > li:last-child
    2. ol > li > ol > li
      1. ol > li > ol > li > ol > li:first-child
      2. ol > li > ol > li > ol > li
      3. ol > li > ol > li > ol > li:last-child
    3. ol > li > ol > li:last-child
      1. ol > li > ol > li:last-child > ol > li:first-child
      2. ol > li > ol > li:last-child > ol > li
      3. ol > li > ol > li:last-child > ol > li:last-child
  3. ol > li:last-child
    1. ol > li:last-child > ol > li:first-child
      1. ol > li:last-child > ol > li:first-child > ol > li:first-child
      2. ol > li:last-child > ol > li:first-child > ol > li
      3. ol > li:last-child > ol > li:first-child > ol > li:last-child
    2. ol > li:last-child > ol > li
      1. ol > li:last-child > ol > li > ol > li:first-child
      2. ol > li:last-child > ol > li > ol > li
      3. ol > li:last-child > ol > li > ol > li:last-child
    3. ol > li:last-child > ol > li:last-child
      1. ol > li:last-child > ol > li:last-child > ol > li:first-child
      2. ol > li:last-child > ol > li:last-child > ol > li
      3. ol > li:last-child > ol > li:last-child > ol > li:last-child

The <table> tag as created by the Rich text editor

Table (no headers and no fixed width)

column 1 column 2
value a value b
value x value y

The <table> tag as created by the Rich text editor

Table (row and column headers, table caption, table summary and no fixed width)

column 1 column 2
This is a table caption
value a value b
value x value y

Latest Orders

Date OrderID Price Tracking#
08/04/2015 Order 124 $0.00 0000234233
08/04/2015 Order 124 $0.00 0000234233