---

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

Link to something

---

Back to top

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

---

Callouts asides default

---

Critical alerts

---

Page alerts default

---

Page alerts error

---

Page alerts success

---

Page alerts warning

---

Buttons default

Primary - default

---

Buttons secondary button

Secondary - default

---

Buttons tertiary button

Tertiary - default

---

Checkboxes

---

Dropdown lists default

---

Dropdown lists with default option selected

---

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.

Where is my driver's licence number?

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

What are some examples of legal issues?

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.

What does temporary care mean?

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

---

Labels labels as page headings

---

Labels large label

---

Radio buttons

---

Text areas

---

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

---

Simple footer

---

Expanded footer

Two column expanded footer

Three column expanded footer version one

Three column expanded footer version two

---

Application header

---

Ontario header

---

Service ontario header

---

Step indicator

Indicator for step 1 (no back button)

Step 1 of 5

---

Indicator for steps after 1 (with back button)

Back 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-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
• 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-twitter-alt
• ontario-icon-twitter-x
• ontario-icon-upload
• ontario-icon-video
• 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

---

Accordions

Accepted identity documents

---

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

---

Badges

Default

Default Default Light Neutral Neutral Light

System feedback

Alert Warning Success

---

Search box

Default

Search the directory

Submit

Example with hint text

Search the directory

Search by employee name or organization name.

Submit

---

Back button

Back

---

In page navigation

---

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