📄️ ontario-accordion
Use accordions to provide a show/hide option for sections of content on complex pages.
📄️ ontario-aside
Use asides to highlight in-page content.
📄️ ontario-back-to-top
Use a Back to Top button to help users quickly navigate to the top of a long page.
📄️ ontario-blockquote
Use a blockquote to draw attention to a speaker quote or excerpt.
📄️ ontario-button
Use buttons to help the user carry out an important action such as starting a transaction or agreeing to a purchase.
📄️ ontario-callout
Use callouts to highlight in-page content.
📄️ ontario-card
Use a card to provide an entry point to information on a different page.
📄️ ontario-card-collection
Use a card-collection to encapsulate the card components.
📄️ ontario-checkboxes
Use checkboxes when you want the user to select one or more options from a list.
📄️ ontario-critical-alert
Use a critical alert banner to bring a user’s attention to a significant situation, such as a site-wide service disruption or other critical information that will impact most users.
📄️ ontario-date-input
Use this component for user-friendly date input and display.
📄️ ontario-dropdown-list
Only use a dropdown (select) list if you cannot use other form components to capture the user’s information.
📄️ ontario-fieldset
Use the fieldset element to group related form elements.
📄️ ontario-footer
Use the simple footer for most applications and subsites. It includes links to accessibility, privacy and copyright information.
📄️ ontario-header
Use the ontario type header for all pages that are part of the main ontario.ca website. This header is mandatory.
📄️ ontario-hint-expander
Use a hint expander when:
📄️ ontario-hint-text
Use hint text to help users understand how to complete fields in a form. When adding hint text, the first choice should always be to display hint text without using a hint expander.
📄️ ontario-icon
Use simple, easy-to-understand icons from Material Design to help guide users.
📄️ ontario-input
Use a text input when you want the user to enter no more than a single line of information.
📄️ ontario-language-toggle
This component is used internally to toggle the component languages, set translations and update the HTML lang attribute in the DOM.
📄️ ontario-loading-indicator
Use a loading indicator to let users know when an application or page element needs more time to process an action.
📄️ ontario-page-alert
Use page alerts to notify users of important information or changes on a page. There are four types of page alerts (i.e informational, warning, success and error).
📄️ ontario-radio-buttons
Use radio buttons when you want the user to select only one option from a list.
📄️ ontario-step-indicator
Use a step indicator to show a user’s progress as they move through a multi-step form.
📄️ ontario-table
Use a table to present data and make it easy to compare or contrast values.
📄️ ontario-textarea
Use a text area when you want the user to enter more than a single line of information.