Design System
[Pattern] Notifications Design a consistent pattern for delivering Notifications to users across our websites, web apps and administrative views. [Pattern] Search and Filter Component This is the category for [Pattern] Search and Filter Component [Component] Links The main purpose for links is to navigate users to relevant content. However, in some cases, they are also used as minor actions in a page, such as show less or show more content. They can appear within a copy of the page or as call-to-actions on following relevant content. [Pattern] Key/Value pair It is a design pattern to list a number of values with their corresponding keys. It’s a component required when listing properties for a complex element in a collection of similarly grouped elements. [Pattern] Mandatory Form Fields This work aims to improve accessibility and resolve inconsistencies around field validation. The way we indicate mandatory fields and the way we deal with erroneous submissions can be made more usable for users with or without assistive technology (AT). [Pattern] Empty states State zero or the empty state is the moment in the app where there is no data to display in the UI. [Pattern] Modular Table Component Patterns and components that are defined becomes a category on their own with detailed guidelines and examples on how to use them across Canonical cloud products and websites. CLI Guidelines The CLI guidelines are Canonical’s best practices around designing command line tools and console UIs. [Pattern] Code snippet Pattern for how we display code to users in the Vanilla framework.
| Topic | Replies | Views | Activity | |
|---|---|---|---|---|
|
Design system website (config)
Vanilla docs - Configuring component page On the Vanilla docs, there are now tabs on each component page to switch between content. The tabs are only visible if there is more than one page to show. The tab menu items inc… |
|
0 | 1480 | March 8, 2022 |
|
How to write and format discourse specs
To make sure the discourse post displays correctly when published to Vanilla website there are some important rules to follow. Title of the post should be just a name of the component or pattern The title of discourse p… |
|
1 | 1061 | March 8, 2022 |
| About the Design System category |
|
0 | 1479 | January 14, 2022 |
| Canonical's new design system : towards a design system ontology |
|
0 | 196 | October 22, 2025 |
| Table cell contents |
|
0 | 1295 | December 14, 2020 |
| Hidden surprises | Row of actions | Hidden gems |
|
0 | 813 | September 20, 2019 |
| Expandable panel (expandable sticky footer / slide split view) |
|
0 | 1248 | September 19, 2019 |
| Exploding table cell |
|
0 | 741 | September 20, 2019 |
| Sidebar - Vertical navigation patternd |
|
0 | 1651 | September 20, 2019 |
| Step-by-step accordion |
|
0 | 1003 | September 20, 2019 |
| Comparison table |
|
0 | 1208 | September 19, 2019 |
| [Pattern] Accordion |
|
0 | 863 | April 7, 2022 |
| Quick accessibility audit for designers |
|
0 | 706 | April 13, 2023 |
| Contextual menu |
|
0 | 1682 | July 11, 2022 |
| Matrix |
|
0 | 1562 | August 17, 2022 |
| Switch |
|
0 | 1062 | November 14, 2022 |
| Command structure |
|
4 | 2113 | October 7, 2023 |
| Icon positioning within tables |
|
4 | 1406 | February 24, 2020 |
| Punctuation |
|
4 | 1251 | September 2, 2023 |
| UX heuristics and checklist for CLI |
|
0 | 632 | April 11, 2023 |
| Slider |
|
0 | 1826 | August 26, 2022 |
| Chips |
|
0 | 1253 | November 1, 2022 |
| Badge |
|
0 | 1366 | October 19, 2022 |
| Buttons |
|
0 | 1968 | August 26, 2022 |
| Use of colours |
|
1 | 1113 | July 28, 2022 |
| [component] Key/Value pair |
|
0 | 1346 | June 29, 2022 |
| CLI verbosity levels |
|
0 | 5217 | March 3, 2022 |
| Segmented Control |
|
2 | 4828 | April 19, 2022 |
| Notification [draft for new Vanilla site] |
|
0 | 1192 | September 1, 2021 |
| Behaviour > Delete a filter chip |
|
0 | 1079 | March 26, 2021 |