Overview
This demo page showcases the typography styles available within the main content area of the Odyssey design system. It includes examples of headings, paragraphs, lists, and other common text elements to illustrate how they are rendered in this layout.
Headings
The design system includes six levels of headings, each with distinct font sizes and weights to establish a clear hierarchy. Headings are styled to be visually prominent and consistent across pages, helping users quickly scan and understand content structure.
An H2 Heading
Aliquam erat volutpat. Nam venenatis consectetur dui, nec facilisis ex pretium nec. Suspendisse vitae velit vel lacus sollicitudin finibus eu et libero. Vestibulum efficitur sagittis nisl, id convallis metus lobortis at.
An H3 Heading
Aliquam erat volutpat. Nam venenatis consectetur dui, nec facilisis ex pretium nec. Suspendisse vitae velit vel lacus sollicitudin finibus eu et libero. Vestibulum efficitur sagittis nisl, id convallis metus lobortis at.
An H4 Heading
Aliquam erat volutpat. Nam venenatis consectetur dui, nec facilisis ex pretium nec. Suspendisse vitae velit vel lacus sollicitudin finibus eu et libero. Vestibulum efficitur sagittis nisl, id convallis metus lobortis at.
An H5 Heading
Aliquam erat volutpat. Nam venenatis consectetur dui, nec facilisis ex pretium nec. Suspendisse vitae velit vel lacus sollicitudin finibus eu et libero. Vestibulum efficitur sagittis nisl, id convallis metus lobortis at.
An H6 Heading
Aliquam erat volutpat. Nam venenatis consectetur dui, nec facilisis ex pretium nec. Suspendisse vitae velit vel lacus sollicitudin finibus eu et libero. Vestibulum efficitur sagittis nisl, id convallis metus lobortis at.
Lists
The main content area supports both ordered and unordered lists, with appropriate spacing and hierarchy to maintain readability. Nested lists are also styled to ensure clear differentiation between levels.
Unordered List
- First item in a list
- Second item in a list
- Third item in a list
- First nested item
- Second nested item
- Fourth item in a list
Ordered List
- First item in a list
- Second item in a list
- Third item in a list
- First nested item
- Second nested item
- Fourth item in a list
Paragraphs
Paragraphs are styled for optimal readability, with appropriate line height and spacing. The typography is designed to be clear and legible, ensuring that users can easily consume content across devices.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis pharetra congue magna. Donec suscipit nisl turpis, quis pharetra justo laoreet id. Sed sollicitudin ut augue ut tempus. Morbi quis dolor lacus. Interdum et malesuada fames ac ante ipsum primis in faucibus. Mauris tempus dictum nibh, eu elementum risus tristique imperdiet. Morbi quis nulla non ipsum vestibulum fringilla. Vivamus ac nisl sollicitudin, commodo nisl eget, pulvinar massa. Proin et libero libero. Pellentesque bibendum libero sapien, vel porta magna pretium ac. Ut at elit tempus, ullamcorper quam vel, molestie est. Integer vehicula rhoncus lectus. In enim elit, auctor vel dui at, cursus lobortis metus. Etiam iaculis condimentum lorem non varius. Maecenas efficitur nibh tortor, vehicula suscipit orci tempor et.
Links
Links within the main content area are styled with an underline on hover to indicate interactivity. This helps users identify clickable elements and encourages engagement with linked content.
For example, you can visit the WRDSB website for more information about our programs and services.
Other Elements
The typography styles also extend to other common text elements such as blockquotes and tables, ensuring a consistent visual language throughout the content.
This is an example of a blockquote. It is styled to stand out from regular paragraphs, providing emphasis for quoted text or important information.
| Header 1 | Header 2 | Header 3 |
|---|---|---|
| Row 1, Cell 1 | Row 1, Cell 2 | Row 1, Cell 3 |
| Row 2, Cell 1 | Row 2, Cell 2 | Row 2, Cell 3 |