Colours
| Colour | Colour name | Hex code | SCSS variable | Notes |
|---|---|---|---|---|
| System-black | #1A1A1A | $ontario-colour-black | Default colour for most text (such as body, headings, subheadings) | |
| System-white | #FFFFFF | $ontario-colour-white | Text on primary buttons, dark backgrounds | |
| Alert | #CD0000 | $ontario-colour-alert | Alert-level icons, left-hand vertical bar of alert box or error box | |
| Alert light | #FCEFF0 | $ontario-colour-alert-light | Background of alert box | |
| Success | #118847 | $ontario-colour-success | Success-level icons, left-hand vertical bar of success box | |
| Success light | #E5f0E9 | $ontario-colour-success-light | Background of success box | |
| Warning | #FFD440 | $ontario-colour-warning | Warning-level icons, left-hand vertical bar of warning box | |
| Warning light | #FEF6DC | $ontario-colour-warning-light | Background of warning box | |
| Information | #1080A6 | $ontario-colour-information | Information-level icons, left-hand vertical bar of information box | |
| Information light | #E2F0F4 | $ontario-colour-information-light | Background of information box | |
| Link | #0066cc | $ontario-colour-link | Buttons and unvisited links | |
| Link - hover | #00478F | $ontario-colour-link--hover | Button and link hover state | |
| Link - active | #002142 | $ontario-colour-link--active | Button and link active state | |
| Link - visited | #551A8B | $ontario-colour-link--visited | Link visited state (but not buttons – they remain blue) | |
| Secondary - hover | #E0F0FF | $ontario-colour-secondary--hover | Secondary button hover state | |
| Secondary - active | #C2E0FF | $ontario-colour-secondary--active | Secondary button active state | |
| Tertiary - hover | #E8E8E8 | $ontario-colour-tertiary--hover | Tertiary button hover state | |
| Tertiary - active | #D1D1D1 | $ontario-colour-tertiary--active | Tertiary button active state | |
| Focus ring | #009ADB | $ontario-colour-focus | Focus state outline for inputs, links and buttons | |
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
- Element list 1
- Element list 2
- 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 somethingBlockquote 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:
Page-alerts success
Your payment was successful and your order is now complete.
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
Dropdown-lists default
Dropdown-lists with-default-option-selected
Hint-text
Hint text placeholder
Labels default
Labels labels-as-page-headings
Labels large-label
Radio-buttons
Text-areas
Text-inputs
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-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