Typography
Fonts
.font--avenir-light, $font--avenir-light - Avenir Light
The quick brown fox jumps over the lazy dog
.font--avenir-book, $font--avenir-book - Avenir Book
The quick brown fox jumps over the lazy dog
.font--avenir-roman, $font--avenir-roman - Avenir Roman
The quick brown fox jumps over the lazy dog
.font--avenir-medium, $font--avenir-medium - Avenir Medium
The quick brown fox jumps over the lazy dog
.font--avenir-heavy, $font--avenir-heavy - Avenir Heavy
The quick brown fox jumps over the lazy dog
.font--avenir-black, $font--avenir-black - Avenir Black
The quick brown fox jumps over the lazy dog
Headers
All versions here can be combined with font classes above to override default weight as needed. We do not explicity set uppercase styles in CSS to allow for editorial flexibility.
.header--extra-large, %header--extra-large, @include header--extra-large - Extra Large Header A
Lorem Ipsum.
.header--extra-large-alt, %header--extra-large-alt, @include header--extra-large-alt - Extra Large Header B
Lorem Ipsum.
.header--large, %header--large, @include header--large - Large Header
LOREM Ipsum.
.header--medium, %header--medium, @include header--medium - Medium Header
LOREM IPSUM. Lorem Ipsum.
.header--small, %header--small, @include header--small - Small Header
Lorem ipsum dolor sit amet, consectetuer dipiscing elit, sed diam nonummy nibh euismod.
Text
.t1, %t1 - Large Body Copy
Lorem ipsum dolor sit amet, consectetuer dipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet. dolore magna aliquam erat volutpat.
.t2, %t2 - Small Body Copy
Lorem ipsum dolor sit amet, consectetuer dipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet. dolore magna aliquam erat volutpat.
Components
Colors
$color-white
#ffffff
$color-lighter-gray, $color-bg - Background Gray
#f6f6f6
$color-light-gray, $color-border - Divider Gray, White CTA Hover
#ebebeb
$color-gray - Text Gray
#959595
$color-light-black - Black CTA Hover
#303030
$color-black, $color-text
#000000
$color-red, $color-error - Error Message Red
#d74027
$color-transparent--dark - Dark Overlay
rgba(0, 0, 0, 0.5)
$color-transparent--light - Light Overlay
rgba(255, 255, 255, 0.7)
Default Styles
Headings with paragraphs
Heading 1
Standard body copy inside a paragraph. This is a link. This is bold and italic.
Lorem ipsum dolor sit amet, adipiscing elit. Nullam dignissim convallis est. Quisque aliquam. Donec faucibus. Nunc iaculis suscipit dui. Nam sit amet sem. Aliquam libero nisi, imperdiet at, tincidunt nec, gravida vehicula, nisl.
Heading 2
Lorem ipsum dolor sit amet, adipiscing elit. Nullam dignissim convallis est. Quisque aliquam. Donec faucibus. Nunc iaculis suscipit dui. Nam sit amet sem. Aliquam libero nisi, imperdiet at, tincidunt nec, gravida vehicula, nisl.
Heading 3
Lorem ipsum dolor sit amet, adipiscing elit. Nullam dignissim convallis est. Quisque aliquam. Donec faucibus. Nunc iaculis suscipit dui. Nam sit amet sem. Aliquam libero nisi, imperdiet at, tincidunt nec, gravida vehicula, nisl.
Heading 4
Lorem ipsum dolor sit amet, adipiscing elit. Nullam dignissim convallis est. Quisque aliquam. Donec faucibus. Nunc iaculis suscipit dui. Nam sit amet sem. Aliquam libero nisi, imperdiet at, tincidunt nec, gravida vehicula, nisl.
Heading 5
Lorem ipsum dolor sit amet, adipiscing elit. Nullam dignissim convallis est. Quisque aliquam. Donec faucibus. Nunc iaculis suscipit dui. Nam sit amet sem. Aliquam libero nisi, imperdiet at, tincidunt nec, gravida vehicula, nisl.
Heading 6
Lorem ipsum dolor sit amet, adipiscing elit. Nullam dignissim convallis est. Quisque aliquam. Donec faucibus. Nunc iaculis suscipit dui. Nam sit amet sem. Aliquam libero nisi, imperdiet at, tincidunt nec, gravida vehicula, nisl.
Default Form Elements
The Fieldset:
Custom UI Elements
selectBox
selectBox selectBox--alternate