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 link

Standard 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

Thank you for registering with Main Website Store.

Multiple messages example below.

Thank you for registering with Main Website Store.

Invalid password or email address provided.

This is warning message.

This is info message.

This is notice message.

Iconography

@icon-menu
@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.

Date Picker

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

Title 1

Title 2

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.