Stylesheet

A collection of the site's styles

Colours

Custom Colours

Dark Blue
Medium Blue 1
Meduim Blue 2
Light blue
Yellow
Green
Dark Green
Light Grey
Orange

Bootstrap Colours

Primary
Success
Info
Warning
Danger

Type

H1 – Heading

H2 – Heading

H3 – Heading

H4 – Heading

H5 – Heading
H6 – Heading
Lead body copy. Fusce ultricies semper commodo. Proin feugiat sagittis velit, vel suscipit mauris scelerisque sed. Cras vitae orci viverra, venenatis sapien et, hendrerit purus.

Standard Paragraph body copy. Pellentesque auctor, neque a mattis pretium, nulla est interdum purus, eu luctus purus augue dapibus mauris. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla finibus cursus lectus, at fermentum ex pellentesque at. Integer at consectetur est, nec ultricies felis.

Additional Paragraph styles: Strong or bold text. Emphasised text. Linked text, vitae pulvinar tellus fermentum in. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. In hac habitasse platea dictumst. Etiam quis aliquet felis, ac tristique felis. Curabitur elementum tincidunt mauris nec dapibus. Nullam imperdiet neque mauris, vitae pulvinar purus rutrum non. Cras eu rhoncus nulla.

Block quoted text. Vestibulum euismod tellus id dolor sodales commodo. Sed quam purus, ornare rutrum libero nec, pellentesque egestas nunc. Integer mattis auctor nisl, vitae pulvinar tellus fermentum in.

Left aligned text

Nulla facilisi. Maecenas finibus neque sit amet nulla lobortis aliquam. Vestibulum rhoncus ornare elit non lobortis. Sed elementum, ante sed hendrerit porta, purus urna consequat urna, non molestie purus nunc quis mauris. Donec rutrum suscipit lacus, id faucibus nisl rhoncus id.

Center aligned text

Nulla facilisi. Maecenas finibus neque sit amet nulla lobortis aliquam. Vestibulum rhoncus ornare elit non lobortis. Sed elementum, ante sed hendrerit porta, purus urna consequat urna, non molestie purus nunc quis mauris. Donec rutrum suscipit lacus, id faucibus nisl rhoncus id.

Right aligned text

Nulla facilisi. Maecenas finibus neque sit amet nulla lobortis aliquam. Vestibulum rhoncus ornare elit non lobortis. Sed elementum, ante sed hendrerit porta, purus urna consequat urna, non molestie purus nunc quis mauris. Donec rutrum suscipit lacus, id faucibus nisl rhoncus id.

Lists

Unordered

  • Vestibulum euismod tellus
  • Fusce et ligula ut odio
  • Lorem ipsum dolor sit amet
    • Cras vitae orci viverra
    • Sed quam purus
  • Phasellus quis ex vitae

Ordered

  1. Vestibulum euismod tellus
  2. Fusce et ligula ut odio
  3. Lorem ipsum dolor sit amet
    1. Cras vitae orci viverra
    2. Sed quam purus
  4. Phasellus quis ex vitae

Form Elements

Buttons

Normal State Hover State Active State Disabled State

 

Normal State Hover State Active State Disabled State

Text Input Field



Field help text


Field help text

File Upload Field



Date Input Field



Text Area Field



Dropdown Field



Checkboxes

Radio Buttons

Other components

Horizontal Line

Well

Wells are used to highlight an area of content. Fusce ultricies semper commodo. Proin feugiat sagittis velit, vel suscipit mauris scelerisque sed. Cras vitae orci viverra, venenatis sapien et, hendrerit purus. Pellentesque auctor, neque a mattis pretium,

Alert notifications

Success notification
Info notification
Warning notification
Error notification

Staff Listing

Service Listing

Sections

Basic Content Section

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ornare urna sed vehicula rhoncus. Suspendisse a ornare sapien. Etiam auctor feugiat est in consectetur. Nunc eleifend nulla ac velit sollicitudin, nec hendrerit erat luctus. Duis non justo et velit ultrices blandit. Etiam tempus ac augue ac condimentum. Sed convallis mi nec facilisis auctor. Mauris dignissim magna at dignissim aliquet. Mauris ut consectetur sapien, et semper nunc. Nunc ullamcorper metus mattis leo pretium commodo. Maecenas gravida nibh ac mauris gravida, ac ultricies dui euismod. Integer volutpat tellus id ornare commodo. Sed quis lectus commodo, mollis enim id, gravida nibh.

Quote – Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ornare urna sed vehicula rhoncus. Suspendisse a ornare sapien.

Background Colour Section

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ornare urna sed vehicula rhoncus. Suspendisse a ornare sapien. Etiam auctor feugiat est in consectetur. Nunc eleifend nulla ac velit sollicitudin, nec hendrerit erat luctus. Duis non justo et velit ultrices blandit. Etiam tempus ac augue ac condimentum. Sed convallis mi nec facilisis auctor. Mauris dignissim magna at dignissim aliquet. Mauris ut consectetur sapien, et semper nunc. Nunc ullamcorper metus mattis leo pretium commodo. Maecenas gravida nibh ac mauris gravida, ac ultricies dui euismod. Integer volutpat tellus id ornare commodo. Sed quis lectus commodo, mollis enim id, gravida nibh.

Basic section with Slideshow

Content Before Slideshow

Content After Slideshow

 

Side Image Section

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ornare urna sed vehicula rhoncus. Suspendisse a ornare sapien. Etiam auctor feugiat est in consectetur. Nunc eleifend nulla ac velit sollicitudin, nec hendrerit erat luctus. Duis non justo et velit ultrices blandit. Etiam tempus ac augue ac condimentum. Sed convallis mi nec facilisis auctor. Mauris dignissim magna at dignissim aliquet. Mauris ut consectetur sapien, et semper nunc. Nunc ullamcorper metus mattis leo pretium commodo. Maecenas gravida nibh ac mauris gravida, ac ultricies dui euismod. Integer volutpat tellus id ornare commodo. Sed quis lectus commodo, mollis enim id, gravida nibh.

Test

Background Image Section

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ornare urna sed vehicula rhoncus. Suspendisse a ornare sapien. Etiam auctor feugiat est in consectetur. Nunc eleifend nulla ac velit sollicitudin, nec hendrerit erat luctus. Duis non justo et velit ultrices blandit. Etiam tempus ac augue ac condimentum. Sed convallis mi nec facilisis auctor. Mauris dignissim magna at dignissim aliquet. Mauris ut consectetur sapien, et semper nunc. Nunc ullamcorper metus mattis leo pretium commodo. Maecenas gravida nibh ac mauris gravida, ac ultricies dui euismod. Integer volutpat tellus id ornare commodo. Sed quis lectus commodo, mollis enim id, gravida nibh.

Hi there!