Component Backlog


1	Item	Component or pattern	Category	Description	Raw notes	Guidance	Design	Coded	Figma toolkit	Web component

2	Colours	Style			Done	Done	Done	Done	Done	N/A
3	Grid	Style			Done	Done	N/A	Done	Done	N/A
4	Spacing	Style			Done	Done	N/A	Done	Done	N/A
5	Typography	Style			Done	Done	Done	Done	Done	N/A
6	Icons	Style			Done	Done	Done	Done	Done	N/A
7	Images and photography	Style			Done	Done	Done	Done	N/A	N/A
8	Links	Style			Done	Done	Done	Done	Done	N/A
9	Buttons	Component			Done	Done	Done	Done	Done	Done
10	Text inputs	Component			Done	Done	Done	Done	Done	Done
11	Text areas	Component			Done	Done	Done	Done	Done	Done
12	Checkboxes	Component			Done	Done	Done	Done	Done	Done
13	Radio buttons	Component			Done	Done	Done	Done	Done	Done
14	Select (dropdowns)	Component			Done	Done	Done	Done	Done	Done
15	Headers	Component			Done	Done	Done	Done	Done	Done
16	Application header	Component		AKA extended header	Done	Done	Done	Done	Done	Done
17	Footers	Component			Done	Done	Done	Done	Done	Done
18	Focus state	Component			N/A	N/A	Done	Done	Done	N/A
19	Hint text	Component	Forms		Done	Done	Done	Done	Done	Done
20	CC payment	Pattern	Forms	Requested as part of top 10	Done	N/A	Done	Done		N/A
21	Alerts/Callouts	Component	Content		Done	Done	Done	Done	Done	Done
22	Accordion	Component	Content		Done	Done	Done	Done	Done	Done
23	Hint expander	Component	Forms	How to handle long hint text on forms	Done	Done	Done	Done	Done	Done
24	Form step indicator	Pattern	Forms	Labelling as pattern very contenxt-dependent	Done	Done	Done	Done	Done	Done
25	Error messaging 1	Component	Forms	Visual design for inline and summary errors	Done	Done	Done	Done	N/A	Done
26	Loading indicator	Component			Done	Done	Done	Done	Done
27	Back to top	Component	Navigation		Done	Done	Done	Done	Done	Done
28	Tables	Component		Includes summary lists	Done	Done	Done	Done	Done	Done
29	In-page navigation (AKA table of contents)	Component	Navigation	Content jump links for long pages (e.g. "On this page")	Done	Done	Done	Done	In progress	In progress
30	Cards	Component	Landing pages		Done	Done	Done	Done	Done	Done
31	Date input	Pattern	Forms	Simple date input (no calendar picker)	Done	Done	Done	Done	Done	Done
32	Error messaging 2	Component	Forms	Interactive behaviour for error messaging	Done	Done	Done	Done	N/A	Done
33	Favicon	Component			Done	Done	Done	Done	N/A	N/A
34	ServiceOntario header	Component	Navigation	Application header with ServiceOntario colour and label	Done	Done	Done	Done	Done	Done
35	Badges	Component	Content	Non-interactive status indicators; includes alpha/beta label design	Done	Done	Done	Done	Done	In progress
36
37	Summary list/Review pages	Component	Forms	Allows the user to go back to an earlier part of the transaction to make changes	Done	Done	Done	Done	In progress	Not started
38	Search box	Component	Search		Done	Done	Done	Done	In progress	In progress
39	Search autocomplete	Component	Search	AKA typeahead, autosuggest	Done	Done	Done	Done	Not started	Not started
40	Button ordering	Pattern		How to position buttons on a page or within a modal or other element; how to position buttons relative to one another (stacked, side-by-side)	In progress	In progress	In progress	Not started		*Button collection component?
41	Task lists	Component	Forms	For complex forms, showing the flow of a multi-step process	In progress	In progress	In progress	Not started
42	Combo box	Component	Forms	Dropdown with autocomplete	In progress	In progress	In progress	In progress
43	Tags	Component	Search	Interactive version of badges; used for search filtering	In progress	In progress	In progress	Not started
44	Filtering	Component	Search	Filtering for search results	In progress	In progress	In progress	Not started
45	Sort	Component	Search	Sorting for search results	In progress	In progress	In progress	Not started
46	Calendar picker	Component	Forms		In progress	In progress	In progress	Not started	Not started	Not started
47	Subnavigation	Component	Navigation	Navigation menus with hierarchy	Not started	Not started	Not started	Not started
48	404 page	Pattern	Navigation	Standard design and example content	Not started	Not started	Done	Not started
49	Application header login and search	Component	Navigation	Versions of the application header that can include account/login, search, cart, etc.	Not started	Not started	In progress	Not started
50	"One thing per page" pattern	Pattern	Forms	Form design pattern	In progress	In progress	In progress	In progress
51	"Give feedback" pattern	Pattern	Navigation	How to present the option for users to give feedback on a service	Not started	Not started	Not started	Not started
52	Single checkbox confirmation	Component	Forms	For choosing informant consent, accepting terms and conditions, notice of collection, etc	In progress	In progress	In progress	In progress	In progress	In progress
53	Single checkbox toggle	Component	Forms	For toggle options, Example when presented with several name fields and you want to choose a single name
54	Structured content	Pattern	Content	Alternative to tables - responsive layout for structured content using divs and headings
55	Input masking	Pattern	Forms	For form fields	In progress
56	Breadcrumbs	Component	Navigation		In progress
57	Help/Definitions	Component	Content	How to provide a definition of a term or more information
58	Modal window	Component			In progress
59	Hero banner	Component	Landing pages	Design for landing pages/subsites' homepages			In progress (for ontario.ca)
60	"Content grouping"	Component	Landing pages	Alternatives to cards for presenting content on landing pages
61	Disabled states for inputs (checkboxes, radio buttons, text boxes)	Component	Forms
62	Dismissable alerts	Component		When and how alerts should be dismissable (toasts?)	Not started
63	Name input	Pattern	Forms	How to ask users for their name							Equitable name test: https://docs.google.com/document/d/1c1S9FqZ-cSvf33gXd_QN9JTFlHMo3yb8zDMMnoyLszw/edit
64	Address input	Pattern	Forms
65	Confirmation page	Pattern	Forms	For forms
66	Search results	Pattern/template	Search	Standard design for search results pages
67	Dashboard design	Pattern		Recommended layouts for "dashboard" overview pages
68	Email receipt	Pattern	Forms	Top 10
69	Pagination	Component	Search
70	"Tabs" pattern	Component		Potential for use in dashboard style applications	In progress
71	Dark mode	Pattern
72	Maps	Pattern
73	CSS print guidance	Pattern		Give instructions on appropriate CSS for printing pages
74	Rating scale	Component		Allow users to rate satisfacation with stars, happy faces, etc.
75	Privacy statement	Component		Treatment for standard collection statement on forms, etc.
76	Abbreviations	Pattern		Markup and visual treatment for abbreviations
77	Input prefix or suffix	Pattern	Forms	For specific form input scenarios - see US design system example
78	Reference numbers	Pattern
79	Smaller loading indicator	Component		For within input boxes
80	Language selection	Pattern	Navigation	Splash pages, language toggles - when and how to use						Web component for this introduced; guidance not available yet.
81	File uploader	Component	Forms	Design for uploading single or multiple files; reviewing/deleting files
82	Cookie consent banner	Component			In progress	In progress	In progress	Not started
83
84
85	Chat interface design	Pattern		Design for live chat or chatbot interactions
86	Archive banner/label			Covered in Ontario.ca Web Editing Guide.


1	Name	Purpose	Notes
2	Copy	Copy text, document, or file	Needed for COVID test results code


1	Order	Item	Component or pattern	Priority	Description	Raw notes	Guidance	Design	Coded in Fractal	Coded in Ontario.ca
2	1	Banner/hero area	Component	High
3	2	Ontario.ca footer	Component	High
4	3	Ontario.ca header	Component	High
5	4	Ontario.ca menu	Component
6	5	Labels/Tags	Component
7	6	Accordion	Component	Medium
8	7	Ontario.ca cards	Component	Medium
9	8	Design Toolkit	Both
10	9	Illustration guidance	Component		Overall look & feel. Size, stroke and line style
11	10	Card design	Component
12	11	Pagination	Component
13	12	Book template	Pattern
14	13	Marketing page templates	Pattern
15	14	Ontario.ca print styles	Pattern	Low
16	15	404 Error messaging	Pattern
17	16	Back to top link	Component
18	17	Page templates (standard)	Pattern
19	18	Search and filter	Component
20	19	Filters	Component
21	20	Smarties	Infographic	Low
22	21	Fact blocks	Infographic	Low