Intro text is larger and allows for a slightly offset text at the top of the page. It is a paragraph with a class of intro
.
Body copy is 18px/28px in Proxima Nova Regular. Curabitur blandit tempus porttitor. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Nullam quis risus eget urna mollis ornare vel eu leo.
Curabitur this is bolded text tempus porttitor. This is a link. It is teal and bolded. Sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Nullam quis risus eget urna mollis ornare vel eu leo.
Headings
Heading 1 (xl)
Heading 1
Heading 2
Heading 3
Heading 4
Heading 5
Heading 6
Alternate Headings
Heading 1
Heading 2
Heading 3
Heading 4
Heading 5
Heading 6
Sed posuere consectetur est at lobortis. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Aenean lacinia bibendum nulla sed consectetur. Aenean eu leo quam.
Blockquotes
Blockquotes are Jubilat Italic. 24px/36px. On blog posts they extend outside the left margin. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
Tweet Quotes
Tweet quotes are created using <blockquote class=”tweet”>, which means you’ll need to switch to HTML mode.
Tweet quotes are Jubilat Italic. 24px/36px and blue. On click they open a tweet window.
Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Aenean lacinia bibendum nulla sed consectetur. Aenean eu leo quam. Aenean eu leo quam.
Pellentesque ornare sem augue laoreet lacinia quam venenatis vestibulum. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Aenean lacinia bibendum nulla sed consectetur. Aenean eu leo quam. Nullam id dolor id nibh ultricies vehicula ut id elit. Maecenas sed diam eget risus varius blandit sit amet non magna.
Buttons
Primary Button Secondary Button Tertiary Button Dark Button Subtle Button Large Button Small Button
Sed posuere consectetur est at lobortis. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Aenean lacinia bibendum nulla sed consectetur. Aenean eu leo quam.
Images
Images with .alignleft
or .alignright
will float left or right accordingly and can only be up to 40% of the width of the container. Images set to .alignnone
can fill full width ofthe container element. Duis commodo mollis, est non commodo luctus, nisi erat ligula, eget lacinia odio sem nec elit. Sed consectetur est at lobortis. Aenean eu leo. Pellentesque ornare sem lacinia quam vestibulum. Donec sed odio dui. Maecenas faucibus mollis interdum. Donec ullamcorper nulla non metus auctor fringilla. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Maecenas sed diam eget risus varius.
Maecenas faucibus mollis interdum. Donec ullamcorper nulla non metus auctor fringilla. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Maecenas sed diam eget risus varius
Images with .aligncenter
will be up to 40% of the width of the container and centered.
Images with .alignnone
will be full-width and act as more of a graphic element.