Ontario Design System Examples
To preview this page you may use the Serve command`serve` from within the distribution package.
- 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
- 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
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
- 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!
Links
Link to somethingBack 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
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 :
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
Dropdown lists default
Dropdown lists with default option selected
Hint text
Texte d’indication.
Labels default
Labels labels as page headings
Labels large label
Radio buttons
Text areas
Text inputs
Tables
3 colonnes (non numérique)
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)
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)
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 |
Simple footer
Expanded footer
Application header
Ontario header
Service ontario header
Step indicator
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
-
Titre de la carte
Rédigez un message qui contient un appel à l’action fort et une description concise sur un seul sujet.
-
Titre de la carte
Rédigez un message qui contient un appel à l’action fort et une description concise sur un seul sujet.
-
Titre de la carte
Rédigez un message qui contient un appel à l’action fort et une description concise sur un seul sujet.
-
Titre de la carte
Rédigez un message qui contient un appel à l’action fort et une description concise sur un seul sujet.
-
Titre de la carte
Rédigez un message qui contient un appel à l’action fort et une description concise sur un seul sujet.
-
Titre de la carte
Rédigez un message qui contient un appel à l’action fort et une description concise sur un seul sujet.
-
Titre de la carte
Rédigez un message qui contient un appel à l’action fort et une description concise sur un seul sujet.
-
Titre de la carte
Rédigez un message qui contient un appel à l’action fort et une description concise sur un seul sujet.
-
Titre de la carte
Rédigez un message qui contient un appel à l’action fort et une description concise sur un seul sujet.
-
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
Search box
Back button
In page navigation
Summary list
Renseignements personnels
- Nom de famille
- Smith
- Prénom
- George
- Deuxième prénom
- Sans objet
- Sexe
- Masculin
- Lieu de naissance
- Ottawa
Coordonnées
- Adresse courriel
- gsmith@gmail.com
- Numéro de téléphone
- 123-456-7890