Basic Style Guide

Colours
Primary
Secondary
Tertiary
Quaternary
Typography
Brand Font
The quick brown fox jumped over the lazy dogs.
Brand Accent Font
The quick brown fox jumped over the lazy dogs.
Body Font
The quick brown fox jumped over the lazy dogs.

Basic Formatting

Pellentesque maximus eros a ligula tincidunt malesuada. Proin vitae imperdiet dolor. In mattis nibh vitae tristique euismod. Donec finibus, nisi nec ultricies consequat, felis massa congue turpis, nec ornare ante massa sed dui. Nulla ut lacus elit. Morbi a quam ac enim faucibus facilisis.

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6

Ut tristique, nulla non accumsan ultricies, tellus diam posuere risus, a viverra urna massa imperdiet justo. Aliquam pulvinar nec eros vitae vulputate.

This is a Block Quote. Duis ut dui interdum, malesuada libero ut, cursus dolor. Suspendisse egestas non nibh non pellentesque. Aliquam gravida justo ut tempus semper. Vivamus venenatis hendrerit nisl sit amet lobortis. Cras pellentesque sed dolor nec porttitor. Nam bibendum lectus erat.

Pellentesque maximus eros a ligula tincidunt malesuada. Proin vitae imperdiet dolor. In mattis nibh vitae tristique euismod. Donec finibus, nisi nec ultricies consequat, felis massa congue turpis, nec ornare ante massa sed dui.

  • Nulla ut lacus elit. Morbi a quam ac enim faucibus facilisis.
  • Ut tristique, nulla non accumsan ultricies, tellus diam posuere risus, a viverra urna massa imperdiet justo.
  • Aliquam pulvinar nec eros vitae vulputate.

Duis ut dui interdum, malesuada libero ut, cursus dolor. Suspendisse egestas non nibh non pellentesque. Aliquam gravida justo ut tempus semper. Vivamus venenatis hendrerit nisl sit amet lobortis. Cras pellentesque sed dolor nec porttitor. Nam bibendum lectus erat.

  1. Pellentesque maximus eros a ligula tincidunt malesuada.
  2. Proin vitae imperdiet dolor. In mattis nibh vitae tristique euismod.
  3. Donec finibus, nisi nec ultricies consequat, felis massa congue turpis, nec ornare ante massa sed dui.

Lead Text

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis non varius arcu. Vivamus quis metus dui.

Lead Text with Dropcap

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis non varius arcu. Vivamus quis metus dui. Vivamus venenatis hendrerit nisl sit amet lobortis. Cras pellentesque sed dolor nec porttitor. Nam bibendum lectus erat.


Colours

This text has the format or class of “primary”.

This text has the format or class of “primary-dark”.

This text has the format or class of “secondary”.

This text has the format or class of “secondary-dark”.

This text has the format or class of “tertiary”.

This text has the format or class of “tertiary-dark”.

This text has the format or class of “quaternary”.

This text has the format or class of “quaternary-dark”.


Tables

Default Table

Tabular DataTabular DataTabular Data
Tabular DataTabular DataTabular Data
Tabular DataTabular DataTabular Data

 

Shortcode Wrapped Table / No Border / Striped / Hovers

Tabular DataTabular DataTabular Data
Tabular DataTabular DataTabular Data
Tabular DataTabular DataTabular Data

 

Shortcode Wrapped & Featured Table

 


 

Dynamic Shortcodes

Dynamic shortcodes output  values entered into the ‘Appearance -> Customise’ area, within the ‘PerthWeb’ tab you will input fields to enter your logo, contact details and social media links.
If NO information has been entered into the field within the relevant ‘Customise’ area input field, then the shortcode will not output anything.

Logo

 

Business Address

 

Postal Address

 

Telephone

 

Fax

 

Email

 

Social Media

 


 

Shortcodes

Columns

Pellentesque maximus eros a ligula tincidunt malesuada. Proin vitae imperdiet dolor. In mattis nibh vitae tristique euismod. Donec finibus, nisi nec ultricies consequat, felis massa congue turpis, nec ornare ante massa sed dui. Nulla ut lacus elit. Morbi a quam ac enim faucibus facilisis. Ut tristique, nulla non accumsan ultricies, tellus diam posuere risus, a viverra urna massa imperdiet justo. Aliquam pulvinar nec eros vitae vulputate. Duis ut dui interdum, malesuada libero ut, cursus dolor. Suspendisse egestas non nibh non pellentesque. Aliquam gravida justo ut tempus semper. Vivamus venenatis hendrerit nisl sit amet lobortis. Cras pellentesque sed dolor nec porttitor. Nam bibendum lectus erat.

Pellentesque maximus eros a ligula tincidunt malesuada. Proin vitae imperdiet dolor. In mattis nibh vitae tristique euismod. Donec finibus, nisi nec ultricies consequat, felis massa congue turpis, nec ornare ante massa sed dui. Nulla ut lacus elit. Morbi a quam ac enim faucibus facilisis. Ut tristique, nulla non accumsan ultricies, tellus diam posuere risus, a viverra urna massa imperdiet justo. Aliquam pulvinar nec eros vitae vulputate. Duis ut dui interdum, malesuada libero ut, cursus dolor. Suspendisse egestas non nibh non pellentesque. Aliquam gravida justo ut tempus semper. Vivamus venenatis hendrerit nisl sit amet lobortis. Cras pellentesque sed dolor nec porttitor. Nam bibendum lectus erat.

 

Pellentesque maximus eros a ligula tincidunt malesuada. Proin vitae imperdiet dolor. In mattis nibh vitae tristique euismod. Donec finibus, nisi nec ultricies consequat, felis massa congue turpis, nec ornare ante massa sed dui. Nulla ut lacus elit. Morbi a quam ac enim faucibus facilisis. Ut tristique, nulla non accumsan ultricies, tellus diam posuere risus, a viverra urna massa imperdiet justo.

Pellentesque maximus eros a ligula tincidunt malesuada. Proin vitae imperdiet dolor. In mattis nibh vitae tristique euismod. Donec finibus, nisi nec ultricies consequat, felis massa congue turpis, nec ornare ante massa sed dui. Nulla ut lacus elit. Morbi a quam ac enim faucibus facilisis. Ut tristique, nulla non accumsan ultricies, tellus diam posuere risus, a viverra urna massa imperdiet justo.

Pellentesque maximus eros a ligula tincidunt malesuada. Proin vitae imperdiet dolor. In mattis nibh vitae tristique euismod. Donec finibus, nisi nec ultricies consequat, felis massa congue turpis, nec ornare ante massa sed dui. Nulla ut lacus elit. Morbi a quam ac enim faucibus facilisis. Ut tristique, nulla non accumsan ultricies, tellus diam posuere risus, a viverra urna massa imperdiet justo.

 

Pellentesque maximus eros a ligula tincidunt malesuada. Proin vitae imperdiet dolor. In mattis nibh vitae tristique euismod. Donec finibus, nisi nec ultricies consequat, felis massa congue turpis, nec ornare ante massa sed dui. Nulla ut lacus elit. Morbi a quam ac enim faucibus facilisis. Ut tristique, nulla non accumsan ultricies, tellus diam posuere risus, a viverra urna massa imperdiet justo.

Pellentesque maximus eros a ligula tincidunt malesuada. Proin vitae imperdiet dolor. In mattis nibh vitae tristique euismod. Donec finibus, nisi nec ultricies consequat, felis massa congue turpis, nec ornare ante massa sed dui. Nulla ut lacus elit. Morbi a quam ac enim faucibus facilisis. Ut tristique, nulla non accumsan ultricies, tellus diam posuere risus, a viverra urna massa imperdiet justo. Aliquam pulvinar nec eros vitae vulputate. Duis ut dui interdum, malesuada libero ut, cursus dolor. Suspendisse egestas non nibh non pellentesque. Aliquam gravida justo ut tempus semper. Vivamus venenatis hendrerit nisl sit amet lobortis. Cras pellentesque sed dolor nec porttitor. Nam bibendum lectus erat.

 

Quick Columns

Pellentesque maximus eros a ligula tincidunt malesuada. Proin vitae imperdiet dolor. In mattis nibh vitae tristique euismod. Donec finibus, nisi nec ultricies consequat, felis massa congue turpis, nec ornare ante massa sed dui. Nulla ut lacus elit. Morbi a quam ac enim faucibus facilisis. Ut tristique, nulla non accumsan ultricies, tellus diam posuere risus, a viverra urna massa imperdiet justo. Aliquam pulvinar nec eros vitae vulputate. Duis ut dui interdum, malesuada libero ut, cursus dolor. Suspendisse egestas non nibh non pellentesque. Aliquam gravida justo ut tempus semper. Vivamus venenatis hendrerit nisl sit amet lobortis. Cras pellentesque sed dolor nec porttitor. Nam bibendum lectus erat.

Pellentesque maximus eros a ligula tincidunt malesuada. Proin vitae imperdiet dolor. In mattis nibh vitae tristique euismod. Donec finibus, nisi nec ultricies consequat, felis massa congue turpis, nec ornare ante massa sed dui. Nulla ut lacus elit. Morbi a quam ac enim faucibus facilisis. Ut tristique, nulla non accumsan ultricies, tellus diam posuere risus, a viverra urna massa imperdiet justo.

Aliquam pulvinar nec eros vitae vulputate. Duis ut dui interdum, malesuada libero ut, cursus dolor. Suspendisse egestas non nibh non pellentesque. Aliquam gravida justo ut tempus semper. Vivamus venenatis hendrerit nisl sit amet lobortis. Cras pellentesque sed dolor nec porttitor. Nam bibendum lectus erat.

 

Buttons

 

 

Default Inline Buttons

Default ButtonPrimary ButtonSecondary ButtonTertiary ButtonQuaternary Button

 

Large Buttons

Default Large ButtonPrimary Large ButtonSecondary Large ButtonTertiary Large ButtonQuaternary Large Button

 

Stacked Buttons

Default Stacked ButtonPrimary Stacked ButtonSecondary Stacked ButtonTertiary Stacked ButtonQuaternary Stacked Button

 

Block Buttons

Default Block ButtonPrimary ButtonSecondary ButtonTertiary ButtonQuaternary Button

 

Videos

 

Icons

The website has a couple of in-built icon fonts accessible, including Font Awesome 4.7 (https://fontawesome.com/v4.7.0/cheatsheet/) and Glyphicons 3.3 (https://getbootstrap.com/docs/3.3/components/). Follow the links to each icon font pack to view a cheatsheet of their call handles.

Font Awesome Examples:

 

Styled Examples:

 

Tabs

Tab 1

Pellentesque maximus eros a ligula tincidunt malesuada. Proin vitae imperdiet dolor. In mattis nibh vitae tristique euismod. Donec finibus, nisi nec ultricies consequat, felis massa congue turpis, nec ornare ante massa sed dui. Nulla ut lacus elit. Morbi a quam ac enim faucibus facilisis.

Tab 2

Pellentesque maximus eros a ligula tincidunt malesuada. Proin vitae imperdiet dolor. In mattis nibh vitae tristique euismod. Donec finibus, nisi nec ultricies consequat, felis massa congue turpis, nec ornare ante massa sed dui. Nulla ut lacus elit. Morbi a quam ac enim faucibus facilisis.

Tab 3

Pellentesque maximus eros a ligula tincidunt malesuada. Proin vitae imperdiet dolor. In mattis nibh vitae tristique euismod. Donec finibus, nisi nec ultricies consequat, felis massa congue turpis, nec ornare ante massa sed dui. Nulla ut lacus elit. Morbi a quam ac enim faucibus facilisis.

 

Wells

This is an example of a default Small Well
This is an example of a default Medium Well
This is an example of a default Large Well
This is an example of a Primary Large Well
This is an example of a Secondary Large Well
This is an example of a Tertiary Large Well
This is an example of a Quaternary Large Well

 

Brand Wells

This is an example of a default Brand Navy Well
This is an example of a default Brand Cyan Well
This is an example of a default Brand Pale Cyan Well
This is an example of a default Brand Blue Well
This is an example of a default Brand Grey Well
This is an example of a default Brand Stormy Grey Well
This is an example of a default Brand Grey Tint Well
This is an example of a default Brand Yellow Well
This is an example of a default Brand Orange Well
This is an example of a default Brand Dark Orange Well

 

Collapse

Collapse 

Pellentesque maximus eros a ligula tincidunt malesuada. Proin vitae imperdiet dolor. In mattis nibh vitae tristique euismod. Donec finibus, nisi nec ultricies consequat, felis massa congue turpis, nec ornare ante massa sed dui. Nulla ut lacus elit. Morbi a quam ac enim faucibus facilisis.

Collapse 1

Pellentesque maximus eros a ligula tincidunt malesuada. Proin vitae imperdiet dolor. In mattis nibh vitae tristique euismod. Donec finibus, nisi nec ultricies consequat, felis massa congue turpis, nec ornare ante massa sed dui. Nulla ut lacus elit. Morbi a quam ac enim faucibus facilisis.

Collapse 2

Pellentesque maximus eros a ligula tincidunt malesuada. Proin vitae imperdiet dolor. In mattis nibh vitae tristique euismod. Donec finibus, nisi nec ultricies consequat, felis massa congue turpis, nec ornare ante massa sed dui. Nulla ut lacus elit. Morbi a quam ac enim faucibus facilisis.

Collapse 3

Pellentesque maximus eros a ligula tincidunt malesuada. Proin vitae imperdiet dolor. In mattis nibh vitae tristique euismod. Donec finibus, nisi nec ultricies consequat, felis massa congue turpis, nec ornare ante massa sed dui. Nulla ut lacus elit. Morbi a quam ac enim faucibus facilisis.

Collapse 4

Pellentesque maximus eros a ligula tincidunt malesuada. Proin vitae imperdiet dolor. In mattis nibh vitae tristique euismod. Donec finibus, nisi nec ultricies consequat, felis massa congue turpis, nec ornare ante massa sed dui. Nulla ut lacus elit. Morbi a quam ac enim faucibus facilisis.

 

Modal

This is an example of a Modal

 

Panels

Panel Title
This is an example of a Default Panel
Panel Title
This is an example of a Primary Panel
Panel Title
This is an example of a Secondary Panel
Panel Title
This is an example of a Tertiary Panel
Panel Title
This is an example of a Quaternary Panel

 

Panel Title
This is an example of a Success Panel
Panel Title
This is an example of a Info Panel
Panel Title
This is an example of a Warning Panel
Panel Title
This is an example of a Danger Panel

 

Popovers

This is an example of a Right Popover

 

This is an example of a Left Popover

 

This is an example of a Top Popover

 

This is an example of a Bottom Popover

 

Tooltips

This is an example of a Left Tooltip.a

 

This is an example of a Right Tooltip.

 

This is an example of a Top Tooltip.

 

This is an example of a Bottom Tooltip.

 

Alert

This is an example of a Success Alert box.
This is an example of an Info Alert box.
This is an example of a Warning Alert box.
This is an example of a Danger Alert box.

 

Badges

This is an example of Default Left BadgeThis is an example of Default Right Badge

 

This is an example of Primary Left BadgeThis is an example of Primary Right Badge

 

This is an example of Secondary Left BadgeThis is an example of Secondary Right Badge

 

This is an example of Tertiary Left BadgeThis is an example of Tertiary Right Badge

 

This is an example of Quaternary Left BadgeThis is an example of Quaternary Right Badge
Get awesome actionable insights delivered monthly to your inbox.

It’s so easy to join our Cutting Edge Connections community of readers. Just fill in the details below to receive our regular free updates.

When you have provided your details, click on “Subscribe” and you will receive an email message from us asking you to confirm your subscription.

Name(Required)
Connections Newsletter

Monthly updates for you!

Get awesome actionable insights delivered monthly to your inbox.

It’s so easy to join our Cutting Edge Connections community of readers. Just fill in the details below to receive our regular free updates.

"*" indicates required fields

Name*