Style Guide
Here, you'll find a comprehensive list of all the style classes and HTML tags used throughout our website. By familiarizing yourself with the style classes and HTML tags listed here, you'll be better equipped to make changes to the site's design and layout.
This website was designed and developed by Dan O'Shea.
Logo
Adding your logo
To add your own logo to the entire website, simply select a logo component below, click on the gear icon that appears above it and select 'replace image'. You'll then be prompted to select your logo from the assets panel. The size of the logo is controlled by the 'Logo Container' and Small, Medium and Large' combo classes, so you'll only need to replace your logo once for it to take effect across all sizes.
Typography
Fonts
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi fringilla ante ac neque venenatis volutpat. Praesent ut libero neque. Ut vel tellus pulvinar tortor pretium sollicitudin. Sed mollis in tellus sed pellentesque. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae.
WorkSans
Ovo
HTML Tags
You’ll see that these typography elements don’t have a class. That’s because on these elements, we want to edit the styles after selecting a Heading Tag like 'All H1 Headings' for example, so that it will effect all the elements on every page.
Duis auctor vehicula tellus sit amet semper.
Duis auctor vehicula tellus sit amet semper maecenas id ipsum tempus.
Duis auctor vehicula tellus sit amet semper maecenas id ipsum tempus, malesuada augue ac, efficitur ligula.
Duis auctor vehicula tellus sit amet semper maecenas id ipsum tempus, malesuada augue ac, efficitur ligula.
Duis auctor vehicula tellus sit amet semper maecenas id ipsum tempus, malesuada augue ac, efficitur ligula. Duis auctor vehicula tellus sit amet semper maecenas id ipsum tempus, malesuada augue ac.
Duis auctor vehicula tellus sit amet semper maecenas id ipsum tempus, malesuada augue ac, efficitur ligula. Duis auctor vehicula tellus sit amet semper maecenas id ipsum tempus, malesuada augue ac.
Duis auctor vehicula tellus sit amet semper maecenas id ipsum tempus, malesuada augue ac, efficitur ligula. Duis auctor vehicula tellus sit amet semper maecenas id ipsum tempus, malesuada augue ac.
"This is a block quote"
Heading Classes
There may be some instances where you need to skip certain heading levels on your page to get the correct heading styles for your design, but this is bad for SEO. Instead, make sure your heading levels are structured properly and use the classes below to style your headings.
Duis auctor vehicula tellus sit amet semper.
Duis auctor vehicula tellus sit amet semper maecenas id ipsum tempus.
Duis auctor vehicula tellus sit amet semper maecenas id ipsum tempus, malesuada augue ac, efficitur ligula.
Duis auctor vehicula tellus sit amet semper maecenas id ipsum tempus, malesuada augue ac, efficitur ligula.
Duis auctor vehicula tellus sit amet semper maecenas id ipsum tempus, malesuada augue ac, efficitur ligula. Duis auctor vehicula tellus sit amet semper maecenas id ipsum tempus, malesuada augue ac.
Duis auctor vehicula tellus sit amet semper maecenas id ipsum tempus, malesuada augue ac, efficitur ligula. Duis auctor vehicula tellus sit amet semper maecenas id ipsum tempus, malesuada augue ac.
Text Classes
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi fringilla ante ac neque venenatis volutpat. Praesent ut libero neque. Ut vel tellus pulvinar tortor pretium sollicitudin. Sed mollis in tellus sed pellentesque. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae.
Text Weights
Text Alignment
Rich Text
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi fringilla ante ac neque venenatis volutpat. Praesent ut libero neque. Ut vel tellus pulvinar tortor pretium sollicitudin. Sed mollis in tellus sed pellentesque. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae.
When nested inside of:
Heading H1
Heading H2
Heading H3
Heading H4
Heading H5
Heading H6
When nested inside of:
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi fringilla ante ac neque venenatis volutpat. Praesent ut libero neque. Ut vel tellus pulvinar tortor pretium sollicitudin. Sed mollis in tellus sed pellentesque. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae.
When nested inside of:
"This is a Block Quote inside of a rich text element"
When nested inside of:
When nested inside of:
- List item one
- List item two
- List item three
- Ordered list item one
- Ordered list item two
- Ordered list item three
When nested inside of:
Color
Common Colors
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi fringilla ante ac neque venenatis volutpat. Praesent ut libero neque. Ut vel tellus pulvinar tortor pretium sollicitudin. Sed mollis in tellus sed pellentesque. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae.
Text Colors
Buttons
Buttons
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi fringilla ante ac neque venenatis volutpat. Praesent ut libero neque. Ut vel tellus pulvinar tortor pretium sollicitudin. Sed mollis in tellus sed pellentesque. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae.
Form Elements
Forms
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi fringilla ante ac neque venenatis volutpat. Praesent ut libero neque. Ut vel tellus pulvinar tortor pretium sollicitudin. Sed mollis in tellus sed pellentesque. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae.
Iconography
Social Icons
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi fringilla ante ac neque venenatis volutpat. Praesent ut libero neque. Ut vel tellus pulvinar tortor pretium sollicitudin. Sed mollis in tellus sed pellentesque. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae.