---

Colours

---

Typegraphy

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!

---

12col grid

---

Links

Link to something

---

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 (label name) 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 with checkboxes

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

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

Hint expander with radios

Do you have a legal issue?(required/optional)

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

---

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)

---

Footers

'

---

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