Web Style Guide
Typography
Headings
All heading styles from h1 through h4.
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 linkStandard Copy
All standard paragraphy info and styling including strong, bold, italic and emphasis.
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.
Color
- @primary__color - #1f2a51
- @secondary__color: #253367
- @color-azure: #27a9e1
- @color-blue-dark-sky: #36c0fb
- @color-green-dark: #7fc241
- @color-green: #8cd34a
- @color-yellow: #fdac4b
- @color-red: #e0004d
- @color-purple: #9666a0
- @color-purple-light: #b57dc1
- @color-grey1: #737373
Messages
Multiple messages example below.
Iconography
- @icon-instagram
- @icon-linkedin
- @icon-twitter
- @icon-pinterest
- @icon-facebook
- @icon-arrow-dropdown
- @icon-birthday
- @icon-cart-offers
- @icon-save-money
- @icon-writing
- @icon-star
- @icon-arrow-circle
- @icon-advice
- @icon-cart
- @icon-favourite
- @icon-search
- @icon-services
- @icon-google-plus
- @@icon-location
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
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.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut interdum neque eget mauris vulputate scelerisque. Sed hendrerit mi nec neque pulvinar vestibulum. Nunc laoreet eu turpis sed rhoncus. Curabitur non sagittis mauris. Vivamus nunc felis, facilisis ac vulputate sed, pulvinar ut ipsum. Sed ipsum sapien, lobortis ut dignissim molestie, tincidunt vel sapien. Maecenas nec luctus leo. Nunc ac pulvinar nibh. Aenean tempor ac sem sit amet egestas. Pellentesque orci leo, ultrices vel ligula at, congue accumsan ante. Ut gravida suscipit sapien, sed feugiat risus condimentum a. Cras a elit dui. Mauris vitae orci quis urna finibus tempor lacinia id diam. Praesent lobortis odio sed maximus volutpat. Phasellus diam orci, sodales in leo malesuada, auctor egestas diam.