Alt Text

Style Guide

Style Guide

Grid Information

Wrapper Width -
Gutter Width -

Colours
  • @primary_color
  • @secondary_color
  • @dark_color
  • @light_color
  • @border_color
    @border_radius
  • @alert_color
  • @information_color
  • @success_color
  • @text_color
  • @highlight_color
  • @med_color
Type

Header 1

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean suscipit enim vel elementum facilisis. Sed feugiat tellus nec nisl dapibus luctus. Maecenas sed posuere nulla. Donec quis nisi a mauris hendrerit ornare non id ex.

Header 2

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean suscipit enim vel elementum facilisis. Sed feugiat tellus nec nisl dapibus luctus. Maecenas sed posuere nulla. Donec quis nisi a mauris hendrerit ornare non id ex.

Header 3

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean suscipit enim vel elementum facilisis. Sed feugiat tellus nec nisl dapibus luctus. Maecenas sed posuere nulla. Donec quis nisi a mauris hendrerit ornare non id ex.

Header 4

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean suscipit enim vel elementum facilisis. Sed feugiat tellus nec nisl dapibus luctus. Maecenas sed posuere nulla. Donec quis nisi a mauris hendrerit ornare non id ex.

Header 5

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean suscipit enim vel elementum facilisis. Sed feugiat tellus nec nisl dapibus luctus. Maecenas sed posuere nulla. Donec quis nisi a mauris hendrerit ornare non id ex.

Header 6

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean suscipit enim vel elementum facilisis. Sed feugiat tellus nec nisl dapibus luctus. Maecenas sed posuere nulla. Donec quis nisi a mauris hendrerit ornare non id ex. Proin consequat diam ut tincidunt elementum. Ut quis libero ac mi placerat placerat ac et nulla. Curabitur orci urna, dictum sit amet dui a, finibus sollicitudin risus. Aliquam convallis massa ligula, Small sit amet tristique eros gravida a. Quisque varius ut sem eget sagittis. Praesent id vehicula Italic Text elit.

Blockquote ac mi placerat placerat ac et nulla. Curabitur orci urna, dictum sit amet dui a, finibus sollicitudin risus. Aliquam convallis massa ligula, sit amet tristique eros gravida a. Quisque varius ut sem eget sagittis. Praesent id vehicula elit.

Etiam fringilla diam eu quam commodo posuere sit amet sit amet arcu. Fusce id faucibus lacus. Suspendisse hendrerit, turpis et suscipit feugiat, tellus diam fringilla diam, sed posuere ipsum ligula non erat. Morbi at purus sed turpis efficitur ultrices et eleifend nibh. Link styles in text Cras et nunc et nunc sagittis pretium et a purus. Aenean in dapibus magna, luctus molestie leo. Integer vitae facilisis tellus. Proin vel Bold Text tempor mauris, eu sodales enim. Sed et nulla id sem molestie tempor sed eu nibh. Etiam pellentesque posuere eros, facilisis finibus ex pulvinar eu.

Link style     Bold Text     Italic Text     Small

Unordered List

  • Placerat placerat
  • Placerat placerat
  • Placerat placerat
  • Placerat placerat
  • Placerat placerat
  • Placerat placerat
  • Placerat placerat
  • Placerat placerat
  • Placerat placerat
Ordered List
  1. Placerat placerat
  2. Placerat placerat
  3. Placerat placerat
  4. Placerat placerat
  5. Placerat placerat
  6. Placerat placerat
  7. Placerat placerat
  8. Placerat placerat
  9. Placerat placerat
"pageContent" Styles
Content Image

Etiam fringilla diam eu quam commodo posuere sit amet sit amet arcu. Fusce id faucibus lacus. Suspendisse hendrerit, turpis et suscipit feugiat, tellus diam fringilla diam, sed posuere ipsum ligula non erat. Morbi at purus sed turpis efficitur ultrices et eleifend

Etiam fringilla diam eu quam commodo posuere sit amet sit amet arcu. Fusce id faucibus lacus. Suspendisse hendrerit, turpis et suscipit feugiat, tellus diam fringilla diam, sed posuere ipsum ligula non erat. Morbi at purus sed turpis efficitur ultrices et eleifend

Content Image

Etiam fringilla diam eu quam commodo posuere sit amet sit amet arcu. Fusce id faucibus lacus. Suspendisse hendrerit, turpis et suscipit feugiat, tellus diam fringilla diam, sed posuere ipsum ligula non erat. Morbi at purus sed turpis efficitur ultrices et eleifend

Etiam fringilla diam eu quam commodo posuere sit amet sit amet arcu. Fusce id faucibus lacus. Suspendisse hendrerit, turpis et suscipit feugiat, tellus diam fringilla diam, sed posuere ipsum ligula non erat. Morbi at purus sed turpis efficitur ultrices et eleifend

Buttons
Some button text Secondary Button
Small Button Large Button
Notifications
This is an alert for a form
This is an information message with a link
This is a success message with a link
Group Name
This is an error message showing beside an inline button.
Group Name
This is a checkbox with an error message.
You have put text in a number field. This message pushes content down.

Tables

Standard Table
Table header Table header Table header
Table contents Table contents Table contents
Table contents Table contents Table contents
Table contents Table contents Table contents
Table contents Table contents Table contents
Table with alternating rows
Table header Table header Table header
Table contents Table contents with longer text content Table contents
Table contents Table contents with longer text content Table contents
Table contents Table contents with longer text content Table contents
Table contents Table contents with longer text content Table contents
Responsive table
Table header Table header Table header
Table contents Table contents with longer text content Table contents
Table contents Table contents with longer text content Table contents
Table contents Table contents with longer text content Table contents
Table contents Table contents with longer text content Table contents
Table contents Table contents with longer text content Table contents
Responsive table alternate
Table header
Table header 2
Table header 3
Table contents
Table contents with longer text content
Table contents
Table contents
Table contents with longer text content
Table contents
Table contents
Table contents with longer text content
Table contents
Table contents
Table contents with longer text content
Table contents
Table contents
Table contents with longer text content
Table contents
Pagination
Breadcrumbs
Home Blog
Tooltips