Web Style Guide

Typography

Headings

h1 Heading Level 1

h2 Heading Level 2

h3 Heading Level 3

h4 Heading Level 4

p = Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.

a - This is a link

Standard Copy

A paragraph (from the Greek paragraphos, "to write beside" or "written beside") is a self-contained unit of a discourse in writing dealing with a particular point or idea. A paragraph consists of one or more sentences. Though not required by the syntax of any language, paragraphs are usually an expected part of formal writing, used to organize longer prose.

A paragraph (from the Greek paragraphos, "to write beside" or "written beside") is a self-contained unit of a discourse in writing dealing with a particular point or idea. A paragraph consists of one or more sentences. Though not required by the syntax of any language, paragraphs are usually an expected part of formal writing, used to organize longer prose.

A paragraph (from the Greek paragraphos, "to write beside" or "written beside") is a self-contained unit of a discourse in writing dealing with a particular point or idea. A paragraph consists of one or more sentences. Though not required by the syntax of any language, paragraphs are usually an expected part of formal writing, used to organize longer prose.

Forms

Basic Example

Individual form controls automatically receive some global styling. All text based input, textarea, and select elements are set to width: 100%; by default. Labels and Placeholders are visible by default. Add the .sr-only helper class to labels that you don't want to display.

Disabled States

Adding the disabled attribute will prevent users from interacting with the input. By default disabled inputs are lighter.

Styled Checkboxes & Radio Buttons

Buttons

Standard Buttons

Use the .button-l class to have large button. Use the .button-alt class to have alternate styles for button. Use both classes in case you need large and alternate styled button

Disabled States

Add the disabled attribute to buttons to prevent a user from interacting with the element. By default disabled buttons appear lighter.

Pagination

Basic Example

Simple paginate.

Tabs

Product Info Tabs

Aliquam cursus magna eleifend odio blandit, id pretium felis tincidunt. Aliquam nec luctus eros. Aliquam nisi purus, cursus eu est fringilla, rhoncus ultricies enim. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Integer dictum ex ut diam luctus ornare. Duis sed lacus sit amet mauris vestibulum blandit vel quis tortor. Phasellus gravida iaculis ex vel pharetra. Quisque sagittis eros massa, eget dignissim massa suscipit scelerisque. Quisque pretium augue id turpis varius, viverra hendrerit turpis dapibus. Donec pulvinar, ante a commodo vehicula, ligula augue condimentum odio, luctus blandit ante ex ut elit. Vestibulum finibus ligula quis ex varius suscipit. Nunc urna eros, maximus vitae pharetra non, blandit eu tortor.