---

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

Haut

---

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

---

Callouts asides default

---

Critical alerts

---

Page alerts default

---

Page alerts error

---

Page alerts success

---

Page alerts warning

---

Buttons default

Primaire – par défaut

---

Buttons secondary button

Secondaire – par défaut

---

Buttons tertiary button

Tertiaire – par défaut

---

Checkboxes

---

Dropdown lists default

---

Dropdown lists with default option selected

---

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.

Où puis-je trouver mon numéro de permis de conduire?

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

Quels sont des exemples de problèmes juridiques?

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.

Qu’est-ce que la garde temporaire?

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

---

Labels labels as page headings

---

Labels large label

---

Radio buttons

---

Text areas

---

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

  Pas encore commencé

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

• À propos de votre organisation.

  Pas encore commencé

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

• Budget

  Pas encore commencé

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

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

---

Ontario header

---

Service ontario header

---

Step indicator

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

Étape 1 sur 5

---

Indicateur des étapes après 1 (avec bouton Retour)

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

Pièces d’identité acceptées

---

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

---

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

Soumission

Exemple avec texte d’indication

Rechercher dans le répertoire

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

Soumission

---

Back button

Retour

---

In page navigation

---

Summary list

Valeur par défaut

Renseignements personnels

Nom de famille

Smith

Modifier your answer for: Nom de famille

Prénom

George

Modifier your answer for: Prénom

Deuxième prénom

Sans objet

Modifier your answer for: Deuxième prénom

Sexe

Masculin

Modifier your answer for: Sexe

Lieu de naissance

Ottawa

Modifier your answer for: Lieu de naissance

Lien d’action au titre de la section

Coordonnées

Modifier your answer for: Coordonnées

Adresse courriel

gsmith@gmail.com

Numéro de téléphone

123-456-7890