Style Guide

These examples show the capabilities of the website's stylesheet, including common HTML elements and a variety of design tools.


Typography

Heading 1

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. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Heading 2

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. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Heading 3

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. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Heading 4

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. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Heading 5

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. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.


Large Text

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. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.


Small Text

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. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.


Italic text

Bold text

Normal link

Small link

Button link

Clear button link

Uppercase text

Lowercase text

Capitalized text


Text Alignment

Left Aligned

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. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.


Centered

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. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.


Right Aligned

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. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.


Justified

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. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.


Lists

Unordered List

  • Lorem ipsum dolor sit amet
  • Lorem ipsum dolor sit amet
  • Lorem ipsum dolor sit amet
  • Lorem ipsum dolor sit amet
  • Lorem ipsum dolor sit amet
    • Lorem ipsum dolor sit amet
    • Lorem ipsum dolor sit amet
      • Lorem ipsum dolor sit amet
      • Lorem ipsum dolor sit amet

Ordered List

  1. Lorem ipsum dolor sit amet
  2. Lorem ipsum dolor sit amet
  3. Lorem ipsum dolor sit amet
  4. Lorem ipsum dolor sit amet
  5. Lorem ipsum dolor sit amet
    1. Lorem ipsum dolor sit amet
    2. Lorem ipsum dolor sit amet
      1. Lorem ipsum dolor sit amet
      2. Lorem ipsum dolor sit amet

Dictionary List

Lorem ipsum
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perspiciatis quisquam temporibus fugit voluptatem magnam, adipisci tempore unde.
Lorem ipsum
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perspiciatis quisquam temporibus fugit voluptatem magnam, adipisci tempore unde.
Lorem ipsum
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perspiciatis quisquam temporibus fugit voluptatem magnam, adipisci tempore unde.

Icons


Horizontal Rules













Blockquotes

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iure veniam eveniet eligendi deleniti id porro harum quisquam dignissimos, labore distinctio illo, dolores nobis ad repellendus eius consequuntur incidunt laudantium officia.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsam perspiciatis dolore, perferendis vitae consectetur assumenda ad optio sequi magnam placeat facilis ratione tenetur commodi aperiam labore adipisci sit voluptatem earum.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iure veniam eveniet eligendi deleniti id porro harum quisquam dignissimos, labore distinctio illo, dolores nobis ad repellendus eius consequuntur incidunt laudantium officia.


Call-outs

Lorem

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsam perspiciatis dolore, perferendis vitae consectetur assumenda ad optio sequi magnam placeat facilis ratione tenetur commodi aperiam labore adipisci sit voluptatem earum.


Color

Link

Link Hover

Menu Link

Menu Link Hover

Main Background

Header Background

Footer Background

Button Text

Button

Button Hover


Images


Normal


Bordered


Popup


Right Aligned

Image aligned right. 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. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.


Left Aligned

Image aligned left. 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. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.


Captions

Lorem ipsum dolor sit amet, consectetur adipisicing elit.



Forms

Legend



Grid

12 Column Responsive Flexbox Grid

12 Desktop / 6 Small Desktop / 4 Tablet / 2 Mobile

 
 
 
 
 
 
 
 
 
 
 
 

6 Desktop / 6 Small Desktop / 4 Tablet / 2 Mobile

 
 
 
 
 
 

4 Desktop / 4 Small Desktop / 4 Tablet / 1 Mobile

 
 
 
 

3 Desktop / 3 Small Desktop / 3 Tablet / 1 Mobile

 
 
 

2 Desktop / 2 Small Desktop / 2 Tablet / 1 Mobile