Ontario Design System Web Components
Web components are a set of web platform APIs that enable the creation of custom, reusable, encapsulated HTML tags to use in web pages and web apps. They allow for all logic, styles and component-specific layout to be handled in one place.
In-page navigation
In-page navigation - default
About the program
Use in-page navigation to give people quick access to key sections in long content.
Eligibility
Make sure each navigation label matches the destination heading text as closely as possible.
Available funding
Use the component before the content it references so people can orient themselves early.
Program guide
Keep link text short and descriptive so people can scan the list quickly.
Contact us
Use meaningful destinations so the list behaves like a clear table of contents.
In-page navigation - no top border
Overview
This version removes the top border so it can sit within a smaller content section.
The law (cancellations)
Use valid in-page anchors so the navigation can move people to the intended section.
What to include in your contract
Longer item labels should still remain readable and wrap naturally within the list.
Before you buy
Keep related sections grouped so the navigation reflects the structure of the page.
Accordion
Badges
Blockquotes
Buttons
Primary button
Secondary button
Tertiary button
Callouts and Asides
Callouts
With Heading
Sign up for email reminders and we’ll notify you 60 and 30 days before your licence expires.
Without Heading
Sign up for email reminders and we’ll notify you 60 and 30 days before your licence expires.