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.

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

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.

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.

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.