Design Guide (Heading 2)
Lists (Also Tables of Contents)
- This is a numbered list.
- Callout & Hero Image
- Content Accordion
- Quiz & Checklist
- Contact Profiles
Paragraph text looks like this. Regular links look like this.
External links will automatically open in new tabs to ensure that the user's experience of the website remains continuous.
There is even a quote class! Useful for excerpts, etc.
- Abraham Lincoln
Notice: Warning Text & Special Info Box
The .warning class is useful for small bits of very urgent text for students to be aware of.
This textbox, class .text-content-alt, is a round-cornered info-box/caption that can be inserted into the .text-content box for another level of information hierarchy.
A Note on Accessibility in Web Design
The current design elements and colour palette were designed for maximum visibility, even in users who are visually impaired. In addition, all links and images have alt-text attached so that users using screen-readers can understand what is on the webpage.
For future websites based on this design, please ensure that links and images have alt-text.
Buttons have been designed to be highly distinguishable, easily readable, and colour-coded for ease of access and understanding. These colours are also labelled in _design_elements.sass.
The .important class button differs slightly in design to make it stand out even more compared to the other buttons.
The .interact class button is yellow with a flag to signify an important checkpoint.
The .download class button is always shown with a .button-cap caption that lists the file type and size. It opens in a new tab. All files for download are located in /files/
If the .readmore button leads to an external website, the icon becomes the external-link icon.