Release 2.7.0

# Ontario Design System Examples

To preview this page you may use the Serve command`serve` from within the distribution package.

- Colours
- Typography
- Links
- Back to top
- Blockquote default
- Blockquote short
- Callouts asides asides
- Callouts asides default
- Critical alerts
- Page alerts default
- Page alerts error
- Page alerts success
- Page alerts warning
- Buttons default
- Buttons secondary button
- Buttons tertiary button
- Checkboxes
- Dropdown lists default
- Dropdown lists with default option selected
- Hint text
- Labels default
- Labels labels as page headings
- Labels large label
- Radio buttons
- Text areas
- Text inputs
- Tables
- Task list
- Simple footer
- Expanded footer
- Application header
- Ontario header
- Service ontario header
- Step indicator
- Icons Primary
- Icons Secondary
- Fieldsets
- Accordions
- Cards
- Loading indicator
- Badges
- Search box
- Back button
- In page navigation
- Summary list

## Colours

## Typography

## Header samples

# Some text, H1 header

## Some text, H2 header

### Some text, H3 header

#### Some text, H4 header

##### Some text, H5 header

###### Some text, H6 header

## Ul, ol, li, p tags samples

- Element list 1
- Element list 2
- Element list 3

1. Element list 1
2. Element list 2
3. Element list 3

## Paragraph

Lorem ipsum dolor, sit amet consectetur adipisicing elit. Quis exercitationem beatae consequatur saepe possimus impedit ipsa libero adipisci, accusantium obcaecati placeat distinctio numquam enim voluptatem eum? Iste dicta perspiciatis voluptatem, architecto inventore tempore autem corporis praesentium delectus soluta sunt similique deleniti sed omnis nihil voluptatum optio enim quas sapiente aliquam nobis ullam facilis at aspernatur! Aut consequuntur similique non porro soluta placeat veniam expedita harum accusantium ratione dolore corporis ex quia deleniti vel magnam illum maxime, est officiis tempora! Ullam asperiores aut quos quia ipsum nisi neque quae repudiandae saepe reiciendis. Ullam, sit dolores a officiis corrupti natus reprehenderit ipsum dolorum id minus veniam deleniti officia doloremque amet delectus earum exercitationem nobis eaque maxime rerum labore est minima distinctio? Autem repellat in ad facilis fugiat quo voluptates vel. Alias suscipit beatae rem minus nulla voluptates possimus aut porro quis tempora fugiat in pariatur dolorem sequi nobis odio temporibus, explicabo harum!

## Links

## Back to top

## Blockquote default

> 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.

> Academic partners Ontario’s Pedagogy for the Early Years

## Blockquote short

> Access to high-quality child care is an issue that impacts our entire society.

> Survey respondent

## Callouts asides asides

## Quick fact:

As of 2013, Canada is responsible for 1.6% of global emissions, with Ontario responsible for less than 0.4% of global emissions.

## Callouts asides default

## Get notified

Sign up for email reminders and we’ll notify you 60 and 30 days before your licence expires.

## Critical alerts

COVID-19 State of emergency extended until May 12, 2020.

## Page alerts default

## Licence plates

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.

## Page alerts error

## There is a problem

Errors were found on this page:

- Your licence plate number must be a valid plate number
- The odometer reading must be a valid number
- The name field must not be empty

## Page alerts success

## Your order is complete

Your payment was successful. Please look out for an email confirmation with your receipt and order number. Your licence plate sticker should arrive in 2–4 weeks.

## Page alerts warning

## Service wait times

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.

## Buttons default

## Buttons secondary button

## Buttons tertiary button

## Checkboxes

Checkbox legend(required/optional)
Option 1
Option 2
Option 3

## Dropdown lists default

Label(required/optional)

## Dropdown lists with default option selected

Province/territory(required)

## Hint text

Default
  Label(required/optional)

  Hint text placeholder.

Hint expander
  Enter your driver's licence number(required/optional) More information on driver's licence numbers is available in the next element.

  A driver’s licence number is 15 characters in length; the first character is a letter and the next 14 are numbers. The last two characters must be a number from 01 to 31.

Hint expander for a group of selection items
  Do you have a legal issue?(required/optional) More information on legal issues is available in the next element.
  Yes
  No

  Legal issues may include:

  - Criminal matters
  - Family law issues like divorce, child custody or support
  - Immigration and refugee matters
  - Civil claims, including ones made in small claims court
  - Issues before a tribunal or board, including landlord/tenant issues
  - Social assistance review
Hint expander for an individual selection item
  Do you have children?(required/optional)

  Select all that apply.

  Yes
  I am adopting or looking to adopt a child
  I have legal custody of a child
  I have a child in my temporary care More information on temporary care is available in the next element.

  Temporary care means you are temporarily taking care of a child and you are not the child's birth or adoptive parent.

  No

## Labels default

Label(required/optional)

## Labels labels as page headings

# Heading label(required/optional)

## Labels large label

Label(required/optional)

## Radio buttons

Radio legend(required/optional)
Option 1
Option 2
Option 3

## Text areas

Label(required/optional)

## Text inputs

Default
  Label(required/optional)
Input width overrides
  20 character width(required/optional)
  10 character width(required/optional)
  7 character width(required/optional)
  5 character width(required/optional)
  4 character width(required/optional)
  3 character width(required/optional)
  2 character width(required/optional)

## Tables

  ## 3 columns (non-numeric)

  Marriage certificate: cost and delivery
  Type of service | Processing and delivery | Cost
  --- | --- | ---
  Regular service (online) | 15 business days plus delivery by Canada Post | $15
  Premium service (online) | 5 business days including delivery by courier | $45
  Emergency service (in-person) | 5 business days including delivery by courier (proof of urgency is required) | $45

  ## 5 columns (numeric)

  Number of engagement sessions by business area from 2016–2020
  Business area | April 2016 – March 2017 | April 2017 – March 2018 | April 2018 – March 2019 | April 2019 – March 2020
  --- | --- | --- | --- | ---
  Aggregates and petroleum | 35 | 32 | 45 | 71
  Fish and wildlife | 162 | 240 | 178 | 162
  Forestry | 182 | 170 | 235 | 242
  Lands and water | 79 | 101 | 42 | 70
  General | 56 | 37 | 64 | 46
  Total row | 514 | 580 | 564 | 591

  ## 7 columns (numeric and condensed)

  Operating expense
  Votes/Programs | Estimates 2020-21 $ | Change from estimates 2019-20 $ | Change from estimates 2019-20 % | Estimates 2019-20 $ | Interim actuals 2019-20 $ | Actuals 2018-19 $
  --- | --- | --- | --- | --- | --- | ---
  Ministry administration | 16,147,000 | 1,388,600 | 9.4 | 14,758,400 | 17,470,200 | 20,683,313
  Postsecondary education | 6,455,038,100 | (131,741,500) | (2.0) | 6,586,779,600 | 6,491,779,600 | 7,398,858,795
  Research program | 187,399,200 | (1,290,400) | (0.7) | 188,689,600 | 188,689,600 | 174,629,399
  Total operating expense to be voted | 6,658,584,300 | (131,643,300) | (1.9) | 6,790,227,600 | 6,697,939,400 | 7,594,171,507
  Statutory appropriations | 55,106,014 | 0 | 0 | 55,106,014 | 55,106,014 | 36,264,081
  Ministry total operating expense | 6,713,690,314 | (131,643,300) | (1.9) | 6,845,333,614 | 6,753,045,414 | 7,630,435,588
  Consolidation & other Adjustments - Colleges | 3,504,321,700 | 210,997,500 | 6.4 | 3,293,324,200 | 3,269,671,700 | 2,961,027,351
  Operating expense adjustment - Student assistance interest expense reclassification | (48,979,900) | 0 | 0 | (48,979,900) | (48,979,900) | (33,055,246)
  Consolidation & other adjustments - Hospitals | (9,886,600) | 5,107,400 | N/A | (14,994,000) | (15,005,000) | (15,193,844)
  Consolidation & other adjustments - General real estate portfolio | (5,904,600) | (5,686,900) | N/A | (217,700) | N/A | (189,337)
  Total including consolidation & other adjustments | 10,153,240,914 | 78,774,700 | 0.80 | 10,074,466,214 | 9,958,732,214 | 10,543,024,512

## Task list

Default

  - ## Contact information

    Not yet started

  - ## About your organization

    Not yet started

  - ## Budget

    Not yet started
Task List Item with Hint

  - ## Contact information

    How to contact you to discuss your application

    Not yet started

  - ## About your organization

    This information helps us determine your eligibility

    Not yet started

  - ## Budget

    Detail the funding you require for the project

    Not yet started
Task List Item with variations of task statuses

  - ## Contact information

    Completed

  - ## Project information

    In progress

  - ## Impact and outcomes

    Not yet started

  - ## Work plan

    Cannot yet start

  - ## About your organization

    Optional

## Simple footer

## Expanded footer

Two column expanded footer
Three column expanded footer version one
Three column expanded footer version two

## Application header

Français

Application name

## Ontario header

FR Français

## Service ontario header

Français

ServiceOntario

Ontario Photo Card Renewal

## Step indicator

Indicator for step 1 (no back button)
  Step 1 of 5

Indicator for steps after 1 (with back button)
  Step 2 of 5

## Icons primary

- ontario-icon-accessibility
- ontario-icon-add-alt
- ontario-icon-add
- ontario-icon-alert-error
- ontario-icon-alert-information
- ontario-icon-alert-success
- ontario-icon-alert-warning
- ontario-icon-arrow-up
- ontario-icon-chevron-down
- ontario-icon-chevron-left
- ontario-icon-chevron-right
- ontario-icon-chevron-up
- ontario-icon-close
- ontario-icon-collapse
- ontario-icon-credit-card
- ontario-icon-critical-alert-warning
- ontario-icon-dropdown-arrow
- ontario-icon-email
- ontario-icon-expand
- ontario-icon-help
- ontario-icon-menu
- ontario-icon-more-accounts
- ontario-icon-new-window
- ontario-icon-phone
- ontario-icon-remove-alt
- ontario-icon-remove
- ontario-icon-search

- ontario-icon-tty

## Icons secondary

- ontario-icon-account
- ontario-icon-attach
- ontario-icon-bookmark-off
- ontario-icon-bookmark-on
- ontario-icon-calendar
- ontario-icon-camera
- ontario-icon-clock
- ontario-icon-cloud
- ontario-icon-delete
- ontario-icon-document
- ontario-icon-download
- ontario-icon-edit
- ontario-icon-export
- ontario-icon-facebook-alt
- ontario-icon-facebook
- ontario-icon-favourite-off
- ontario-icon-favourite-on
- ontario-icon-filter
- ontario-icon-flickr
- ontario-icon-grid
- ontario-icon-instagram
- ontario-icon-interac-en-alt
- ontario-icon-interac-en
- ontario-icon-interac-fr-alt
- ontario-icon-interac-fr
- ontario-icon-link-url
- ontario-icon-linkedin-alt
- ontario-icon-linkedin
- ontario-icon-list
- ontario-icon-live-chat
- ontario-icon-location-off
- ontario-icon-location-on
- ontario-icon-location-searching
- ontario-icon-lock-off
- ontario-icon-lock-on
- ontario-icon-map
- ontario-icon-mastercard-alt
- ontario-icon-mastercard
- ontario-icon-media-fast-forward
- ontario-icon-media-fast-rewind
- ontario-icon-media-pause
- ontario-icon-media-play
- ontario-icon-media-stop
- ontario-icon-microphone-off
- ontario-icon-microphone-on
- ontario-icon-more-vertical
- ontario-icon-next
- ontario-icon-notification
- ontario-icon-password-hide
- ontario-icon-password-show
- ontario-icon-photo
- ontario-icon-pin-location-off
- ontario-icon-pin-location-on
- ontario-icon-previous
- ontario-icon-print
- ontario-icon-replay
- ontario-icon-rss-feed
- ontario-icon-save
- ontario-icon-sentiment-1
- ontario-icon-sentiment-2
- ontario-icon-sentiment-3
- ontario-icon-sentiment-4
- ontario-icon-sentiment-5
- ontario-icon-settings
- ontario-icon-share
- ontario-icon-sort-alphabetical-ascending
- ontario-icon-sort-alphabetical-descending
- ontario-icon-sort-ascending
- ontario-icon-sort-descending
- ontario-icon-sort-variant
- ontario-icon-sort
- ontario-icon-tag
- ontario-icon-text-message
- ontario-icon-timer
- ontario-icon-transport-bicycle
- ontario-icon-transport-bus
- ontario-icon-transport-car
- ontario-icon-transport-walk
- ontario-icon-tune
- ontario-icon-twitter-alt
- ontario-icon-twitter-x
- ontario-icon-upload
- ontario-icon-video

- ontario-icon-visa-alt
- ontario-icon-visa
- ontario-icon-vote-dislike
- ontario-icon-vote-like
- ontario-icon-vpn-key
- ontario-icon-wheelchair
- ontario-icon-wifi
- ontario-icon-youtube

## Fieldsets

What is your delivery address? Address line 1(required)

Street and number or P.O. box.

Address line 2(optional)

Apartment, suite, unit, building, etc.

City/town(required) Province(required)
Postal code(required)

## Accordions

## Accepted identity documents

###

- passport (Canadian or foreign)
- Canadian Citizenship Card with photo
- Secure Certificate of Indian Status Card (issued on or after December 15, 2009 by Indian and Northern Affairs Canada)
- Ontario Photo Card

###

- Permanent Resident (PR) Card
- Record of Landing (IMM 1000)
- Confirmation of Permanent Residence (IMM 5292) accompanied by a valid passport from country of origin
- Ontario Photo Card

###

- Study Permit / Student Authorization (IMM 1442)
- Work Permit / Employment Authorization (IMM 1442)
- Visitor Record (IMM 1442)
- Temporary Resident Permit (IMM 1442)
- Refugee Status Claim (IMM 1434)
- Acknowledgement of Intent to Claim Refugee Status (IMM 7703) with photo
- Report Pursuant to the Immigration Act (IMM 1442) with photo
- Ontario Photo Card

## Cards

Basic card (default header)

  - ## Card title

    Write a blurb that contains a strong call-to-action and a concise description about a single topic.

Basic card (accent header)

  - ## Card title

    Write a blurb that contains a strong call-to-action and a concise description about a single topic.

Basic card (dark accent header)

  - ## Card title

    Write a blurb that contains a strong call-to-action and a concise description about a single topic.

Image card (default header with 4:3 aspect ratio)

  - ## Card title

    Write a blurb that contains a strong call-to-action and a concise description about a single topic.

Image card (accent header with 16:9 aspect ratio)

  - ## Card title

    Write a blurb that contains a strong call-to-action and a concise description about a single topic.

Image card (dark accent header with 2:1 aspect ratio)

  - ## Card title

    Write a blurb that contains a strong call-to-action and a concise description about a single topic.

Title card (default header with 4:3 aspect ratio)

  - ## Card title

Title card (accent header with 16:9 aspect ratio)

  - ## Card title

Title card (dark accent header with 2:1 aspect ratio)

  - ## Card title

Horizontal card (large with image left)

  - ## Card title

    Write a call-to-action and concise description about a single topic.

Horizontal card (large with image right)

  - ## Card title

    Write a call-to-action and concise description about a single topic.

Horizontal card (small with image left)

  - ## Card title

    Write a call-to-action and concise description about a single topic.

Horizontal card (no image)

  - ## Card title

    Write a call-to-action and concise description about a single topic.

## Loading indicator

Loading

## Badges

Default
  Default Default Light Neutral Neutral Light
System feedback
  Alert Warning Success

## Search box

Default
  Search the directory
Example with hint text
  Search the directory

  Search by employee name or organization name.

## Back button

## In page navigation

In-page navigation - default
In-page navigation - no top border

## Summary list

Default

  ### Personal information

  Last name
    Smith
    Change your answer for: Last name
  First name
    George
    Change your answer for: First name
  Middle name
    Not applicable
    Change your answer for: Middle name
  Sex
    Male
    Change your answer for: Sex
  Place of birth
    Ottawa
    Change your answer for: Place of birth
Action link in section heading

  ### Contact details

  Change your answer for: Contact details
  Email
    gsmith@gmail.com
  Phone number
    123-456-7890