OC Web Style Guide
The new web system allows you to build your pages using a library of blocks. The web style guide section helps you understand which blocks are best suited for the type of content you are looking to deliver and how they work together.
What is a block?
The best way to think of the blocks is as Lego pieces, so when you create your page you're selecting pre-designed blocks to fill in your content. What pieces work best for you will depend on a variety of factors: the type of content you have, the type of audience you want to reach, and so on.
The goal of the web style guide is to help you understand each block so that when deciding which block to use you have enough knowledge to make the most appropriate decision.
The guide is also meant to assist you to learn how to use the blocks properly. The guidelines are based on principles of brand consistency, best web practices, accessibility and system limitations.
Accordion block
Accordions are to be used on a solid white background in a one column grid.
Example accordion
Accordion header
Accordion body. Nulla facilisi. Vivamus gravida gravida lectus, nec vestibulum enim mollis sed. Fusce auctor eleifend urna, ut facilisis justo. Vestibulum gravida commodo ipsum, non convallis est feugiat at. Mauris posuere dolor nec arcu tincidunt lobortis. Cras sit amet ligula a enim feugiat pellentesque. In sed scelerisque dui.
Nulla facilis
Etiam tincidunt sem et leo porttitor euismod. Sed risus ante, condimentum id felis sit amet, iaculis gravida lectus. Phasellus eget tempor lectus. Vivamus ac ipsum in nisi efficitur egestas sed eget nisl.
Buttons
Buttons can be used in up to a four column grid on any of the web coloured backgrounds. Use an outline button on a coloured background.
Buttons on a white background can be either a solid colour or outlined. The default button on a white background is a solid OC Red button.
Cards
Cards can be used in a 2, 3 or 4 column layout on a solid white background.
Optional title, subtitle, body and link text.
You can still make the card a link if you don't add the link text.
CTA's
CTA's can be used in a few different ways. They can be used in a 1, 2, 3 or 4 column grid and can be used on a faded background image, web coloured background or a white background.