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

> Ces dernières années, l’Ontario s’est bâti une bonne réputation grâce à ses efforts visionnaires dans le domaine de l’éducation de la petite enfance. Les changements ont été profonds et mis en œuvre de manière réfléchie. Les perspectives qui orientent les travaux sont clairement définies et témoignent d’un grand respect aux enfants, aux familles et aux éducatrices et éducateurs. Nous disposons maintenant de solides assises pour construire un système plus cohérent.

> Partenaires universitaires Pédagogie de l'Ontario pour la petite enfance

## Blockquote short

> L’accès à des services de garde d’enfants de grande qualité a une incidence sur l’ensemble de la société.

> Répondant au sondage

## Callouts asides asides

## Fait en bref

En 2013, le Canada sera responsable de 1,6 % des émissions mondiales, l'Ontario étant responsable de moins de 0,4 % des émissions mondiales.

## Callouts asides default

## Recevez une notification

Inscrivez-vous aux rappels par courriel et nous vous enverrons un avis de renouvellement 60 jours et 30 jours avant l’expiration de votre permis.

## Critical alerts

COVID-19 L'état d'urgence est prolongé jusqu'au 12 mai 2020.

## Page alerts default

## Plaques d’immatriculation

Les centres ServiceOntario peuvent émettre une plaque d’immatriculation bleue ou une plaque « À découvrir » en relief, selon la disponibilité. Apprenez-en davantage sur le remplacement d’une plaque d’immatriculation.

## Page alerts error

## Un problème est survenu

Des erreurs ont été trouvées dans cette page :

- Le numéro de votre plaque d’immatriculation doit être un numéro valide
- La lecture de l’odomètre doit présenter un chiffre valide
- Le champ réservé au nom ne doit pas être vide

## Page alerts success

## Votre paiement a été reçu

Votre commande est maintenant terminée. Nous vous demandons de surveiller la réception de votre courriel de confirmation comprenant votre reçu et votre numéro de commande. L’autocollant de votre plaque d’immatriculation devrait vous parvenir dans un délai de 2 à 4 semaines.

## Page alerts warning

## Délai pour la prestation des services

Nous avons des délais d’attente plus longs que la normale dans ce centre ServiceOntario. Vous pouvez consulter notre outil de recherche de services. Vous pourrez ainsi savoir si le service recherché est offert en ligne ou dans un autre centre se trouvant à proximité.

## Buttons default

## Buttons secondary button

## Buttons tertiary button

## Checkboxes

Légende de case à cocher(obligatoire/facultative)
Option 1
Option 2
Option 3

## Dropdown lists default

Étiquette(obligatoire/facultative)

## Dropdown lists with default option selected

Province/territoire(obligatoire)

## Hint text

Valeur par défaut
  Étiquette(obligatoire/facultative)

  Texte d’indication.

Élargisseur d’indication
  Entrez vos numéro de permis de conduire(obligatoire/facultative) Des renseignements supplémentaires sur les numéros de permis de conduire suivront au prochain élément.

  Un numéro de permis de conduire doit compter 15 caractères. Le premier caractère est une lettre et les 14 suivants des chiffres. Les deux derniers caractères forment un nombre entre 01 et 31.

Élargisseur d’indication pour un groupe d’éléments
  Avez-vous un problème juridique?(obligatoire/facultative) Des renseignements supplémentaires sur les problèmes juridiques suivront au prochain élément.
  Oui
  Non

  Les problèmes juridiques peuvent inclurent :

  - Les questions pénales
  - Les problèmes judiciaires familiaux comme le divorce, la garde des enfants ou les allocations familiales
  - Les questions relatives à l'immigration ou aux réfugiés
  - Les poursuites civiles, incluant celles exercées à la Cour des petites créances
  - Les causes devant un tribunal ou un ordre, incluant les questions relatives aux locateurs ou aux locataires
  - Les révisions de l'aide sociale
Élargisseur d’indication pour un élément individuel
  Avez-vous des enfants?(obligatoire/facultative)

  Sélectionnez toutes les réponses qui s’appliquent.

  Oui
  Je suis en processus d’adoption ou souhaite adopter un enfant
  J’ai la garde légale d’un enfant
  J’ai la garde temporaire d’un enfant Des renseignements supplémentaires sur la garde temporaire suivront au prochain élément.

  Avoir la garde temporaire d'un enfant signifie que vous en prenez soin temporairement et que vous n'êtes pas son parent biologique ou adoptif.

  Non

## Labels default

Étiquette(obligatoire/facultative)

## Labels labels as page headings

# Étiquette titre(obligatoire/facultative)

## Labels large label

Étiquette(obligatoire/facultative)

## Radio buttons

Légende de case d’option(obligatoire/facultative)
Option 1
Option 2
Option 3

## Text areas

Étiquette(obligatoire/facultative)

## Text inputs

Valeur par défaut
  Étiquette(obligatoire/facultative)
Contournements de largeur de saisie
  Largeur de 20 caractères(obligatoire/facultative)
  Largeur de 10 caractères(obligatoire/facultative)
  Largeur de 7 caractères(obligatoire/facultative)
  Largeur de 5 caractères(obligatoire/facultative)
  Largeur de 4 caractères(obligatoire/facultative)
  Largeur de 3 caractères(obligatoire/facultative)
  Largeur de 2 caractères(obligatoire/facultative)

## Tables

  ## 3 colonnes (non numérique)

  Certificat de mariage
  Certificat de mariage | Traitement et livraison | Coût
  --- | --- | ---
  Service normal (en ligne) | Livraison dans les 15 (quinze) jours ouvrables par Postes Canada | 15 $
  Service prioritaire (en ligne) | Livraison dans les 5 (cinq) jours ouvrables par messagerie | 45 $
  Service d’urgence (présentation de la demande en personne) | 5 jours ouvrables, y compris livraison par messagerie (une preuve d’urgence est requise) | 45 $

  ## 5 colonnes (numérique)

  Nombre de séances de participation par secteur d’activité de 2016 à 2019
  Secteur d’activité | Avril 2016 à mars 2017 | Avril 2017 à mars 2018 | Avril 2018 à mars 2019 | Avril 2019 à mars 2020
  --- | --- | --- | --- | ---
  Agrégats et pétrole | 35 | 32 | 45 | 71
  Poisson et faune | 162 | 240 | 178 | 162
  Foresterie | 182 | 170 | 235 | 242
  Terres et eaux | 79 | 101 | 42 | 70
  Général | 56 | 37 | 64 | 46
  Total | 514 | 580 | 564 | 591

  ## 7 colonnes (numérique et condensée)

  Charges de fonctionnement
  Crédits et programmes | Prévisions 2020–2021 $ | Variations par rapport aux prévisions de 2019–2020 $ | Variations par rapport aux prévisions de 2019–2020 % | Prévisions 2019–2020 | Chiffres réels provisoires 2019–2020 | Chiffres réels 2018–2019 $
  --- | --- | --- | --- | --- | --- | ---
  Administration du ministère | 16 147 000 | 1 388 600 | 9,4 | 14 758 400 | 17 470 200 | 20 683 313
  Éducation postsecondaire | 6 455 038 100 | (131 741 500) | (2,0) | 6 586 779 600 | 6 491 779 600 | 7 398 858 795
  Programme de recherche | 187 399 200 | (1 290 400) | (0,7) | 188 689 600 | 188 689 600 | 174 629 399
  Total à voter – Charges de fonctionnement | 6 658 584 300 | (131 643 300) | (1,9) | 6 790 227 600 | 6 697 939 400 | 7 594 171 507
  Crédits législatifs | 55 106 014 | 0 | 0 | 55 106 014 | 55 106 014 | 36 264 081
  Total du ministère – Charges de fonctionnement | 6 713 690 314 | (131 643 300) | (1,9) | 6 845 333 614 | 6 753 045 414 | 7 630 435 588
  Redressement de consolidation et autres redressements – Collèges | 3 504 321 700 | 210 997 500 | 6,4 | 3 293 324 200 | 3 269 671 700 | 2 961 027 351
  Redressement des charges de fonctionnement – Reclassement des charges d’intérêt liées à l’aide financière aux étudiants | (48 979 900) | 0 | 0 | (48 979 900) | (48 979 900) | (33 055 246)
  Redressement de consolidation et autres redressements – Hôpitaux | (9 886 600) | 5 107 400 | N/A | (14 994 000) | (15 005 000) | (15 193 844)
  Redressement de consolidation et autres redressements – Portefeuille immobilier général | (5 904 600) | (5 686 900) | N/A | (217 700) | N/A | (189 337)
  Total, y compris redressement de consolidation et autres redressements | 10 153 240 914 | 78 774 700 | 0,80 | 10 074 466 214 | 9 958 732 214 | 10 543 024 512

## Task list

Default

  - ## Coordonnées

    Pas encore commencé

  - ## À propos de votre organisation.

    Pas encore commencé

  - ## Budget

    Pas encore commencé
Bouton tertiaire

  - ## Coordonnées

    En cliquant sur ce lien, vous accéderez à la tâche

    Pas encore commencé

  - ## À propos de votre organisation.

    Ces informations nous aident à déterminer votre admissibilité.

    Pas encore commencé

  - ## Budget

    Détaillez le financement dont vous avez besoin pour le projet

    Pas encore commencé
Bouton tertiaire

  - ## Coordonnées

    Terminé

  - ## Informations sur le projet.

    En cours

  - ## Impact et résultats.

    Pas encore commencé

  - ## Plan de travail

    Ne peut pas encore commencer

  - ## À propos de votre organisation

    Facultatif

## Simple footer

## Expanded footer

Deux colonnes pied de page développé
Trois colonnes pied de page développé version un
Trois colonnes pied de page développé version deux

## Application header

English

Nom de l'application

## Ontario header

EN English

## Service ontario header

English

ServiceOntario

Renouvellement de la Carte-Photo de l'Ontario

## Step indicator

Indicateur de la 1ère étape (sans bouton Retour)
  Étape 1 sur 5

Indicateur des étapes après 1 (avec bouton Retour)
  Étape 2 sur 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

Quelle est votre adresse de livraison? Ligne d’adresse 1(obligatoire)

Numéro et nom de rue ou case postale.

Ligne d’adresse 2(facultatif)

Appartement, bureau, unité, immeuble, etc.

Ville/village(obligatoire) Province(obligatoire)
Code postal(obligatoire)

## Accordions

## Pièces d’identité acceptées

###

- passeport (canadien ou autre)
- carte de citoyenneté canadienne avec photo
- certificat sécurisé de statut d’Indien (délivré à partir du 15 décembre 2009 par Affaires autochtones et Développement du Nord Canada
- carte-photo de l’Ontario

###

- Carte de résident permanent (CRP)
- Fiche d’établissement (IMM 1000)
- Confirmation de résidence permanente (IMM 5292) accompagné d’un passeport valide du pays d’origine
- Carte-photo de l’Ontario

###

- Permis d’études/Autorisation d’étude (IMM 1442)
- Permis de travail/Autorisation d’emploi (IMM 1442)
- Fiche du visiteur (IMM 1442)
- Permis de séjour temporaire (IMM 1442)
- Demande de statut de réfugié (IMM 1434)
- Déclaration d’intention de demander le statut de réfugié(e) (IMM 7703) avec photo
- Rapport en vertu de la Loi sur l’immigration (IMM 1442) avec photo
- Carte-photo de l’Ontario

## Cards

Valeur par défaut

  - ## Titre de la carte

    Rédigez un message qui contient un appel à l’action fort et une description concise sur un seul sujet.

Carte de base (en-tête avec couleur d’accompagnement)

  - ## Titre de la carte

    Rédigez un message qui contient un appel à l’action fort et une description concise sur un seul sujet.

Carte de base (en-tête avec couleur d’accompagnement foncée)

  - ## Titre de la carte

    Rédigez un message qui contient un appel à l’action fort et une description concise sur un seul sujet.

Carte avec image (en-tête standard avec format d’image 4:3)

  - ## Titre de la carte

    Rédigez un message qui contient un appel à l’action fort et une description concise sur un seul sujet.

Carte avec image (en-tête avec couleur d’accompagnement et format d’image 16:9)

  - ## Titre de la carte

    Rédigez un message qui contient un appel à l’action fort et une description concise sur un seul sujet.

Carte avec image (en-tête avec couleur d’accompagnement foncée et format d’image 2:1)

  - ## Titre de la carte

    Rédigez un message qui contient un appel à l’action fort et une description concise sur un seul sujet.

Carte avec titre (en-tête standard avec format d’image 4:3)

  - ## Titre de la carte

Carte avec titre (en-tête avec couleur d’accompagnement et format d’image 16:9)

  - ## Titre de la carte

Carte avec titre (en-tête avec couleur d’accompagnement foncée et format d’image 2:1)

  - ## Titre de la carte

Carte horizontale (grande, image à gauche)

  - ## Titre de la carte

    Rédigez un message qui contient un appel à l’action fort et une description concise sur un seul sujet.

Carte horizontale (grande, image à droite)

  - ## Titre de la carte

    Rédigez un message qui contient un appel à l’action fort et une description concise sur un seul sujet.

Carte horizontale (petite, image à gauche)

  - ## Titre de la carte

    Rédigez un message qui contient un appel à l’action fort et une description concise sur un seul sujet.

Carte horizontale (sans image)

  - ## Titre de la carte

    Rédigez un message qui contient un appel à l’action fort et une description concise sur un seul sujet.

## Loading indicator

Chargement

## Badges

Défaut
  Défaut Défaut pâle Neutre Neutre pâle
Rétroaction du système
  Alerte Avertissement Réussite

## Search box

Valeur par défaut
  Rechercher dans le répertoire
Exemple avec texte d’indication
  Rechercher dans le répertoire

  Rechercher le nom d’un employé ou d’une organisation

## Back button

## In page navigation

Navigation au sein de la page - valeur par défaut
Navigation au sein de la page - sans barre horizontale noire

## Summary list

Valeur par défaut

  ### Renseignements personnels

  Nom de famille
    Smith
    Modifier votre réponse pour : Nom de famille
  Prénom
    George
    Modifier votre réponse pour : Prénom
  Deuxième prénom
    Sans objet
    Modifier votre réponse pour : Deuxième prénom
  Sexe
    Masculin
    Modifier votre réponse pour : Sexe
  Lieu de naissance
    Ottawa
    Modifier votre réponse pour : Lieu de naissance
Lien d’action au titre de la section

  ### Coordonnées

  Modifier votre réponse pour : Coordonnées
  Adresse courriel
    gsmith@gmail.com
  Numéro de téléphone
    123 456-7890