Ontario Design System web components now available!!!

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.

On this page

  1. Accordion
  2. Badges
  3. Blockquotes
  4. Buttons
  5. Callouts and Asides
  6. Card Collection and Card
  7. Checkboxes
  8. Dropdown lists
  9. Fieldsets
  10. Header
  11. Icons
  12. Loading indicator
  13. Page alerts
  14. Radio buttons
  15. Tables
  16. Tasks
  17. Textareas
  18. Text inputs
  19. Date input
  20. Step indicator
  21. Search Box
  22. Form example

Accordion

Badges

Default Default light Neutral Neutral light

Blockquotes

In the past few years, Ontario has gained a high level of respect for its visionary work in early education. The changes have been profound, and thoughtfully introduced. The views that guide the work are articulated clearly, and express great respect for children, families, and educators. We now have a solid foundation upon which to build a more coherent system.

Buttons

Primary button

Primary

Secondary button

Secondary

Tertiary button

Tertiary

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.

Asides

With Heading

Without Heading

Card Collection & Card

Basic cards (no images)

Basic cards with 4:3 images

Basic cards with 16:9 images

Basic cards with 2:1 images

Horizontal cards with left align 9:16 images (one-fourth size)

Horizontal cards with left align 9:16 images (one-third size)

Horizontal cards with right align 9:16 images (one-fourth size)

Horizontal cards with right align 9:16 images (one-third size)

Edge cases

Checkboxes

Fieldsets

Change the page header

Activate the Ontario.ca Header Activate the Application Header Activate the ServiceOntario Header

Icons

Primary Icons

Secondary Icons

Loading Indicator

Page alerts

Informational

ServiceOntario centres may issue either a blue licence plate or a white embossed ‘Yours to Discover’ licence plate depending on availability. Learn more about replacing a licence plate.

Warning

We are experiencing longer than normal wait times at this ServiceOntario centre. You can check out our Service Finder to see if the service you need is offered online or at a different centre nearby.

Success

Error

Errors were found on this page:

Radio buttons

Tables

3 columns (non-numeric)

5 columns (numeric)

7 columns (numeric and condensed)

Tasks

Textareas

Text inputs

Date Input

Step Indicator

Percentage

Steps

No back button

Form example

Submit