Style Guide

This is a living style guide. It will evolve alongside the main site, hawkeward.com.

To see these components in action, see the kitchen sink.


Colors

  • Red 50
  • Red 100
  • Red 200
  • Red 300
  • Red 400
  • Red 500
  • Red 600
  • Red 700
  • Red 800
  • Red 900
  • Green 50
  • Green 100
  • Green 200
  • Green 300
  • Green 400
  • Green 500
  • Green 600
  • Green 700
  • Green 800
  • Green 900
  • Blue 50
  • Blue 100
  • Blue 200
  • Blue 300
  • Blue 400
  • Blue 500
  • Blue 600
  • Blue 700
  • Blue 800
  • Blue 900
  • Grey 50
  • Grey 100
  • Grey 200
  • Grey 300
  • Grey 400
  • Grey 500
  • Grey 600
  • Grey 700
  • Grey 800
  • Grey 900

Body text

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus mauris purus, dictum sed rhoncus et, efficitur a risus. Curabitur vel odio id nisi ultricies feugiat. Praesent at augue viverra neque egestas ornare. Phasellus posuere accumsan aliquet. Duis suscipit, elit sodales bibendum fringilla, est sapien tempus augue, eget ultrices massa dui in dui. Morbi eu mauris ac odio blandit egestas id eu erat. Praesent ultrices vehicula gravida.

Mauris at velit vitae ipsum bibendum blandit. Fusce sed nisl interdum, molestie mi in, consequat ex. Proin sagittis est nec orci efficitur, tempus interdum tellus scelerisque.

Read more

Lede paragraph

Curabitur vel odio id nisi ultricies feugiat. Praesent at augue viverra neque egestas ornare. Phasellus posuere accumsan aliquet. Duis suscipit, elit sodales bibendum fringilla.

Headings

h1. Heading 1

Lorem ipsum…

h2. Heading 2

Lorem ipsum…

h3. Heading 3

Lorem ipsum…

h4. Heading 4

Lorem ipsum…

h5. Heading 5

Lorem ipsum…

h6. Heading 6

Lorem ipsum…

Post heading

The quick brown fox jumped over the lazy dog

Anchor links

This is a regular anchor link.

Text action link

Learn more

Blockquote

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus mauris purus, dictum sed rhoncus et, efficitur a risus. Curabitur vel odio id nisi ultricies feugiat. Praesent at augue viverra neque egestas ornare. Phasellus posuere accumsan aliquet. Duis suscipit, elit sodales bibendum fringilla.

Pull quote

This pull quote has no source:

This pull quote has a source:

Code blocks

This is a code sample: console.log("Hello world!");.

Here are some individual tags like <html> and <html>.

<html>
<head>
<title>Sample code</title>
…
</head>
<body>
…

Buttons

Buttons that are anchor tags:

Primary Btn (Anchor) Primary Btn (Disabled) Secondary Btn (Anchor) Secondary Btn (Disabled)

Lists

First, simple ordered and unordered lists:

  1. List item 1
  2. And list item 2
  3. Finally, list item 3. Consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
  • List item 1
  • And list item 2
  • Finally, list item 3

Second, two-tiered lists:

  1. List item 1
  2. List item has a sub-list:
    1. Lorem ipsum…
    2. … dolor sit amet consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
  3. Finally, list item 3. Consectetur adipisicing elit.
  • List item 1
  • List item has a sub-list:
    • Lorem ipsum…
    • … dolor sit amet
  • Finally, list item 3. Consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Third, three-tiered lists:

  1. List item 1
  2. List item has a sub-list:
    1. Lorem ipsum…
    2. … dolor sit amet
  3. List item has a sub-list:
    1. Lorem ipsum…
    2. … dolor sit amet
      • Lorem ipsum…
      • … dolor sit amet consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
  • List item 1
  • List item has a sub-list:
    • Lorem ipsum…
    • … dolor sit amet consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
  • List item has a sub-list:
    • Lorem ipsum…
    • … dolor sit amet
      • Lorem ipsum…
      • … dolor sit amet consectetur adipisicing elit.

Definition list

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

Horizontal rule

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus mauris purus, dictum sed rhoncus et, efficitur a risus. Curabitur vel odio id nisi ultricies feugiat.


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.

Tables

This table has a header and footer:

Header Row Goes Here
Total 40 16 720
Apr. ’17 34 5 678
Jan. ’17 2 9 8
Oct. ’16 3 0 0
Jul. ’16 1 2 34

This is a simpler table:

Cheese 3 $10.00 $30.00
Pepperoni 2 $11.50 $23.00
Hawaiian 1 $12.00 $12.00
Veggie 1 $10.50 $10.50

Images

This is a caption, lorem ipsum dolor sit amet.